Passing variables through URL in Jqgrid to controller in mvc - asp.net-mvc-2

How do I pass values from url to Jqgrid, the issue is the Jqgrid needs to be loaded based on edit link on previous page, and we have the URL like:
http://localhost:49771/Search/EditSearchResults?id=ID_HelpTopics&action=edit
I need to be able to use this id in URL for populating the grid data, so I need to pass this value through grid to controller to get the results and the grid I have is like:
$("#list").jqGrid({
url: '<%= Url.Action("EditSearchResults", new {controller = "JSonData" }) %>',
datatype: 'json',
colNames: ['Language', 'ID'],
colModel: [
{ name: 'Language', index: 'Language', editable: false, width: 40, align: 'left', sortable: false },
{ name: 'ID', index: 'ID', width: 40, editable: true, edittype: "text", align: 'left', editoptions: { size: 5, maxlength: 30 }, sortable: false }, ],
editurl: '<%= Url.Action("EditSearchResults", new {controller = "JSONData"}) %>',
pager: '#pager',
//autowidth: true,
width: "500",
autowidth: true,
rowNum: 20,
height: "200",
loadonce: false,
rowList: [5, 10, 20, 50],
recordtext: "View Records {0} - {1} of {2}",
emptyrecords: "No records to view",
loadtext: "Loading...",
pgtext: "Page {0} of {1}",
sortname: 'Results',
sortorder: "desc",
viewrecords: true,
scroll: false,
loadonce: false,
caption: 'Edit Search Results',
ondblClickRow: function (id) {
if (id != null) {
jQuery('#grid').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('saveRow', id);
jQuery('#list').jqGrid('editRow', id, true, false, processEdit);
lastsel = id;
}
}
});
});
How can use the current URL to pass id to controller to populate jqgrid, How should the controller and jqgrid should be like? Any ideas?

Url.Action will take a anonymous object as a parameter set
url: '<%= Url.Action("EditSearchResults",
new {controller = "JSonData" },
new {id = Request.Params[id] }) %>',
However it would be preferable to make that part of your model than depending on the Request.

Related

Extjs 6 viewModel and Store

