Rectangle 27 1

It seems that you want to change the rowid of the row after editing. You send the editing data to the server using prmNames: { id: "_rowid", ...} option. So postdata._rowid should contains the rowid of editing row. The response from the server after editing seems looks something like

{"PrimaryKeyValues":["1","change","004"],"Id":"1_63_68_61_6E_67_65004"}

where Id property contains new rowid after editing the row. In the case you can use afterComplete callback

afterComplete: function (jqXhr, postdata, $form, formOper) {
    if (formOper !== "add") {
        var json = $.parseJSON(jqXhr.responseText),
            p = $(this).jqGrid("getGridParam"),
            oldId = p.idPrefix + postdata._rowid,
            newId = p.idPrefix + json.Id,
            i;
        $("#" + $.jgrid.jqID(oldId)).attr("id", newId);
        if (p.selrow === oldId) {
            p.selrow = newId;
            i = $.inArray(oldId, p.selarrrow);
            if (i >= 0) {
                p.selarrrow[i] = newId;
            }
        }
    }
}

You should include such callback in the editParams which you use for the form editing:

var editParams =  {
    afterSubmit: function (response, postdata) {
        return EditAddForm_AfterSubmit(response, postdata);
    },
    afterComplete: function (jqXhr, postdata, $form, formOper) {
        if (formOper !== "add") {
            var json = $.parseJSON(jqXhr.responseText),
                p = $(this).jqGrid("getGridParam"),
                oldId = p.idPrefix + postdata._rowid,
                newId = p.idPrefix + json.Id,
                i;
            $("#" + $.jgrid.jqID(oldId)).attr("id", newId);
            if (p.selrow === oldId) {
                p.selrow = newId;
                i = $.inArray(oldId, p.selarrrow);
                if (i >= 0) {
                    p.selarrrow[i] = newId;
                }
            }
        }
    },
    url: 'http://example.com/Edit?_entity=Grnait',
    closeAfterEdit: true,
};

I tried it but problem persists. New json.Id is passed to attr() in afterComplete but on second edit old id is still passed to server. I updated question with changed testcase.

Thank you. It is working now. Can this added to jqgrid source code also ? This code runs only after form editing. Why if (formOper !== "add") is used ?

@Andrus: You are welcome! In case of formOper === "add" the new row will be added with the id returned from afterSubmit. So nothing should be done. No $("#" + $.jgrid.jqID(oldId)) will exist and so on. I don't see that the case is common and so the main code of jqGrid should be changed. I can imagine that the rowid could be change if there are editable column with key: true, but it's not your case. The main design goal of id is the following: it should be set during creating of data item and should never be changed. It allows to use optimistic concurrency control for example.

This code is always called with formOper value of "edit". Add form parameters are specified is separate parameter in navGrid. editParams are not used for adding. So this check is unnessecary. Or is it possible to use common parameters for both add and edit forms ?

javascript - How to set row id value after form editing in free jqgrid...

javascript jquery jqgrid free-jqgrid
Rectangle 27 0

I believe, if you are doing a loadonce:true, then you are returning all the data from the server, You could iterate through all the records on the client side once the data is loaded to find the correct rowID, and calculate which page its on, then set that row and/or page once found.

javascript - How to get a page number by row id in jqGrid - Stack Over...

javascript jqgrid pager
Rectangle 27 0

var _tr = $("#gridId").jqGrid("getInd", rowid, true);
$(_tr).addClass("ui-state-error");

javascript - Set class or identifier on jqGrid row based on a key/valu...

javascript jqgrid
Rectangle 27 0

The usage of the function afterInsertRow is not the best way especially if you use gridview:true jqGrid option which is almost always recommended. Look at the old answer which do mostly what you need. The schema of the code could be about following

$('#list').jqGrid({
    //...
    loadComplete: function() {
        var ids = $(this).jqGrid("getDataIDs"), l = ids.length, i, rowid, status;
        for (i = 0; i < l; i++) {
            rowid = ids[i];
            // get data from some column "readStatus"
            status = $(this).jqGrid("getCell", rowid, "readStatus");
            // or get data from some 
            //var rowData = $(this).jqGrid("getRowData', rowid);

            // now you can set css on the row with some
            if (status === "error") {
                $('#' + $.jgrid.jqID(rowid)).addClass('myErrorClass');
            }
        }
    }
});

