CODEWITHSUNDEEP
jqueryjqgridfree-jqgrid
Andrus
Andrus

Reputation: 27955

How to set row id from server after adding new row in free jqgrid

Free jqgrid does not set row id if new row is added using form editing, saved to served and server returns autogenerated row id. Subsequent editing of added row causes error.

I tried free jqgrid from github using code below but problem presists.

To reproduce, open page below in browser, click plus button to add row and pess submit and then cancel Id column is empty. Code containts:

           afterSubmit: function (response, postdata) {
               return [true, '', '100'];

which simulates server response returning remote id 100. So Id column should contain vlaue 100 after adding.

I posted it also in github as free jqgrid issue but havent got any responses. How to fix it so that rows can added using form editing ?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
    <script type="text/javascript">
        $(function () {
            "use strict";
            var mydata = [
                ],
                $grid = $("#list");

            $grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames: ["Client", "Id"],
                colModel: [
                    { name: "name", align: "center", editable: true },
                    { name: "id" }
                ],
                iconSet: "fontAwesome",
                pager: "#pager",
                gridview: true,
                autoencode: true,
                ignoreCase: true,
                onSelectRow: function (rowid) {
                    var $self = $(this),
                        savedRow = $self.jqGrid("getGridParam", "savedRow");
                    if (savedRow.length > 0) {
                        $self.jqGrid("restoreRow", savedRow[0].id);
                    }
                    $self.jqGrid("editRow", rowid, {
                        keys: true
                    });
                }
            })

.jqGrid('navGrid', {}, {},
{
}
})
;

        });
    //]]>
    </script>
</head>
<body>
    <table id="list"><tr><td></td></tr></table>
    <div id="pager"></div>
</body>
</html>

Upvotes: 2

Views: 1208

Answers (1)

Oleg
Oleg

Reputation: 222017

Thank you! It's a bug in jqGrid 4.7, see the line:

idname = url === 'clientArray' ? $t.p.keyName : opers.id;

Free jqGrid are based on the jqGrid 4.7 so it have the same problem too. I posted just now the fix, which changes the above line to the following

idname = url === "clientArray" && p.keyName !== false ? p.keyName : opers.id;

Now the problem should be solved.

Upvotes: 1

Related Questions