I am using Extjs 6 to build grid view.
this is my Store :
schedule.js
Ext.define('schedulewise.store.schedule.Schedule', {
extend: 'Ext.data.Store',
alias: 'store.Schedule',
requires: [
'schedulewise.utils.Config'
],
model: 'schedulewise.model.schedule.Schedule',
autoLoad: true,
proxy: {
type: 'rest',
url: 'http://127.0.0.1:8080/' + schedulewise.utils.Config.projectName + '/rest/cserver/dto/schedule/allInfo?request=loadSchedule',
useDefaultXhrHeader: false,
reader: {
type: 'json'
},
writer: {
type: 'json'
}
}
this is my viewModel:ScheduleModel.js
Ext.define('schedulewise.view.schedule.ScheduleModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.ScheduleModel',
stores: {
Schedule: {
type:'Schedule'
}
},
data:{
title:'Schedules'
}
});
this is my view:
Ext.define("schedulewise.view.schedule.MainPanel", {
extend: 'Ext.grid.Panel',
xtype: 'MainPanel',
requires: [
'schedulewise.utils.Config'
],
layout: 'fit',
region: 'center',
controller: 'ScheduleController',
viewModel: 'ScheduleModel',
bind: {
store: '{Schedule}',
title:'{title}'
},
columns: [
{
text: 'Name',
dataIndex: 'scheduleName',
resizable: false,
hideable: false,
sortable: false,
flex: 25 / 100
},
{
text: 'lastestVersion',
dataIndex: 'lastestVersion',
resizable: false,
hideable: false,
sortable: false,
flex: 25 / 100
},
{
text: 'currentVersion',
dataIndex: 'lastestVersion',
resizable: false,
hideable: false,
sortable: false,
flex: 25 / 100
},
{
text: 'date range',
dataIndex: 'scheduleRange',
resizable: false,
hideable: false,
sortable: false,
flex: 25 / 100
}
]
});
i found that when the view loaded,Store always requests two times.
I do not know why?
screenshot
You creating two instances of Schedule store. And because of autoLoad: true upon instance creation it is making a request to the server.

ExtJS5 Download Excel File

I have a form defined that I use to submit to a PHP script that will create an Excel Spreadsheet using PHPExcel.
Ext.define('Admin.view.main.LedgerParams',{
extend: 'Ext.window.Window',
xtype: 'ledgerparams',
title: 'Generate Account Ledger',
defaultFocus: '[name=period]',
layout: 'fit',
closable: false,
resizable: false,
modal : true,
standardSubmit: true,
items: [{
xtype: 'form',
layout: 'fit',
fieldDefaults: {labelWidth: 80,labelAlign: 'right'},
padding: 10,
items: [{
xtype: 'fieldset',
padding: 10,
title: '<b>Account Ledger Parameters</b>',
defaultType: 'numberfield',
defaults: {enforceMaxLength: true},
items:[{
name: 'period',
flex : 1,
fieldLabel: 'Fiscal Period',
selectOnFocus: true,
value: new Date().getFullYear(),
minValue: 1980
}]
}]
}],
buttons:[{
text: 'Generate',
handler: 'onClick_btnLedgerPrint'
},{
text: 'Cancel',
handler: function(){this.up('window').destroy();}
}]
});
The onClick_BtnLedgerPrint method in the main controller calls the form submit:
onClick_btnLedgerPrint: function(btn){
btn.up('window').down('form').submit({
url: 'app/data/Reports.php',
params: {action:'print',reportname:'generate_ledger'}
});
}
however it appears that a JSON response is required by the form from the server instead of initiating the download. Is the standardSubmit broken in ExtJS5? Any help would be appreciated!
JavaScript cannot initiate the download, same as Ext JS. Only browser does this.
var formValues = btn.up('window').down('form').getForm().getValues();
var params = { action: 'print', reportname: 'generate_ledger' };
var requestParams = Ext.merge(formValues, params);
var url = 'app/data/Reports.php?' + Ext.Object.toQueryString(requestParams);
document.location = url;
Or you can try to use method with iframe described here

ExtJS 3.4 - Select row after load store of my gridpanel

My grid panel:
new Ext.grid.GridPanel({
title: "Utilisateurs",
layout: 'fit',
style: marginElement,
columns: mesColonnesUtil,
id: 'gridPanelUtil',
width: '70%',
colspan: 2,
collapsible: false,
layout: 'fit',
autoWidth: true,
monitorResize: true,
height: 200,
store: storeUtil,
stripeRows: true,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners: {
click: function () {
this.selModel.getSelected();
}
}
});
My store:
var storeUtil = new Ext.data.JsonStore({
proxy: proxyGrUtil,
baseParams: {
method: 'storeUtil',
gr: ''
},
autoLoad: true,
fields: ["Nom", "Prenom", "LDAPUser"],
root: "rows",
totalProperty: "total",
successProperty: "success"
});
My combobox with select event, I load my grid panel with params:
{
xtype: 'combo',
store: storeGrUtil,
id: 'comboGrUtil_GrUtil',
width: 300,
valueField: "id",
displayField: "lib",
triggerAction: 'all',
mode: 'local',
listeners: {
select: function () {
Ext.getCmp('gridPanelUtil').store.load({
params: {
gr: Ext.getCmp('comboGrUtil_GrUtil').getValue() // this the value of items selected combobox
}
})
}
}
}
After this event, I can't select a row in my grid panel, why ?
I don't understand.
The problem is the call of the load event of the store. You have to execute the row selection in this event and not after the call. If I remember well, the grid is completely loaded in this event. Take a look of the code tag above.
If it not working, I suggest to take a look at other event. Maybe with rowinserted of the gridView.
var storeUtil = new Ext.data.JsonStore({ proxy: proxyGrUtil,
baseParams: { method: 'storeUtil', gr: '' },
autoLoad: true,
fields: ["Nom", "Prenom", "LDAPUser"],
root: "rows",
totalProperty: "total",
successProperty: "success",
listeners:
load: function(e, records, options){
Ext.getCmp("gridPanelUtil").getSelectionModel().selectRow(maLigneASelectionner);
}
}
});
you need to use the selectionModel of the grid, maybe you can pass a callback when calling load to the store
store.load({
callback: function(records, operation, success) {
//operation object contains all of the details of the load operation
//records contains all the records loaded
console.log(records);
}
});
the you can call
grid.getSelectionModel( ).select(object/index);
//you need to pass record instance or index

ExtJS: Removing and Readding a FormPanel into a Window