It looks like "transversing the DOM after grid has completed", but it works quickly as the usage of afterInsertRow.

UPDATED: The answer is relatively old. More recent versions of jqGrid have callattr and rowattr callbacks which can be used to implement the same requirements more effectively. It's important to understand that setting of class on one cell of grid or of the row of grid (see .addClass('myErrorClass') in the code of the answer) follows browser reflow on all elements existing on the page. So one should reduce the number of changing of DOM elements on the page. To do so it's strict recommended to use gridview: true (see the answer for more details). The callbacks callattr, rowattr and custom formatters used together with gridview: true allows to create the full content of grid body at once. So the number of changes on the page will be reduced and the performance will be improved.

The column property callattr from colModel can be helpful to set class, style or some other attributes on selected cells of grid. The callback rowattr can help to set class, style or some other attributes on selected rows of grid (exactly like do the above example).

rowattr

You can read more about callattr for example in the following answers: this, this, this, this. If you use datatype: "xml" the implementation could be a little more complex: see the answer for details.

So the bottom line is that the data still need to be in the 'cell-level' rather than 'row-level'? Because I wanted to remove the column for read status altogether... but I can slot that info in some other column I guess... not ideal.

@Brandon: under removing of the column you mean make it hidden?

@Brandon: then you should clear the place where you want to get the information. Unter hidden I mean hidden:true in the colModel (see trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options).

javascript - Set class or identifier on jqGrid row based on a key/valu...

javascript jqgrid
Rectangle 27 0

Sorry, but it's unclear what you want. I have to guess what you mean. Is expandedRowId a variable which you defined in your code and which you change somewhere? In the case you can define objectID property of postData as function:

postData: {
    objectID: function () { return expandedRowId; }
}

javascript - get the expanded row id in postData jqgrid - Stack Overfl...

javascript jquery jqgrid
Rectangle 27 0

var ret = myGrid.jqGrid('getRowData', id);

Now you can access the colums of your grid: ret[0]

hmm, i ahve the id_mdt col set as the key, without this i do not recive the row id of the record in the db, which is needed for the edit/delete functions, it seems though that now i have set this the id before i was getting an id of (jqg_899) or something similar, now i dont recive the row id from the grid jsut the record id, i hope that makes sense if so i will update the question

remember that the jqgrid rowid must be unique otherwise it messes up cause it tries to create the same id for a TR. You can simply pass as many IDs or fiels as you want. If you do not want to show the column simply hide it -> hidden:true

thanks for the clarification, i hadnt realised that the grid row id would take the same as the primary key id of my recordset, thinking about it, it makes a lot of sense!!!

@Dizzy Bryan High: No problem.Each one of us has made this mistake at first ... but, as you said, it makes sense.

javascript - jqgrid row id and gridrow id - Stack Overflow

javascript jquery jqgrid
Rectangle 27 0

If you get the primary key after editing, you can use jqgrid setCell method to change it.

here is the method link

you can search it with "setCell" in this page.

$('#gridTable').setCell(rowId, 'KeyColumnName', 'Value');

jqgrid does this automatically: it refreshes all columns after editing including primary key columns. So this is not required. Probably I need to change row id: probably this is <tr> element id. For new row add usinfg form add we can return new row id in afterSubmit as descibed in Oleg answer to stackoverflow.com/questions/6954736/ . However if new row id is returned after form editing as shown in code in question, jqgrid does not change row id. I asked how to change row id in this case

javascript - how to refresh jqgrid row id after primary key is changed...

javascript jqgrid
Rectangle 27 0

The usage of the function afterInsertRow is not the best way especially if you use gridview:true jqGrid option which is almost always recommended. Look at the old answer which do mostly what you need. The schema of the code could be about following

