jQGrid celledit in JSON data shows URL Not set alert

Question

I need to load a JSON from server and i want to enable a user to click and edit the value.

But when they edit, it should not call server. i mean i am not going to update immediately. So i dont want editurl. So i tried 'ClientArray' But still it shows Url is not set alert box. But i need all the edited values when the user click Add Commented Items button this button will fire AddSelectedItemsToSummary() to save those in 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 click 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

}

Could any one help on this? why i am getting that URL is not set error?

EDIT:

This code is working after loadComplete changes. Before it was showing No URL Set alert

Beadsman

Answer 1

I don't understand the problem with cell editing which you describe. Moreover you wrote "i need the edited value when the user click + icon in a row". Where is the "+" icon? Do you mean "trash.gif" icon? If you want to use cell editing, how you imagine it in case of clicking on the icon on the row? Which cell should start be editing on clicking "trash.gif" icon? You can start editing some other cell as the cell with "trash.gif" icon ising editCell method, but I don't think that it would be comfortable for the user because for the users point of view he will start editing of one cell on clicking of another cell. It seems me uncomfortable. Probably you want implement inline editing?

One clear error in your code is usage of showSummaryGrid inside of RemoveFromSummary. The function RemoveFromSummary create jqGrid and not just fill it. So one should call it only once. To refresh the body of the grid you should call $("#persons-summary-grid").trigger("refreshGrid"); instead. Instead of usage postData: { deptSK: deptSk } you should use

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

In the case triggering of refreshGrid would be enough and it will send to the server the current value from the '#hdn-deptsk'. See the answer for more information.

UPDATED: I couldn't reproduce the problem which you described, but I prepared the demo which do what you need (if I understand your requirements correctly). The most important part of the code which you probably need you will find 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");
});

Quotha

Thanks a lot. It is helpful. I was followed you demo ok-soft-gmbh.com/jqGrid/SaveRow.htm . I also need to implement celledit for one field. But the grid was populated using datatype:JSON and from server url. After loading i want to edit a field and save changes locally. – Beadsman

I managed using loadComplete event and changed grid.setGridParam({ datatype: 'local' }) and grid..setGridParam({ data: localDataStoredArray }); and used cellEdit: true, cellsubmit: 'clientArray', – Beadsman

Updated my working code in the question. But not sure is the correct way of doing it. – Beadsman

@Murali: Sorry, but why you don't use just loadonce: true instead? – Quotha

@Murali: If your problem is finding all cells which the user previously edited then you should use the fact that cell editing add dirty-cell class on all cells which were edited. Another question: where you use now AddSelectedItemsToSummary function? – Quotha

Let me try removing loadComplete from grid and use loadonce:true But in this case what should be cellsubmit:??? – Beadsman

After changing it with loadonce, it is not retaining. When i click on next row editable cell, it is disappears. Also next row editable cell also not in edit mode. Seems like editable removed for all cells :( – Beadsman

Sorry. Thats my mistake. Corrected now – Beadsman

@Murali: I appended my answer – Quotha

Thanks Oleg. Let me check the answer and demo and let you know. – Beadsman

Oleg. Everything works fine except grid reload. summaryGrid.trigger("reloadGrid"); not sending a call to server. I checked with Firebug – Beadsman

Once again you rock! Your answer from #5398171 helped me. Thanks!. All works fine and you saved my day – Beadsman

@Murali: You are welcome! You are right that I forget to reset datatype to "json" before reloading. One need to do this because you need to reload the data from the server. I fixed the demo for other reader. – Quotha