jqGrid edit record form empty - jqgrid

I've implemented a jqGrid, but when I try to use the built-in form edit feature, an empty form pops up.
For every column i have set editable:true except for the table's primary key, an auto-incremented id. What am I doing wrong? Do I need to have a valid editurl, rather than clientArray? Below is the jqGrid implementation:
$.ajax({
type: "GET",
url: colUrl,
datatype: "json",
success: function(result){
result = jQuery.parseJSON( result )
var colN = result.colNames;
var colM = result.colModelList;
$("#jqTable").jqGrid({
url:dataUrl,
datatype: 'xml',
mtype: 'GET',
colNames:colN,
colModel:colM,
shrinkToFit: false,
caption: db + "." + table,
pager: '#jqPager',
rowNum:10,
rowList:[10,20,30],
sortname: 'dbid',
editurl: 'clientArray',
sortorder: 'asc',
viewrecords: true,
width: 1000,
height: 400
});
$("#jqTable").jqGrid('navGrid', '#jqPager',
{edit:true, add:false, del:false, search:true, view:false}, //options
{}, // edit options
{}, // add options
{}, // del options
{multipleSearch:true,
sopt : ['eq',//equals
'ne',//not equals
'lt',//less than
'le',//less than or equal
'gt',//greater than
'ge',//greater than or equal
'bw',//begins with
'bn',//does not begin with
'in',//in
'ni',//not in
'ew',//ends with
'en',//does not end with
'cn',//contains
'nc']//does not contain
}, // search options
{} //view options
);
},
error: function(x,e){
alert(x.readyState + " " + x.status + " " + e.msg);
}
});
and here is sample colModel and ColName string:
"colModelList": [{"name":"dbid","index":"dbid","editable":"false"},{"name":"description","index":"description","editable":"true"},{"name":"file_name","index":"file_name","editable":"true"}],"colNames": ["dbid","description","file_name"]

I suppose that the reason is because you use "editable": "true" or "editable": "false" instead of "editable": true or "editable": false.
Moreover you try to use form editing for the local data editing. The current jqGrid implementation support local data editing only for cell editing and inline editing. If you do need to use form editing to edit local data you can find my demo in the answer. The code will be longer, but it is do possible to implement this.

Related

How to access id of onSelectRow in delOptions action method in jqGrid

//Hidden Input element
//my grid details:
$("#jqGrid").jqGrid({
url: '#Url.Action("EditedEventData", "Calendar" ,new{ })' + '?CountryId=' + #countryid + '&CityId=' + #cityid ,
async: true,
datatype: "json",
colModel: [
//label: "Edit Actions",
name: "",
width: 100,
formatter: "actions",
formatoptions: {
keys: true,
edit: true,
add: true,
del: true,
editOptions: {},
addOptions: {},
delOptions: {
url:'#Url.Action("RemoveEvent", "Calendar")'+ '?HolidayId='+document.getElementById('hdnEventId').value ,
//mtype: 'POST',
}// **here it is showing hdnEventId value empty**
}
}
],
onSelectRow : function(id){
console.log('inside onSelectRow');
alert(id);
document.getElementById('hdnEventId').value=id;
alert(document.getElementById('hdnEventId').value);
},
sortname: 'EventDate',
loadonce: true,
width: 750,
height: 200,
rowNum: 150,
pager: "#jqGridPager"
});
I am unable to access id of onSelectRow in delOptions action method.
So thought of taking a hidden html element and store the value but it is showing empty.
Thanks in advance
When a delete is performed the id is automatically send to the server. The parameter which is obtained via post is named id.
If you additionally want to fill a id on deleting a rows you can use some events to fill the field you want. These are described here. In the same documentation see the chapter What is posted to the server .
To fill the id in another field when a row is deleted I think the good choice is to use either serializeDelData or afterSubmit events - see the events on the same link.
When use these events the parameter postdata contain the id. By example in serializeDelData (set this in delOptions) this can look like
serializeDelData : function( postdata ) {
var id = postdata.id;
document.getElementById('hdnEventId').value=id;
return postdata;
}
Remember both events should return some params

SetLabel method of jqGrid along with setGroupHeaders

