It figures… Right after I post I find the solution. I need to add my edit features to the options for double click.
ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow', rowid, {height:275,reloadAfterSubmit:false,closeAfterEdit:true,closeOnEscape:true});
}
Now the dialog closes as expected. Hope this helps someone else…
Ok, for the record this is how its done:
$(“#navgrid”).jqGrid('navGrid','#pagernav',
{addfunc: addArticle, editfunc: editArticle }, // add and edit options override
{}, // edit options
{}, // add options
{reloadAfterSubmit:false,closeOnEscape:true}, // del options
{closeOnEscape:true,closeAfterSearch:true} // search options
);
I'm thinking of trying to use my own edit/add form by overriding the add/edit buttons. Is this easily done?
Let me clarify, I'll pop up a dialog that loads the form via ajax and submits via ajax, reloads the table and then closes the dialog. Is this feasible?
No bites on this, eh?
Oleg,
Thank you so much!!
For the record, if anyone else gets stuck and this is Google indexed, here is the final constructor!
$(“#navgrid”).jqGrid({
url:appendSession(“/async/users.lasso?x=1”),
datatype: “json”,
hidegrid: false,
colNames:[“User ID”,”First Name”,”Last Name”,”Email”,”Password”,”Groups”,”Notes”,”Admin”],
colModel:[
{name:'id', index:'userid', width:55, editable:false, editoptions:{readonly:true,size:10}, hidden:true},
{name:'firstname', index:'firstname', width:100, editable:true, editoptions:{size:25}, editrules:{required:true}, resizable:true},
{name:'lastname', index:'lastname', width:100, editable:true, editoptions:{size:25}, editrules:{required:true}, resizable:true},
{name:'email', index:'email', width:200, editable:true, editoptions:{size:25}, editrules:{email:true, required:true}, resizable:true},
{name:'password', index:'password', width:100, editable:true, editoptions:{size:25}, editrules:{edithidden:true}, hidden:true, resizable:true },
{name:'groups', index:'groups', width:260, editable:true, edittype:”select”, editoptions:{ multiple:true, size:3,
value: $.parseJSON( $.ajax({ url: appendSession('/async/groups.lasso'), type:'post', data: { x:1 }, dataType: 'json', async: false, success: function(data, result) { if (!result) alert('Failure to retrieve the groups.'); } }).responseText)
},
sortable:false, resizable:true},
{name:'notes', index:'notes', width:10, editable:true, edittype:”textarea”, editrules:{edithidden:true}, hidden:true, editoptions:{rows:”3″,cols:”26″}, sortable:false},
{name:'isadmin', index:'isadmin', width:60, editable:true, edittype:”checkbox”, editoptions:{value:”Yes:No”}, align:”center” }
],
rowNum:10,
rowList:[10,20,30],
pager: '#pagernav',
sortname: “userid”,
viewrecords: true,
sortorder: “desc”,
caption:”Users Management”,
editurl:appendSession(“/async/users.lasso?x=2”),
height:210
});
$(“#navgrid”).jqGrid('navGrid','#pagernav',
{}, //options
{height:325,reloadAfterSubmit:false,closeAfterEdit:true,closeOnEscape:true}, // edit options
{height:325,reloadAfterSubmit:false,closeAfterAdd:true,closeOnEscape:true, afterSubmit: function(response,postdata) { return [true,””,response.responseText]; } }, // add options
{reloadAfterSubmit:false,closeOnEscape:true}, // del options
{closeOnEscape:true} // search options
);
Well, we're getting closer. Its odd. This is what the row looks like inthe Safari element inspector
Notice what the id is. Did I make a mistake in there? I implented the code as you suggested. I don't see a section on the afterSubmit in detail within the wiki to understand the
Oleg,
I've searched the documentation a few times and I'm not seeing any examples of how the data has to be formatted when returning the new ID back to the plugin. Do you have an example? Should it be JSON since I am using datatype: 'json' ? Should it be in the form of {id:1234}?
Thanks,
Steffan
I'm stuck. Any suggestions?
As a temporary work around, do you have a way of html encoding your text server side before sending it to the grid?
This is my current constructor:
$(“#navgrid”).jqGrid({
url:appendSession(“/async/users.lasso?x=1”),
datatype: “json”,
hidegrid: false,
colNames:[“User ID”,”First Name”,”Last Name”,”Email”,”Password”,”Groups”,”Notes”,”Admin”],
colModel:[
{name:'id', index:'userid', width:55, editable:false, editoptions:{readonly:true,size:10}, hidden:true},
{name:'firstname', index:'firstname', width:100, editable:true, editoptions:{size:25}, editrules:{required:true}, resizable:true},
{name:'lastname', index:'lastname', width:100, editable:true, editoptions:{size:25}, editrules:{required:true}, resizable:true},
{name:'email', index:'email', width:200, editable:true, editoptions:{size:25}, editrules:{email:true, required:true}, resizable:true},
{name:'password', index:'password', width:100, editable:true, editoptions:{size:25}, editrules:{edithidden:true}, hidden:true, resizable:true },
{name:'groups', index:'groups', width:260, editable:true, edittype:”select”, editoptions:{ multiple:true, size:3,
value: $.parseJSON( $.ajax({ url: appendSession('/async/groups.lasso'), type:'post', data: { x:1 }, dataType: 'json', async: false, success: function(data, result) { if (!result) alert('Failure to retrieve the groups.'); } }).responseText)
},
sortable:false, resizable:true},
{name:'notes', index:'notes', width:10, editable:true, edittype:”textarea”, editrules:{edithidden:true}, hidden:true, editoptions:{rows:”3″,cols:”26″}, sortable:false},
{name:'isadmin', index:'isadmin', width:60, editable:true, edittype:”checkbox”, editoptions:{value:”Yes:No”}, align:”center” }
],
rowNum:10,
rowList:[10,20,30],
pager: '#pagernav',
sortname: “userid”,
viewrecords: true,
sortorder: “desc”,
caption:”Users Management”,
editurl:appendSession(“/async/users.lasso?x=2”),
height:210
});
$(“#navgrid”).jqGrid('navGrid','#pagernav',
{}, //options
{height:325,reloadAfterSubmit:false,closeAfterEdit:true,closeOnEscape:true}, // edit options
{height:325,reloadAfterSubmit:false,closeAfterAdd:true,closeOnEscape:true}, // add options
{reloadAfterSubmit:false,closeOnEscape:true}, // del options
{closeOnEscape:true} // search options
);
Using trial and error I found that if I wanted to use “userid” I'd have to change the parameters in my grid constructor. I've changed my code on the backend to just use whatever your plugin sends. I have all that working fine. My question is what do I need to have the server send back to the client? Currently, I have the server sending back the id of the newly created record. For example id:1234 etc. So, what do I need to do on the client (browser) side to grab the new ID and insert it into the table? Will your jsonReader example do that?
Thanks,
Steffan
I have to remember to set the initial sort column to match my table. Duh.
Thanks for all the help today Oleg!
Ok, now, the counter in the navbar shows the appropriate counts BUT nothing in the table. If I reverse the sort order on a column, it starts working. Weird! It does this regardless of jQuery 1.4.4 or 1.5.1
Thanks,
Steffan
Ok, following the same grid declaration above with the exception of JSON, I'm stuck yet again. I have the same structure of JSON as you do on your link
I was able to get the XML working. There was something weird. I'm not sure what I did but it just stated working. I did have the content type in there though. So, now I am looking to do the JSON rather than XML to lighten the load.
I just downloaded the jQuery UI a couple days ago and it still ships with 1.4.4. Is the UI compatible with 1.5.1?
Thanks,
Steffan
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top