jqGrid how to collapse row when clicking on other row

Question

In a main grid, when I click on one row, it become \'highlighted\' and the seven subgrids are showed. Here is an example where first row is selected, and near to be edited (work

Answer 1

It's difficult to analyse so long code. So I post just some comments about the potential problems which I can see in the code after I looked through it.

The main problem which I see: you should use idPrefix option in all subgrids (or in the main grid and subgrid). The value of idPrefix option option should depend on rowid where the subgrid will be opened. For example you can use

idPrefix: "s_" + row_id + "_a_"

for the first subgrid, idPrefix: "s_" + row_id + "_b_" for the second subgrid and so on.

I recommend you don't use . (dot) or any other meta-characters in the column name. It's origin of potential errors in your code and in the code of jqGrid. You should understand that the name property will be used to build id attributes of some internal elements of jqGrid. There are some restrictions in CSS which characters are permitted in id attribute. Additionally jqGrid have to build selectors to get the corresponding elements from the page. For example $("#" + rowid) will be wrong selector if rowid includes . because the selector ("#a.b") will be interpreted as: element with id=a and the class b instead of id="a.b". Old versions of jqGrid don't worked at all with such ids and such names. Recent version of jqGrid should works, but nevertheless usage of meta-characters in ids increase the complexity of the code in many time. Do you really need it?

Because of almost the same problem I don't recommend you to use the same name property for different tables. It could be important if you plan to use searching filter for multiple grids or subgrids (to use filterToolbar for multiple grids). Currently you use 'c.code' for example in multiple subgrids which is potential origin of the future problems.

If you really need to use . for searching and you use datatype: "json" without loadonce: true then you can use index which has . and name which has no .. For example you can use name: 'b_id', index: 'b.id'. If you use index value which is the same as the value of name property, it's recommended to remove index property from the column definition.

Additionally I would don't recommend to use scroll:true option of jqGrid. In general virtual scrolling is nice feature, but in my opinion the implementation of virtual scrolling have many bugs abd side effects. So I recommend don't use it. If you really hardly need the feature then you should use it in the form scroll:1 and you have to invest more time in the debugging.

The last remark: I don't recommend usage of gridComplete. I recommend to use loadComplete instead. See the answer for more details.

The last remark: i recommend to use gridview: true in all grids and subgrids which you use.

UPDATED: I am not sure that I full understand which behavior you want to implement in onSelectRow, but the following implementation

onSelectRow: function (rowid) {
    var $self = $(this),
        $this = $("#" + $.jgrid.jqID(rowid)), // the row
        $expanded = $self.find("td.sgexpanded");

     if ($expanded.length > 0) {
         $expanded.trigger("click");
     }
     $self.jqGrid("expandSubGridRow", rowid);
     $self.jqGrid("setSelection", rowid, false);
     $this.closest(".ui-jqgrid-bdiv").scrollTop($this.position().top);
}