I am trying to use setlabel method of jqGrid along with setGroupHeaders. It does not work. But when I remove this setGroupHeaders, setLabel method works and I am able to change my column headers dynamically. Is there anyway to use both of the methods together?
Adding the code fragment
$("#aGrid").jqGrid({
shrinkToFit: false,
autowidth: true,
height: 305,
colNames: ['Parameter','T0','T1','T2','T3'],
colModel: [
{name:"paramName",index:"paramName",width:115,sortable:false,frozen:true},
{name:"t0",index:"t0",cellattr:myFormatter,hidden:false},
{name:"t1",index:"t1",cellattr:myFormatter,hidden:false},
{name:"t2",index:"t2",cellattr:myFormatter,hidden:false},
{name:"t3",index:"t3",cellattr:myFormatter,hidden:false}
],
viewrecords: true,
gridview: true,
sortable: false,
caption: "A Grid"
});
$("#aGrid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{startColumnName:'t0',
numberOfColumns:8,
titleText:'10.152.141.142'}]
});
$.ajax({
type : "get",
url : url,
dataType: "json",
contentType: "application/json",
success : function(responseText){
for(var i=0;i<=responseText.length;i++)
{
if(i === 0){
var newColHeaders = responseText[i];
$("#aGrid").jqGrid('setLabel', "t0",newColHeaders['t0']);
$("#aGrid").jqGrid('setLabel', "t1",newColHeaders['t1']);
$("#aGrid").jqGrid('setLabel', "t2",newColHeaders['t2']);
$("#aGrid").jqGrid('setLabel', 't3',newColHeaders['t3']);
}else{
$("#aGrid").jqGrid('addRowData',i+1,responseText[i]);
}
}
},
error: function(xhRequest, ErrorText, thrownError){
}
});
If I use the same code after removing setGroupHeaders call in above code, column headers change works as expected.
This issue is because of your group header.
When you want to change the header, first destroy the group header and then call the setLabel and again reconstruct the group Header.
$("#aGrid").jqGrid('destroyGroupHeader');
//Now change the Label of header
$("#aGrid").jqGrid('setLabel', "to","ABC"); //colModel name value
constructGroupHeader();
Construct group Header should be like this
function constructGroupHeader()
{
jQuery("#aGrid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{startColumnName:'t0',
numberOfColumns:8,
titleText:'10.152.141.142'}]
});
}
Hope this helps.

jqGrid - Setting select value in edit form

