2

If some row is selected in jqgrid treegrid all other rows are collapsed but still visible. how to hide them.

For example if tree structure is

Category1
  Subcategory11
  Subcategory12
  ...
Category2
  Subcategory21
  Subcategory22
  ...
Category3
  Subcategory31
  Subcategory32
  ...

Initially it is shown in collapsed form in jqgrid

Toggle view
Category1
Category2
Category3

User can open some node by click. In this case (for example clicking in Category2) other categories should be removed from screen so that only this category and its subcategories are visible:

Toggle view
Category2
  Subcategory21
  Subcategory22

Toggle view link should toggle single category and category list views: first time click should show collapsed category list again. After that clicking in Toggle show all categories again should show only last opened category like in screenshot above.

How to implement this ?

treegrid is defined as

       var treegrid = $("#tree-grid");
        treegrid.jqGrid({
            loadComplete: function (data) {
                $('.tree-leaf', $(this)).css('width', '0px');
            },
            url: '/Store/GridData',
            datatype: "json",
            mtype: "POST",
            height: "auto",
            loadui: "disable",
            treeGridModel: "adjacency",
            colModel: [
                    { name: "id", width: 1, hidden: true, key: true },
                    { name: "menu", classes: "treegrid-column", label: "Tootepuu" },
                    { name: "url", width: 1, hidden: true }
                ],

            gridview: true,
            autowidth: true,
            treeGrid: true,
            ExpandColumn: "menu",
            rowNum: 2000,
            ExpandColClick: true,
            onSelectRow: function (rowid) {
                var treedata = treegrid.jqGrid('getRowData', rowid);
                window.location = treedata.url;
            }
        }
                );
        treegrid.parents("div.ui-jqgrid-view").children("div.ui-jqgrid-hdiv").hide();

Currently it leaves while main category list also visible if some category is selected like

Category1
Category2
  Subcategory21
  Subcategory22
Category3

How to customze jqgrid for this ? Or can some other tree plugin or ASP.NET MVC2 control used for this ?

Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

0

You could catch expand event like it's described here

And use 

$("#"+someRow).css('display') == 'none'

To hide all rows which you want.

Community
  • 1
  • 1
dr0zd
  • 1,368
  • 4
  • 18
  • 28