$('#list').jqGrid({
    //...
    loadComplete: function() {
        var ids = $(this).jqGrid("getDataIDs"), l = ids.length, i, rowid, status;
        for (i = 0; i < l; i++) {
            rowid = ids[i];
            // get data from some column "readStatus"
            status = $(this).jqGrid("getCell", rowid, "readStatus");
            // or get data from some 
            //var rowData = $(this).jqGrid("getRowData', rowid);

            // now you can set css on the row with some
            if (status === "error") {
                $('#' + $.jgrid.jqID(rowid)).addClass('myErrorClass');
            }
        }
    }
});

It looks like "transversing the DOM after grid has completed", but it works quickly as the usage of afterInsertRow.

UPDATED: The answer is relatively old. More recent versions of jqGrid have callattr and rowattr callbacks which can be used to implement the same requirements more effectively. It's important to understand that setting of class on one cell of grid or of the row of grid (see .addClass('myErrorClass') in the code of the answer) follows browser reflow on all elements existing on the page. So one should reduce the number of changing of DOM elements on the page. To do so it's strict recommended to use gridview: true (see the answer for more details). The callbacks callattr, rowattr and custom formatters used together with gridview: true allows to create the full content of grid body at once. So the number of changes on the page will be reduced and the performance will be improved.

The column property callattr from colModel can be helpful to set class, style or some other attributes on selected cells of grid. The callback rowattr can help to set class, style or some other attributes on selected rows of grid (exactly like do the above example).

rowattr

You can read more about callattr for example in the following answers: this, this, this, this. If you use datatype: "xml" the implementation could be a little more complex: see the answer for details.

So the bottom line is that the data still need to be in the 'cell-level' rather than 'row-level'? Because I wanted to remove the column for read status altogether... but I can slot that info in some other column I guess... not ideal.

@Brandon: under removing of the column you mean make it hidden?

@Brandon: then you should clear the place where you want to get the information. Unter hidden I mean hidden:true in the colModel (see trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options).

javascript - Set class or identifier on jqGrid row based on a key/valu...

javascript jqgrid
Rectangle 27 0

It seems that you want to change the rowid of the row after editing. You send the editing data to the server using prmNames: { id: "_rowid", ...} option. So postdata._rowid should contains the rowid of editing row. The response from the server after editing seems looks something like

where Id property contains new rowid after editing the row. In the case you can use afterComplete callback

You should include such callback in the editParams which you use for the form editing:

I tried it but problem persists. New json.Id is passed to attr() in afterComplete but on second edit old id is still passed to server. I updated question with changed testcase.

Thank you. It is working now. Can this added to jqgrid source code also ? This code runs only after form editing. Why if (formOper !== "add") is used ?

@Andrus: You are welcome! In case of formOper === "add" the new row will be added with the id returned from afterSubmit. So nothing should be done. No $("#" + $.jgrid.jqID(oldId)) will exist and so on. I don't see that the case is common and so the main code of jqGrid should be changed. I can imagine that the rowid could be change if there are editable column with key: true, but it's not your case. The main design goal of id is the following: it should be set during creating of data item and should never be changed. It allows to use optimistic concurrency control for example.

This code is always called with formOper value of "edit". Add form parameters are specified is separate parameter in navGrid. editParams are not used for adding. So this check is unnessecary. Or is it possible to use common parameters for both add and edit forms ?

javascript - How to set row id value after form editing in free jqgrid...

javascript jquery jqgrid free-jqgrid
Rectangle 27 0

Well, you only have one page of data returned to the grid at a time. Part of that JSON packet should be the total number of pages that exist in the record set given your "per page" setting.

I'd suspect you'd have to craft a stored procedure that generates your record set, determines the pages of data, then filters down to the page that contains the requested record ID and return that page, rather than the first page in the set. This seems to be more trouble (and more overhead) than if you just return a single record based on your record ID.

javascript - How to get a page number by row id in jqGrid - Stack Over...

javascript jqgrid pager
Rectangle 27 0

To expand the nodes of the TreeGrid you can use expandRow. One should additionally make a loop and expand all parents of the row. One can use getNodeParent to get direct parent. Additionally one should use scrollrows: true option to scroll the grid to selected row.

