Home/ Questions/Q 3430286
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T07:11:11+00:00

I cannot add a row to the top of a jqGrid table using the

  • 0

I cannot add a row to the top of a jqGrid table using the line:

jQuery("#myTable").jqGrid('addRowData', 0, myData, "first");

It just adds to the bottom of the list as usual

Has anyone tried this and works for them?

In my table, previously added rows have index that goes from 0 to N

I am using jqGrid v3.8.1 and jQuery 1.4.3

<html>

<head>
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.5.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

    <script src="js/jquery-1.4.3.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
</head>

<script type="text/javascript">
    $(document).ready(function () {


        jQuery("#myTable").jqGrid({
            datatype: "local",
            colNames: ['Data ID', 'Device'],
            colModel: [{
                    name: 'DATA_ID',
                    index: 'DATA_ID',
                    sorttype: "int",
                    width: 22,
                    align: "center",
                    sortable: false
                },
                {
                    name: 'DATA_DN',
                    index: 'DATA_DN',
                    width: 60,
                    align: "center",
                    sortable: false
                },
            ],
            width: "1216",

        });

        var myData = [{
            "DATA_ID": "9",
            "DATA_DN": "sony"
        }, {
            "DATA_ID": "10",
            "DATA_DN": "panasonic"
        }];
        var newData = [{
            "DATA_ID": "0",
            "DATA_DN": "national"
        }, {
            "DATA_ID": "1",
            "DATA_DN": "samsung"
        }];

        for (var i = 0; i < myData.length; i++) {
            jQuery("#myTable").jqGrid('addRowData', i, myData[i]);
        }

        jQuery("#myTable").addRowData(0, newData, "first");

        //jQuery("#myTable").trigger("reloadGrid");

    });
</script>
</head>

<body>
    <table id="myTable"></table>
    <div id="myTable_pager"></div>
</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s a pity that you don’t post the full JavaScript code which you use. So I can only guess what happens.

    For example, if you define myData as an array ([...]) instead of an object ({...}) the position parameter will be overwritten with the value “last”.

    jqGrid is an open source project and you can examine what exactly do the addRowData function here. You can exactly see in which situation the position parameter “last” will be used.

    If you append your question with the code which can be used to reproduce the problem which you describes other could verify the code and either find a bug in the jqGrid or find a bug in your code. In both situation you have good chance to will be a winner.

    UPDATED The code which you posted have some small problems.

    First you should remove comma before ‘]’ in the colModel definition.
    Second the newData is an array so the last parameter will be replaced from “first” to “last”.
    Some other small but important problems are: you have to use <!DOCTYPE html ...> at the beginning of your HTML code, place the JavaScript code inside of //<![CDATA[ … //]]> and insert <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> in the HTML header.

    The fixed code will be following

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demonstration how programatically select grid row which are not on the first page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.1/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function () {
            var grid = jQuery("#myTable");
            grid.jqGrid({
                datatype: "local",
                colNames:['Data ID','Device'],
                colModel:[
                    {name:'DATA_ID',index:'DATA_ID', sorttype:"int", width:22, align:"center", sortable:false},
                    {name:'DATA_DN',index:'DATA_DN', width:60, align:"center", sortable:false},
                ],
                width: "1216"
              });

            var myData = [{"DATA_ID":"9", "DATA_DN": "sony"}, {"DATA_ID":"10", "DATA_DN": "panasonic"}];
            var newData = [{"DATA_ID":"0", "DATA_DN": "national"}, {"DATA_ID":"1", "DATA_DN": "samsung"}];

            for(var i=0;i<myData.length;i++) {
                grid.jqGrid('addRowData', i, myData[i]);
            }

            for (i=0;i<newData.length;i++) {
                grid.jqGrid('addRowData', myData.length+i, newData[newData.length-i-1], "first");
            }
            //grid.trigger("reloadGrid");
        });
    //]]>
    </script>
</head>
<body>
    <table id="myTable"><tr><td/></tr></table>
</body>
</html>

    see also it live here. How you can verify with W3 Validator the last version of HTML code is correct.

    Nevertheless the usage of an additional hidden column which will be used for the sorting is the recommended way.

    • 0