I'm having a hard time trying to set the value of a select box in the edit form. For example I have my colModel set up like this.
colModel:[
{name:'communication_id', key: true, index:'communication_id', width:30},
{name:'communication_type_id', index:'communication_type_id', width:30},
{name:'communication_type_select',index:'communication_type_select',hidden:true,width:150, editable:true,edittype:'select',formatter:'select',editrules: {edithidden:true},
formoptions:{label:'Communication Type'},
editoptions:{dataUrl:"working_data_url",
buildSelect: function(json){
var response = $.parseJSON(json);
var s = '<select>';
$.each(response.results,function(i,com){
s += ('<option value="' + com.communication_type_id + '">'+ com.communication_type_desc + '</option>');
});
return s + "</select>";
},dataInit: function(elem){
alert(temp);
//alert($('#com_table_communication_type_id').val());
//$(elem).val($('#com_table_communication_type_id').val());
}}},
{name:'communication_send_dt', index:'communication_send_dt', width:150, sortable:true, sorttype: 'date',
firstsortorder: 'desc', datefmt:'m/d/Y', editable:true},
editoptions: {recreateForm:true},
rowNum:10,
width:'100%',
rowList:[10,20,30],
pager: '#com_pager',
sortname: 'communication_send_dt',
viewrecords: true,
sortorder: "desc",
loadonce:true,
caption: "Communication",
jsonReader: {
repeatitems : false,
root: "results"
},
height: '100%',
onSelectRow: function(communication_id){
var comtype = $(this).getRowData(communication_id);
var temp = comtype['communication_type_id'];
}
});
grid.jqGrid('navGrid','#com_pager',{edit:true,add:false,del:false});
When I click the edit button it loads the select options correctly, but I am having trouble with which one is selected. I want the value from communication_type_id to load into communication_type_select and I have tried different things to get that too happen. Basically if the id in communication_type_id is 2, then I want the select box in the edit form to be set to 2 as well when the edit form loads. Any help on this?
Update 1: I got it mostly working now by using beforeShowForm, but now I am running into a weird thing. When I have an alert in the beforeShowForm everything works, but when its commented out, it does not work! Thanks for your help #Oleg!
grid.jqGrid('navGrid','#com_pager',{edit:true,add:false,del:false},
{closeOnEscape:true, recreateForm:true,beforeShowForm: function(formid){
//alert("com type id = "+comidvar + " response id = "+comrespvar + " com form type id = "+comfrmtypevar);
$("#communication_type_select", formid).attr("value",comidvar);
$("#form_response_select", formid).attr("value",comrespvar);
$("#form_type_select", formid).attr("value", comfrmtypevar);
}},
If I understand you correct you should use ajaxSelectOptions option of jqGrid with data property. You can define some additional option like communication_type_id in the data which value you can returns by the usage of $("#list").jqGrid('getGridParam', 'selrow') and then getCell to get the value from communication_type_id column. See the answer for details.

Loading json data into jqgrid using setGridParam

I'm having some issues setting the url of the jqgrid using setGridParam.
I receive the message: "f is undefined".
My setup:
$("#prices").jqGrid({
colModel: [
...
],
pager: jQuery('#pricePager'),
ajaxGridOptions: { contentType: "application/json" },
mtype: 'POST',
loadonce: true,
rowTotal: 100,
rowNum: -1,
viewrecords: true,
caption: "Prices",
height: 300,
pgbuttons: false,
multiselect: true,
afterInsertRow: function (rowid, rowdata, rowelem) {
// ...
},
beforeSelectRow: function (rowid, e) {
// ...
},
onSelectRow: function (rowid, status) {
// ...
}
});
Getting the data:
$("#prices").setGridParam({ datatype: 'json', page: 1, url: '#Url.Action("GridDataPrices")', postData: JSON.stringify(selections) });
$("#prices").trigger('reloadGrid');
The Response is non encoded json:
{"total":1,"page":1,"records":100,"rows":[{"id":160602948,"StartDate":"\/Date(1311717600000)\/","Duration":7,"Price":1076.0000,"Code":"code"},{"id":160602950,...}]}
However, I get following message, using firebug:
"f is undefined"
I got this working first using addJSONData, but had to replace it because I want to preserve the local sorting.
Thanks in advance.
After you uploaded the code all will be clear. Your main errors are the follwings:
you should include datatype: 'local' in the jqGrid. Default value is 'xml'.
the JSON data have named properties so you have to use jsonReader: { repeatitems: false } (see the documentation for details)
you use "ArivalCodeWay" in colModel and "ArrivalCodeWay" in the JSON data. So you should fix the name of the corresponding jqGrid column
to decode the date from the "\/Date(1312840800000)\/" format you should include formatter:'date' in the corresponding column.
In the same way I find good to include formatter:'int', sorttype:'int' in the 'Duration' column and sorttype:'number', formatter:'number', formatoptions: { decimalPlaces:4, thousandsSeparator: "," } in the 'Price' column.
if you use JSON.stringify you should include json2.js to be sure that your code will work in all web browsers.
The modified demo (including some other minor changed) you can find here. If you click on "Click me" button the grid contain will be loaded.

How to dynamically pass all of the jqgrid cell value when deleting a row

I'm very new with JQGrid, so I apologize in advance if this a very 'duh' question..
The case is when I delete a row in the grid, jqgrid only pass the parameter id to the editurl. However, there are cases when I need more than one id parameter to delete a row, for instance for grid like this:
{UserID, Message} => {(user1, "hello"),(user1, "hola"),(user2,"hi")}
If i want to only delete the (user1, "hello") row, I need JQGrid to pass the parameter UserID=user1 and Message="hello" otherwise the (user1, "hello") and (user1, "hola") will be deleted.
I alreadt tried to modify the url before deleting by using onClickSubmit parameter:
onclickSubmit: function(rp_ge, postdata){
rp_ge.url = 'RowManipulator.php?UserID='+$('#grid').getCell(postdata, 'UserID')+
'&Message='+$('#grid').getCell(postdata,'Message');
However the resulted url (after checking on firebug) is:
RowManipulator.php?UserID=user1&Message=false
instead of RowManipulator.php?UserID=user1&Message="hello". It seems that the message paramater can't be delivered.
Does anyone have any idea how to achieve what I intended to? Any help will be very appreciated
Updated:
Here is the jquery code:
jQuery(document).ready(function(){
jQuery("#list").jqGrid(
{ url:'DataFetcher.php',
datatype: 'xml',
mtype: 'GET',
colNames:['UserId','Message'],
colModel:[
{name:'UserId',index:'UserId',width:75, editable:false,align: 'left'},
{name:'Message',index:'Message',width:200, editable:true,align: 'left'}
],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
sortname:'UserId',
sortorder: "asc",
viewrecords: true,
imgpath: 'jqgrid/css/images',
caption: 'MESSAGE',
editurl:'RowManipulator.php',
height: 350,
width: 1000});
jQuery("#list").jqGrid('navGrid','#pager',{},
{height:280,reloadAfterSubmit:true},
{height:280,reloadAfterSubmit:true},
{onclickSubmit: function(rp_ge, postdata){
rp_ge.url = 'RowManipulator.php?UserId='
$('#list').getCell(postdata, 'UserId') &&
Message=$('#list').getCell(postdata,Message);
},
reloadAfterSubmit:true},
{sopt:['cn','eq']})
The line
rp_ge.url = 'RowManipulator.php?UserId='
$('#list').getCell(postdata, 'UserId') &&
Message=$('#list').getCell(postdata,Message);
has syntax errors. Is postdata not already contain the 'UserId'? Then $('#list').getCell(postdata, 'UserId') will gives you back postdata.
Try with
rp_ge.url = 'RowManipulator.php?UserId=' +
$('#list').getCell(postdata, 'UserId') +
'Message=' + $('#list').getCell(postdata,'Message');
or better with
rp_ge.url = 'RowManipulator.php?' +
jQuery.param({UserId: $('#list').getCell(postdata, 'UserId'),
Message: $('#list').getCell(postdata, 'Message')});

Resources