JQGrid celledit in JSON data shows URL Not set alert

Question

I need to download JSON from the server, and I want the user to click and edit the value.

But when they edit, it should not call the server. I mean, I'm not going to update immediately. So I do not want editurl. So I tried 'ClientArray' But still it shows that Url is not set in the warning field. But I need all the edited values, when the user clicks the Add Comments button, this button lights up AddSelectedItemsToSummary () to save them to the server

MVC HTML Script

<div> <table id="persons-summary-grid"></table> <input type="hidden" id="hdn-deptsk" value="2"/> <button id="AddSelectedItems" onclick="AddSelectedItemsToSummary();" /> </div> $(document).ready(function(){ showSummaryGrid(); //When the page loads it loads the persons for Dept }); 

JSON data

  {"total":2,"page":1,"records":2, "rows":[{"PersonSK":1,"Type":"Contract","Attribute":"Organization Activity","Comment":"Good and helping og"}, {"PersonSK":2,"Type":"Permanant","Attribute":"Team Management", "Comment":"Need to improve leadership skill"} ]} 

JQGRID Code

 var localSummaryArray; function showSummaryGrid(){ var summaryGrid = $("#persons-summary-grid"); // doing this because it is not firing second time using .trigger('reloadGrid') summaryGrid.jqGrid('GridUnload'); var deptSk = $('#hdn-deptsk').val(); summaryGrid.jqGrid({ url: '/dept/GetPersonSummary', datatype: "json", mtype: "POST", postData: { deptSK: deptSk }, colNames: [ 'SK', 'Type', 'Field Name', 'Comments'], colModel: [ { name: 'PersonSK', index: 'PersonSK', hidden: true }, { name: 'Type', index: 'Type', width: 100 }, { name: 'Attribute', index: 'Attribute', width: 150 }, { name: 'Comment', index: 'Comment', editable: true, edittype: 'textarea', width: 200 } ], cellEdit: true, cellsubmit: 'clientArray', editurl: 'clientArray', rowNum: 1000, rowList: [], pgbuttons: false, pgtext: null, viewrecords: false, emptyrecords: "No records to view", gridview: true, caption: 'dept person Summary', height: '250', jsonReader: { repeatitems: false }, loadComplete: function (data) { localSummaryArray= data; summaryGrid.setGridParam({ datatype: 'local' }); summaryGrid.setGridParam({ data: localSummaryArray}); } }); ) 

Button Press Function

 function AddSelectedItemsToSummary() { //get all the items that has comments //entered using cell edit and save only those. // I need to prepare the array of items and send it to MVC controller method // Also need to reload summary grid } 

Can anyone help with this? why am I getting this url with no error set?

EDIT:

This code works after loadComplete changes. Before it showed the URL Setting Warning

Answer 1

I do not understand the cell editing problem you are describing. In addition, you wrote, "I need an edited value when the user clicks + the icon in the line." Where is the + sign? Do you mean the trash.gif badge? If you want to use cell editing , how do you imagine it when you click on the icon in the row? Which cell should I start editing when I click on the "trash.gif" icon? You can start editing some other cell, because the cell with the “trash.gif” icon is editCell , but I don’t think it will be user-friendly, because for users of the point of view, it will start editing one cell when another cell is clicked. It seems to me uncomfortable. Perhaps you want to implement inline editing ?

One obvious mistake in your code is using showSummaryGrid inside RemoveFromSummary . The RemoveFromSummary function creates jqGrid, and not just fills it. Therefore, it should be called only once . To update the grid body, you must call $("#persons-summary-grid").trigger("refreshGrid"); . Instead of using postData: { deptSK: deptSk } you should use

 postData: { deptSK: function () { return $('#hdn-deptsk').val(); } } 

In case running refreshGrid will be enough and it will send the server the current value from '#hdn-deptsk' . See more details.

UPDATED . I could not reproduce the problem that you described, but I prepared demos that do what you need (if I understand your requirements correctly). The most important part of the code that you probably need is below

 $("#AddSelectedItems").click(function () { var savedRow = summaryGrid.jqGrid("getGridParam", "savedRow"), $editedRows, modifications = []; if (savedRow && savedRow.length > 0) { // save currently editing row if any exist summaryGrid.jqGrid("saveCell", savedRow[0].id, savedRow[0].ic); } // now we find all rows where cells are edited summaryGrid.find("tr.jqgrow:has(td.dirty-cell)").each(function () { var id = this.id; modifications.push({ PersonSK: id, Comment: $(summaryGrid[0].rows[id].cells[2]).text() // 2 - column name of the column "Comment" }); }); // here you can send modifications per ajax to the server and call // reloadGrid inside of success callback of the ajax call // we simulate it by usage alert alert(JSON.stringify(modifications)); summaryGrid.jqGrid("setGridParam", {datatype: "json"}).trigger("reloadGrid"); });