How to remove flashing on persisting remotely populated jqgrid tree node

Question

jqGrid tree nodes are read from server using json data. Click in node reads child nodes from server. Code below is used to restore opened tree node if page is loaded. Only single node is opened always in tree. Controller assings node ids to autoClicked array and gridComplete opens nodes using this path. This causes grid flasinging on page load since multiple server requests buid grid multiple times. How to disable grid flashing ? Is it possible to prevent multiple jqGrid building and show only find jqGrid tree ?

Answer in Send expanded TreeGrid Nodes in cookie works for fully populated grid only.

var autoClicked=[<%= Model.Path() %>];
$(function () {
    var grid = $("#tree-grid");
    grid.jqGrid({
        gridComplete: function () {
            setTimeout(function () {
                var id = autoClicked.shift();
                var rData = grid.getGridParam('data');
                var data = null;
                for (var i = 0; i < rData.length; i++) {
                    if (id == rData[i].id) {
                        data = rData[i];
                        break;
                    }
                }

                if (data == null)
                    return;
                grid.expandRow(data);
                grid.expandNode(data);
            }, 0);

        },
        url: '<%= ResolveUrl("~/Store/GridData")%>',
        datatype: "json",
        mtype: "POST",
        height: "auto",
        loadui: "disable",
        treeGridModel: "adjacency",
        colModel: [
                { name: "id", width: 1, hidden: true, key: true },
                { name: "menu", classes: "handcursor" },
                { name: "url", width: 1, hidden: true }
            ],
        autowidth: true,
        treeGrid: true,
        ExpandColumn: "menu",
        rowNum: 200,
        ExpandColClick: true,
        onSelectRow: function (rowid) {
            var treedata = grid.jqGrid('getRowData', rowid);
            window.location = treedata.url;
        }
    }
            );
});

controller:

    public string Path()
    {
        Artomlii node = Artomliik;
        string res = node.Artomaliik.ToString();
        while (!Core.IsNullOrWhiteSpace(node.Treeparent))
        {
            // retrieve parent node
            node = MyDataContext.ExecQuery<Artomlii>(@"select * from artomlii where treeorder={0}", node.Treeparent).FirstOrDefault();
            if (node == null)
                break;
            res = node.Artomaliik.ToString() + "," + res;
        }
        return res;
    }

score 2 · Accepted Answer · edited May 23 '17 at 12:00

On your place I would solve the problem in another way.

I would send to the server in postData an additional parameter which contains the list of nodes which should be expanded.

In the case the server will place all requested nodes in the response. The value of "expanded" hidden column can be set to true either directly in the server response or on the client side in the beforeProcessing callback in the way which I described in the answer which you referenced.

In the way you would have exactly the same results which you need. The filling of the grid will be more quickly because of elimination of unneeded round-trips. The flashing will be removed because all the rows in the tree grid will be filled "at once" because of the usage of gridview: true which is default for Tree Grids in the current implementation of jqGrid.

How to remove flashing on persisting remotely populated jqgrid tree node

1 Answers1

Linked