[OPEN] [#1325] [3.3.0] [4.0.0] Illogical work collapse\expand in grouping gridpanel

[SuperBolt]

If you open stage and collapse\expand the other calendarplan. Opened Stage will be collapsed and icon minus, and it is not correct(auto collapsed and minus).


Source code

I hope the source is sufficient

[fabricio.murta]

Hello @SuperBolt! Thanks for opening the thread! It makes it better both for current handling, as we don't get lost with different issues, and also helps for future reference on a specific problem!

I believe that since a complete rewrite of the grouping functionality from our underlying framework (ExtJS), lots of problems arose (based on this post). And that must be just another of them.

I'll investigate it now and hope to be able to get back with good news soon!

[fabricio.murta]

Hello!

The RowExpander plugin has a bug when the grid's view is refreshed: the row's "expanded body" is cleared and not re-loaded as it should be.

Here's a more simplistic approach to address the issue (simply collapses and re-expands the collapsed row):

    <script type="text/javascript">
        var handleToggle = function (item, node, group) {
            var row,
                rowExpander = item.grid.getRowExpander();

            if (rowExpander.originallyExpanded && rowExpander.originallyExpanded.length > 0) {
                row = rowExpander.originallyExpanded[0];
                if (item.getNode(row)) { // check if row is visible
                    rowExpander.expandRow(row);
                }

                if (!rowExpander.singleExpand) {
                    for (var i = 1; i < rowExpander.originallyExpanded.length; i++) {
                        row = rowExpander.originallyExpanded[i];
                        if (item.getNode(row)) { // visible only
                            rowExpander.expandRow(rowNode);
                        }
                    }
                }
            }
            return false;
        };

        var handleRefresh = function (view) {
            var rowExpander = view.grid.getRowExpander();

            rowExpander.originallyExpanded = rowExpander.getExpanded();
            rowExpander.collapseAll();
        }
    </script>

And this is what changes in your grid's razor syntax:

.View(
    Html.X().GridView().Listeners(l =>
    {
        l.GroupCollapse.Fn = "handleToggle";
        l.GroupExpand.Fn = "handleToggle";
        l.Refresh.Fn = "handleRefresh";
    })
)

This is not a really nice fix, but until we develop a proper fix it can help you have your page up to speed.

[fabricio.murta]

And hello again!

I've logged issue #1325 to track this problem. Unfortunately, when a view (the grid panel's "screen") is refreshed, all rows are redrawn, and the Row Expander plug in does not support refilling the expanded row's body in this situation.

As a matter of fact, the grouping plugin refreshes the view every time you expand or collapse a group, consequently triggering row expander's deficient behavior.

In other words, given the design of the whole, in one way or another, a re-expand of the expanded row is going to happen anyway. And there's a conflict:
- The grouping plugin requires to refresh the view so the hidden records are no longer included in the grid's view.
- The row expander plugin requires you not to refresh the grid view while one or more entries are expanded.

Maybe the best option to handle this is to call App.GridPanel1.getRowExpander().collapseAll() whenever the 'refresh' event to the view is triggered.