jQuery Grid Plugin - jqGrid

Hi Oleg.  This is what I have.  Everything seems to work fine.  The data comes back and populates the grid just fine.  A column in my database table is actually called id.  I would like that id to come through, not the row id.  I added editable: true (and readonly: true) so that the field would come over.  But it doesn't work on an add because of the readonly value.  I changed the id to rec_id to see if anything changed.  It did but delete wouldn't work.  So I hope you can see the delimma I'm in.  I added the additionalDataWhenEditing property hoping that might work.  That is, where I can put the id from my table in it.

I'm new to the grid so I'm still learning how this all works.  And as you might be able to tell, I'm using AJAX webservices in .NET. 

Thank you!

function GetNavigationDetails() {
	        $("#grid").jqGrid({
	            datatype: 'jsonstring',
	            jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: true, cell: "cell" },
	            gridview: true,
	            colNames: ['ID', 'Header ID', 'Title', 'Icon', 'Link', 'Sequence'],
	            colModel: [{ name: 'id', index: 'id', editable: true, editoptions: { readonly: true }, width: 20, jsonmap: 'id'},
		{ name: 'header_id', index: 'header_id', width: 90, jsonmap: 'header_id'},
		{ name: 'title', index: 'title', editable: true, edittype: 'text', editoptions: { size: 20, maxlength: 30}, width: 100 },
		{ name: 'icon', index: 'icon', width: 80, align: 'right' },
		{ name: 'link', index: 'link', editable: true, edittype: 'text', width: 80, align: 'right' },
		{ name: 'sequence', index: 'sequence', width: 80, align: 'right' }],
	            rowNum: 10,
	            rowList: [10, 15, 20],
	            height: 'auto',
	            loadonce: false,
	            sortname: "id",
	            viewrecords: true,
	            sortorder: "desc",
	            caption: "Navigation Details",
	            editurl: "WhamService.svc/SaveNavigationDetails",
	            pager: '#pager',
	            scrollOffset: 0
	        }).navGrid("#pager",
                { edit: true, add: true, del: true },
                { afterShowForm: afterShowEdit, afterSubmit: processAddEdit, beforeSubmit: validateData, 

		closeAfterAdd: true, closeAfterEdit: true, 
                    onclickSubmit: function (eparams) {
                        return { additionalDataWhenEditing: "I am additional data when editing" };
                    }
                },
                { afterShowForm:afterShowAdd, afterSubmit:processAddEdit, beforeSubmit:validateData, 

		closeAfterAdd:true, closeAfterEdit:true }
            );
 
	        $("#grid").clearGridData();
 
	        $.ajax({
	            type: "POST",
	            contentType: "application/json; charset=utf-8",
	            url: "WhamService.svc/GetNavigationDetails",
	            dataType: "json",
	            success: function (msg) {
	                var data = msg.d;
	                $("#grid").jqGrid('setGridParam', { datatype: 'jsonstring', datastr: data });
	                $("#grid").trigger('reloadGrid');
	            }
	        });
	    };

OlegK said:

Hi dzangger67,

what I need is the JSON data which produce the "WhamService.svc/GetNavigationDetails". Could you include the data?

Independend from this you can fix you problem if you include key:true as the additional property of the 'id' column.

By the way you don't need to use separate ajax call. jqGrid can hold the data for you see here an example.

Best regards
Oleg 

Thank you Oleg.  The key: true seemed to do the trick.  I took a look at the link you referenced and I'm in the process of adding that to my code.  Thank you again 🙂

dave