jQuery Grid Plugin - jqGrid - Topic: AdditionalDataWhenEditing

dzangger67 on AdditionalDataWhenEditing

Sun, 07 Aug 2011 04:03:05 +0300

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

OlegK on AdditionalDataWhenEditing

Sun, 07 Aug 2011 02:55:14 +0300

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

dzangger67 on AdditionalDataWhenEditing

Sun, 07 Aug 2011 01:41:18 +0300

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 on AdditionalDataWhenEditing

Sun, 07 Aug 2011 00:58:47 +0300

From your question is uncler how you fill the grid. If you do this in the correct way you use 'rec_id' as the id value in your JSON response from the server. In the case the rowid will be the same as your database id. If you want display the record id to the user abd have 'rec_id' as the column you can include key:true property in 'rec_id' column of you colModel. In the case the id field in the JSON input will be ignored and the value for the rec_id' column will be used as the rowid.

Best regards
Oleg

dzangger67 on AdditionalDataWhenEditing

Sun, 07 Aug 2011 00:29:24 +0300

Hi. I'm using jqGrid and would like to see the id to my records instead of the rowid while trying to edit/delete a record. Is there a way I can pass in the value of my id (it's in the grid) to the server function?

For example, we know we get id (the row) and the oper (del). But if the id to my record is being deleted, say 312, can I get 312 returned as well? Below is where I was trying to return 'rec_id'

.navGrid("#pager", 
                { edit: true, add: true, del: true },
                { afterShowForm: afterShowEdit, afterSubmit: processAddEdit, beforeSubmit: validateData, closeAfterAdd: true, closeAfterEdit: true, 
                    onclickSubmit: function (eparams) {
                        return { additionalDataWhenEditing: 'rec_id' };
                    }
                },
                { afterShowForm:afterShowAdd, afterSubmit:processAddEdit, beforeSubmit:validateData, closeAfterAdd:true, closeAfterEdit:true }

thank you