jqgrid inlinenav - custom row id and delete

Question

Each row has an id in our db different to the jqgrid row id. How can I send this lineid when saving a row?

Also, is there a way to delete a row?

This is my code so far:

var mydata = [

              {
                        lineItemId: "785",
                productSku:"n123",
                productName:"hello there",
                pieces:"123",
                value:"23.00",
                line:"123"
              }
              ,
              {
                        lineItemId: "803",
                productSku:"n1234",
                productName:"hello there",
                pieces:"123",
                value:"23.00",
                line:"123"
              }               
            ];    

var colNames = ['SKU','Product Name', 'Pieces','Total Value','Line Number'];

var colModel = [
  {name:'productSku', index:'productSku', width:10, sorttype: 'text', editable:true},
  {name:'productName', index:'productName', width:60, editable:true},
  {name:'pieces', index:'pieces', width:10, sorttype: 'int', editable:true, formatter: 'integer'},
  {name:'value', index:'value', width:10, sorttype: 'int', editable:true, formatter: 'number'},
  {name:'line', index:'line', width:10, sorttype: 'int', editable:true, formatter: 'integer', formatoptions:{thousandsSeparator: ""}}
          ];

initOrdersJqGrid("orderContent", mydata, '<xsl:value-of select="$datapath/OrderId"/>', colNames, colModel, "sku", "desc");

var orderLineOptions = {
          keys: true,
          aftersavefunc: function (rowid, response, options) {
            // only update page if orderis is nil i.e. a new order
            if($('#orderidlabel').text() == "") {
              log('saving order line item from order with no id yet.');
              var dummy = $('<div />').html(response.responseText);
              var id = dummy.find('#orderId').val();
              $('#orderidlabel').text(id);
              $('#orderId').val(id);
              $('button[value="Save Order"]').trigger('click');
            }
          }
        }

    function initOrdersJqGrid(id, data, orderid, colNames, colModel, defaultSortColumn, defaultSortOrder) {
        $("#" + id + "Table")
        .jqGrid({
        datatype: "local",
        data: data,
        colNames: colNames,
        colModel: colModel,
        localReader: { id: "lineItemId"},
        pager: '#' + id + 'Pager',
        autowidth: true,
        gridview: true,
        autoencode: true,
        height: "auto",
        forceFit: true,
        shrinkToFit: true,  //Width of columns should be expressed in integers which add to 100
        sortname: defaultSortColumn,
        sortorder: defaultSortOrder,
        url: "fs/servlet/CS",
        editurl: "CS?action=com.agistix.webinterface.controllers.OrderIC,saveLineItems&orderId=" + orderid
      })
      .jqGrid('navGrid',"#" + id + "Pager",{edit:false,add:false,del:false,search: false, refresh: false})
      .jqGrid('inlineNav',"#" + id + "Pager", { addParams: { addRowParams: orderLineOptions }, editParams: orderLineOptions});

    }

The resaon of the problem with rowid is typically wrong filling of the data in the grid. Could you include `colModel` which you use with the description of the column which is native database id? Could you include the example (one line is enough) of `data` which you use? It's strange that you use `datatype: "local"` with the data returned from the database. — Oleg, Jun 04 '13 at 16:19
Hi @Oleg, i have updated the question with more code. The id I want to use for each row is coming back in the xml: — Mark Steggles, Jun 04 '13 at 21:47
Sorry, but you posted absolutely wrong data for `mydata`. Even syntax of JavaScript fragment is wrong. If you generate the data using XSL you should post the *resulting* data. Moreover `colModel` don't contain `key: true` for any column. So you should include in the data `id` property with the value of id from the database (with the value from `LineItemId` for example). — Oleg, Jun 05 '13 at 05:33
I update the code snippet to show the resulting mydata data. The syntax is correct I believe and it works. — Mark Steggles, Jun 05 '13 at 10:52
@Oleg - If you could give an example of how to use id from database for each row I would be grateful. Documentation for jqgrid seems hard to follow. — Mark Steggles, Jun 05 '13 at 10:53

score 2 · Accepted Answer · answered Jun 05 '13 at 13:08

If you use datatype: "local" then the items from the array of input data specified by data parameters should have additional property id which specify the value of id attribute of every row (<tr>) of the grid. If you prefer to have another name of the rowsid property you can use localReader to specify it. For example localReader: { id: "Id" } option inform jqGrid to get value of id attribute of rows (rowids) from the Id property. In the case the items of your data should bi like below

{
    Id: 76453
    productSku:"n123",
    productName:"hello there",
    pieces:"123",
    value:"23.00",
    line:"123"
}

The value of id property need be unique.

If you have already some column in the grid which contains id from some database table you don't need to add the same value with id property. Instead of that you can just key: true in the column. jqGrid allows to place key: true in only one item of colModel.

One more common problem with ids of rows it's important to understand. If you need to place more as one grid on a page or if you need to use Subgrid as Grid then you can still have one problem. The ids in database are unique in a table, but one can have the same ids in multiple tables. On the other side the ids of HTML elements (inclusive <tr> elements used for rows) must be unique over the whole page.

To solve the problem one can use idPrefix option of jqGrid. For example you have INT IDENTITY column in the database for the primary key of the table in the database. In the case you will have integers as native ids for rowids. The values can be for example 3, 5, 40 in the first grid. By usage idPrefix: "g1_" the ids assigned to the rows (to <tr> elements) will be "g1_3", "g1_5", "g1_40". So usage of idPrefix: "g1_" for the first grid and another value like idPrefix: "g2_" can solve the problem with potential id duplicates. It's important that jqGrid automatically strip the prefix idPrefix from rowid if it sends some data to the server (if you use editing in the grid for example). One can distinguish "id" and "rowid" names. The "rowids" will be always with prefix. You can use $.jgrid.stripPref function to cut the prefix.

Thanks Oleg. It worked to add id to data object. Now I need to send through id as "lineItemId". I tried adding localReader (see updated code above) but its still posting as "id" — Mark Steggles, Jun 06 '13 at 14:00
@MarkSteggles: You are welcome! If I understand correctly what you need you should use `prmNames: {id: "lineItemId"}` option of jqGrid. — Oleg, Jun 06 '13 at 14:07

jqgrid inlinenav - custom row id and delete

1 Answers1