I'm having a problem where I would like to remove a FormPanel from a Window.
Here is my Form which is being loaded in a Window:
myForm = new Ext.FormPanel({
frame: true,
width: '100%',
id: 'myform',
layout: 'form',
autoHeight: true,
autoDestroy: false,
region: 'center',
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'mytextfield',
fieldLabel: 'My Label',
}]
});
MyWindow = new Ext.Window({
title: 'MyWindow',
layout: 'auto',
resizable: false,
width: 717,
autoheight:true,
id:'mywindow',
closeAction:'hide',
closable: true,
items:[Ext.getCmp("myform")]
});
Now I want to remove this form and have to show another form, and I'm doing like this somewhere else:
MyWindow.removeAll();
MyWindow.add(Ext.getCmp("myAnotherForm"));
But this gives me error "Uncaught TypeError: Cannot read property 'events' of undefined" in ext-all-debug.js.
Is there anything, I'm missing here ?
Thanks.
You can remove the form and add another form by using the following code:
Ext.onReady(function() {
var btn = new Ext.Button({
id : 'button',
width : 100,
height : 30,
text : 'click me',
listeners : {
click : function(){
var myanother = myAnotherForm;
var anotherbtn = btn1;
Mywindow.removeAll();
Mywindow.add(myanother);
Mywindow.add(anotherbtn);
Mywindow.doLayout();
}
}
});
var btn1 = new Ext.Button({
id : 'button1',
width : 100,
height : 30,
text : 'Another button'
});
myAnotherForm = new Ext.FormPanel({
frame: true,
width: '100%',
id: 'myanotherform',
layout: 'form',
autoHeight: true,
autoDestroy: false,
region: 'center',
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'mytextfield',
fieldLabel: 'My Another Label',
}]
});
myForm = new Ext.FormPanel({
frame: true,
width: '100%',
id: 'myform',
layout: 'form',
autoHeight: true,
autoDestroy: false,
region: 'center',
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'mytextfield',
fieldLabel: 'My Label',
}]
});
var Mywindow = new Ext.Window({
title: 'MyWindow',
layout: 'auto',
resizable: false,
width: 317,
autoheight:true,
id:'mywindow',
closeAction:'hide',
closable: true,
items : [myForm,btn]
});
Mywindow.show();
});
The working sample for the above is follows:
http://jsfiddle.net/kesamkiran/MVewR/1/
* Click on 'click me' button then you will get the another form with another button.If you want to change only form,then you can remove the button.

Edit form on JQGrid and ASP.NET MVC 2

I am having an issue on JQgrid when I select a row and press edit button. The problem is that I want a modal edit-form and it apears at the top of the page, but when I click on it, it close.
I review the JQgrid docs and search for examples but I can't make it work. I am using ASP.NET MVC 2 and JQgrid 1.4.1 and I attached the files JqDnr and Jqmodal.
<script type="text/javascript">
var lastsel;
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Nombre', 'Sponsor', 'Fecha de Evaluacion', 'Fecha Prevista de Fin', 'Planta', 'Sector', 'LOTO?', 'Trabajo en Altura?', 'Espacio Confinado?', 'Caliente?', 'Amianto?', 'Observaciones'],
colModel: [
{ name: 'Id', index: 'Id', width: 40, align: 'left', editable: false },
{ name: 'Nombre', index: 'Nombre', width: 200, align: 'left', editable: true },
{ name: 'Sponsor', index: 'Sponsor', width: 80, align: 'left', editable: true, edittype: "select", editoptions: { size: 71} },
{ name: 'Fecha de Evaluacion', index: 'FechaEvaluacion', width: 90, align: 'left', editable: true },
{ name: 'Fecha Prevista de Fin', index: 'FechaPrevistaFin', width: 90, align: 'left', editable: true },
{ name: 'Planta', index: 'Planta', width: 70, align: 'left', editable: true },
{ name: 'Sector', index: 'Sector', width: 70, align: 'left', editable: true },
{ name: 'LOTO?', index: 'PermisoLOTO', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Trabajo en Altura?', index: 'PermisoTrabajoAltura', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Espacio Confinado?', index: 'PermisoEspacioConfinado', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Caliente?', index: 'PermisoCaliente', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Amianto?', index: 'PermisoAmianto', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Observaciones', index: 'Observaciones', width: 200, align: 'left', editable: true}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/sand/images',
caption: 'Tareas'
}).navGrid("#pager", { edit: true });
});
</script>
Tareas
So, any help will be very helpfull. Thanks!
I can not reproduce your probelm (see the test here), but I can definitively say you that you have to change the values from the name property from the colModel. The name property will be used as the property name. It build additionally the ids of different elements in the Edit form. The id ementens like
id="Fecha Prevista de Fin"
id="tr_Fecha Prevista de Fin"
id="Amianto?"
id="tr_Amianto?"
and so on are bad. You can use Developer Tools of IE for example (press F12 in IE) to examine the ids used in the Edit form of your current code. I strictly recommend you to use in the name property only characters from the set [a-zA-Z0-9] and start the name with a letter. No blanks inside of the name is permitted (see here and here).
By the way the parameter imgpath is deprecated since many jqGrid releases and you should remove it.