0

Please see my below jqgrid subgrid image,

enter image description here

Question 1 : By default, my sub grid start with parent grid column "ID" (first column of parent grid), Can we start my sub grid from 3rd column of my parent grid (Contact Name)?

Question 2 : Or, Is there any chance to move sub grid icon (+) column after 2nd column of my parent grid, hence my sub grid will start with 3rd column of my parent grid?

Please suggest, Thanks!

user2994834
  • 387
  • 1
  • 4
  • 14

1 Answers1

1

The row with the standard subgrid like on the picture below

enter image description here

consist from three parts which I marked in different colors. The corresponding HTML structure looks like on the next picture

enter image description here

jqGrid creates an empty <div> (see <div class="tablediv" id="list_1"></div> marked in red) and calls subGridRowExpanded callback with the id of the div ("list_1" on the picture above) as the value of the first parameter. One places an empty <table> with some unique id attribute in the div with and creates grid from the <table>. The typical code looks like

subGridRowExpanded: function (subgridId, rowid) {
    var $table = $("<table id='" + subgridId + "_t'></table>");
    $("#" + subgridId).append($table);
    $table.jqGrid({
        // ...
    });
}

What you can to do is to set some CSS attributes on the <div> to place the table on the place where you need it. For example I have the column "sequence" in the parent grid of the demo used on the pictures. The header of the column of the header have gridId + "_sequence" id. So one can use the following code to set padding-left to skip the first column:

subGridRowExpanded: function (subgridId, rowid) {
    var $table = $("<table id='" + subgridId + "_t'></table>");
    $("#" + subgridId).append($table)
        // set padding-left to the outer width of the first column "sequence"
        // of the parent grid
        .css("padding-left", $("#" + this.id + "_sequence").outerWidth() + "px");
    $table.jqGrid({
        // ...
        autowidth: true
    });
}

The advantage of the usage padding-left: one can use autowidth: true in the subgrid to resize the subgrid to fill the right part of the row of subgrid.

The demo uses the code. The results looks like on the picture below

enter image description here

You can change other attributes of subgrid row inside of subGridRowExpanded to achieve your exact goals.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • this means, we can't shift the plus column, here plus column is the 2nd column because of we are showing row number as a first column right? – user2994834 Dec 15 '14 at 16:19
  • @user2994834: You should not change the position of "subgrid" column. Instead of that you can make expand/collapse the subgrid on click on any place in the row of the parent grid. [the demo](http://www.ok-soft-gmbh.com/jqGrid/ExpandSubgridOnSelection0.htm) which I created for [the answer](http://stackoverflow.com/q/19970683/315935) shows how to expand/collapse the subgrid on select the row (see `toggleSubGridRow` inside of `onSelectRow`). Look at [one more demo](http://www.ok-soft-gmbh.com/jqGrid/SubgridInTheSecondColumn2.htm) which I made for you and try to select the row. – Oleg Dec 15 '14 at 16:32
  • Thanks Oleg, I like [the demo](http://www.ok-soft-gmbh.com/jqGrid/SubgridInTheSecondColumn2.htm),but can we show plus icon near to "Name" column data (myfirstchapter, mysecondchapter) and when click the row can we change plus to minus icon? Thanks! – user2994834 Dec 15 '14 at 16:52