The resulting demo allows to choose the row by rowid which need be selected. Clicking on "Select row by id" button do what you need:

Click event handle which I used in the demo you will see below

$("#selectId").button().click(function () {
    var idToSelect = $("#selectedId").val(), // id of the row which need be selected
        localRowData = $grid.jqGrid("getLocalRow", idToSelect);

    while (localRowData.parent !== null && localRowData.parent.toUpperCase() !== "NULL") {
        localRowData = $grid.jqGrid("getNodeParent", localRowData);
        $grid.jqGrid("expandRow", localRowData);
    }

    // we use scrollrows: true option so the selection below
    // will scroll the grid to the selected row additionally
    $grid.jqGrid("setSelection", idToSelect);
});

@Ali: You are welcome!

javascript - Jqgrid treegrid scroll to a row by row ID and expand the ...

javascript jquery jqgrid treegrid
Rectangle 27 0

You might be looking for the key attribute in colModel options:

key : In case if there is no id from server, this can be set as as id for the unique row id. Only one column can have this property. If there are more than one key the grid finds the first one and the second is ignored.

javascript - jqGrid addRowData - how to add custom name/id to each row...

javascript jquery html table jqgrid
Rectangle 27 0

It's not clear which format exactly you use to fill the grid and which rowid you use. Typical error exist if the data wrong filled and the values 1, 2, 3 will be used instead of rowids which you want to see on the server side. In any way the above code will use HTTP POST request to the URL "deleterow" specified in delOptions. The data have the format described in the documentation of delGridRow (see here). For example if the id of deleted row is "123" then the data posted to the URL "deleterow" will be

oper=del&id=123

You need just implement reading of the id parameter on the server side. If you want to rename the name of parameter from id to any other text like myId then you can use jqGrid option prmNames: { id: "myId" }. After that the posted data will look like

oper=del&myId=123

Hi Oleg, thanks for the comment. I am not seeing the id sent down in either the URL or as data in the stream. Is there anything extra I need in my HTML to enable the ID to be sent?

@fredbasset: Nothing additional to do. By the way I added 'actions' column which you defined in a grid and I could see in Fiddler that HTTP POST request done and the body of the request contains oper=del&id=123. I recommend you to trace HTTP traffic with Fiddler, Developer Tools of IE, Chrome or any other tools.

Update : I am now getting the oper and id through as form data. However the id is the numeric index of the table row, what I really want is the name of the first column of the row. Any ideas how I get the grid to send me that?

@fredbasset: I wrote you that the problem with usage of 1, 2, 3... values as rowid exist typically if you fill the grid in a wrong form. You asked in the question "how to pass the row ID to the URL". You can examine the grid and you would that <tr> elements of the grid have id attributes equal 1,2,3. It's the rowids. If the data from 'name' column really unique and there are no duplicates between you can insert key: true property in colModel for 'name' column. If you would still have problems you should attend your question with test JSON data returned from the server.

Thank you! The key:true was the attribute I needed. Good work.

javascript - How to pass ID when deleting row in jqGrid? - Stack Overf...

javascript jquery jqgrid grid
Rectangle 27 0

thanks for trying to replicate the issue. Do i have to set somewhere the no of rows I am sending to be used by the grid?

thanks again...the data was duplicated while sending from server page 2 onwards, that was the error. Now I am able to implement server side pagination, its really awesome with so few lines of code. Could I ask you for a simple solution for client side sorting and displaying the grid full screen(considering screen resizing), its very small now almost occupying 25% of the screen.

@PravatPanda: You are welcome! I personally prefer to use height: "auto" and allow to user choose favorite rowNum from the list of values rowList. I save the choice in localStorage together with other preferences (see here).

javascript - jqgrid duplicate rows in spite of having uique id - Stack...

javascript json jquery jqgrid
Rectangle 27 0

var _tr = $("#gridId").jqGrid("getInd", rowid, true);
$(_tr).addClass("ui-state-error");

javascript - Set class or identifier on jqGrid row based on a key/valu...

javascript jqgrid