JQGrid addRowData rowId always zero

0
votes

I am working with jqGrid 4.4.4V, I have two grids let say grid1 and grid2, when i add multiple Rows to grid2 from grid1 the row id's are updating like 0,1,...But when i am adding single row each the id is starting from '0'.So, if i do multiple times like this, all rowIds will be like '0' only. Is there any way to make rowIds as always unique.

Note: the data is not adding manually to the grid, is getting from a sql. Below are the code for two grids.

grid1:

 $("#grid1").jqGrid({
            url: "/.......some handler path",
            datatype: 'json',
            contentType: "application/json; charset-utf-8",
            mtype: 'Get',
            colNames: ['Val ID', 'Val Name', 'Description', 'Dept', 'Vam', 'Venue', 'Venue', 'Solution', 'Method', 'Type'],
            colModel: [
                    { name: 'valId', index: 'valId', hidden: true },
                    { name: 'valName', index: 'valName', formatter: Namefield, width: 400 },
                    { name: 'description', index: 'description', width: 300 },
                    { name: 'dep', index: 'dep', width: 300 },
                    { name: 'vam', index: 'vam', width: 300 },
                    { name: 'venueId', index: 'venueId', hidden: true },
                    { name: 'venue', index: 'venue', width: 250 },
                    { name: 'solution', index: 'solution', width: 400 },
                    { name: 'Method', index: 'Method', width: 300 },
                    { name: 'Type', index: 'Type', hidden: true },
            ],
            pager: $('#pager'),
            key:true,
            rowNum: 10,
            rowList: [10, 20, 30, 40],
            height: '100%',
            viewrecords: true,
            caption: '',
            sortname: 'Val Name',
            sortorder: "desc",
            emptyrecords: 'No records to display',
            autowidth: true,
            multiselect: true,
            multiselectWidth: 50,
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                Id: "0"
            }
   });

grid2: 

 $("#grid2").jqGrid({
                datatype: 'function',
                mtype: 'Post',
                colNames: ['Val ID', 'Val Name', 'Description', 'Dept', 'Vam', 'Venue ID', 'Venue', 'Solution', 'Method', 'Type'],
                colModel: [
                        { name: 'valId', index: 'valId', hidden: true },
                        { name: 'valName', index: 'valName', formatter: Namefield, width: 400 },
                        { name: 'description', index: 'description', width: 300 },
                        { name: 'dep', index: 'dep', width: 300 },
                        { name: 'vam', index: 'vam', width: 300 },
                        { name: 'venueId', index: 'venueId', hidden: true },
                        { name: 'venue', index: 'venue', width: 250 },
                        { name: 'solution', index: 'solution', width: 400 },
                        { name: 'Method', index: 'Method', width: 300 },
                        { name: 'Type', index: 'Type', hidden: true },
{ name: 'delete', index: 'delete', width: 50, formatter: Close, align: 'center' }
                ],
                pager: $('#pager'),
                key:true,
                rowNum: 10,
                rowList: [10, 20, 30, 40],
                height: '100%',
                viewrecords: true,
                caption: '',
                sortname: 'Val Name',
                sortorder: "desc",
                emptyrecords: 'No records to display',
                autowidth: true,
                multiselect: true,
                multiselectWidth: 50,
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    Id: "0"
                }
       });

Where I am using the add and del methods as below,

        var selRowIdsArray = [];
        var myGrid = $("#grid1");
        var SelectedGrid = $('#grid2');
        //get no of selected rows count
        var selRowIds = $("#grid1").jqGrid('getGridParam', 'selarrrow');
        if (selRowIds.length !== 0) {
            if (selRowIdsArray.length == 0) {
                selRowIdsArray.push.apply(selRowIdsArray, selRowIds);
            }
            for (i = 0; i < selRowIdsArray.length; i++) {
                selRowIdsInt = selRowIdsArray[i];
                var selRowId = myGrid.getRowData(selRowIdsInt);
                SelectedGrid.jqGrid('addRowData', i, selRowId);
                myGrid.jqGrid('delRowData', selRowIdsInt);
            }
        }

Thanks for your help.

1
javascriptjqueryjqgrid

1 Answers

0
votes

The solution of you problem could be very easy if you good understand what is rowid and what do idPrefix option of jqGrid. It's the value of id attribute of <tr> elements of the corresponding HTML <table>, which displays the data. The internal implementation of jqGrid is so, that jqGrid must assign id to every row of the grid, which corresponds the data. It's strictly recommended to include an unique id property in every item. It could be native id from the database or some composite key like id1 + "_" + id2, which hold full information about the native ids from the backend. I recommend you to examine the picture from the article.

You can place the id under any other name as id. If you use repeatitems: false option of jsonReader, and valId is the name of the unique id, then you should use

jsonReader: { id: "valId" }

to inform jqGrid about that. Including of any other properties of jsonReader with default values, like you did, is unneeded. Any other properties of jsonReader, like Id (instead of id), will be just ignored. After that you can remove unneeded hidden column valId from the grid, which saves the same information in <td> elements of the grid.

I recommend to add one more option, if you use editing of the grid

prmNames: { id: "valId" }

The option renames the id property, send on editing of the grid, to valId. Thus you can just continue to use valId instead of id.

Next you should understand that rowid can be not the same as id (valId). If you have more as one grid on the page then it will be strictly recommended to use idPrefix. It's supported even on the retro version 4.4.4 of jqGrid (4 years old version), which you use. For example, you can use idPrefix: "g1_" in the first grid and idPrefix: "g2_" in the second grid. It prevents id dupplicates on HTML page, because the rowid will be build from id (valId) with the corresponding id prefix, different for both grids.

After understanding the meaning of rowid, it should be clear how one can move selected rows from one grid to another. The statement

var selRowIds = $("#grid1").jqGrid('getGridParam', 'selarrrow');
var idPrefix1 = $("#grid1").jqGrid('getGridParam', 'idPrefix');

gives you the rowids (with the idPrefix of the first grid) of selected rows and the prefix idPrefix1, which you use. You can use $.jgrid.stripPref to strip the prefix, getRowData to get the row data and to use addRowData to add the same data to the second grid, using the same id

var i, id, item;
for (i = 0; i < selRowIds.length; i++) {
    id = $.jgrid.stripPref(idPrefix1, selRowIds[i]);
    item = myGrid.jqGrid("getRowData", id);
    SelectedGrid.jqGrid("addRowData", id, item);
}

addRowData will automatically use idPrefix of the second grid.

Finally, I'd recommend you to drop using of retro version 4.4.4 which is dead since many years. I'd suggest you to use the current version (4.13.6) of free jqGrid - it's the fork of jqGrid, which I develop starting with the end of 2014. If you installed 4.4.4 because of usage of wrong NuGet package jQuery.jqGrid, then you should uninstall the package and install another one: free-jqGrid.