Preserving Group Collapsed/Expanded After read

[Kevin]

Hello everyone,

I'm new to Kendo UI and ASP.Net.
After my grid does a read, the groups tab/row keeps collapsing even when I collapsed them. I want to preserve my collapse every time the grid does a read.

So this is my model set up

@(Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            columns.Bound(column.ColumnName);
        }
    })
        .Filterable()
        .Sortable()
        .Groupable()
        .DataSource(datasource => datasource
            .Ajax()
            .Model(model =>
            {
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    model.Field(column.ColumnName, column.DataType);
                }
            })
            .Read(read => read.Action("Read", "Home"))
        )
)

This is how I'm calling the read

<script type="text/javascript">

    $(function () {

        $(document).ready(function () {

            var grid = $("#grid").data("kendoGrid");

            //grid.bind("dataBound", grid_dataBound);

            setInterval(function () {

                grid.dataSource.read();

            }, 4000);

        });

    });

</script>


Thank you for your time and help!

[Kevin]

BUMP

or anyone have ideas on how to get the rows, so I can store them in an array?

[Petur Subev]

Hello Kevin,

Basically to achieve the behavior, all you need to do is to use the API of the Grid and the dataSource and its events. In particular
grid events: dataBound, detailExpand, detailCollapse
grid methods: dataItem
dataSource methods: get, read (to simulate)

all available in our documentation:

http://docs.kendoui.com/api/web/grid

I prepared a small demo:

http://jsbin.com/uqOdehig/2/edit

I hope this helps.

Kind Regards,
Petur Subev
Telerik

[Kevin]

I figured it out with some digging around.

detailExpand, detailCollpage didn't work for me, so this what I did.

<script type="text/javascript">

    var expandedRows = new Array();
    var previousGroup = 0;

    function grid_dataBound(e) {
        var grpList = $(".k-grouping-row");
        console.log("previousGroup " , previousGroup, " grpList.length ", grpList.length);
        if (previousGroup != grpList.length) {
            previousGroup = grpList.length;
            expandedRows.length = 0;
        }
        if (grpList.length > 0) {
            for (var i = 0; i < grpList.length; i++) {
                var group = grpList[i];
                if (group && (jQuery.inArray(i, expandedRows)) == -1) {
                    this.collapseGroup(group);
                }
            }
        }
    }

    $(function () {
        $(document).ready(function () {
            var grid = $("#grid").data("kendoGrid");
            grid.bind("dataBound", grid_dataBound);
            setInterval(function () {
                grid.dataSource.read();
            }, 4000);
            $(grid.tbody).on("click", "td", function (e) {
                var row = $(this).closest("tr");
                var rowIdx = $(".k-grouping-row", grid.tbody).index(row);
                var arrayPost = jQuery.inArray(rowIdx, expandedRows);

                if (arrayPost == -1 && rowIdx != -1) {
                    console.log("Added", rowIdx);
                    expandedRows.push(rowIdx);
                }
            });
        });
    });
</script>

Now the problem is that it is previousGroup is not looking at the actual Grouping. What I am is assuming that the grouping length never changes unless a new grouping which means that its length is changed and therefore I should clean out my array of stored rows.

...If you're working with dyanmics data, where there will be new rows in the grouping, this solution doesn't work well, cause it will collapse since the length will change, but if it's a static column but let's say one of the value changes in another column changes...then this works fine... (not sure if I explain what I did clearly)

Thanks for the tip

[Kevin]

There was a bug in which it always kept the expanded rows expanded, so I modified this

if (arrayPost == -1 && rowIdx != -1) {
                    console.log("Added", rowIdx);
                    expandedRows.push(rowIdx);
                }
                else if (arrayPost != -1) {
                    expandedRows.splice(arrayPost, 1);
                grid.dataSource.read();
                }

[Kevin]

actually..

this.dataSource.group().length

determines how many group on it right now so I just keep track of the current group and previous group and update accordingly if it changes

[Petur Subev]

Hello Kevin,

Let me know, if there are any specific questions regarding the Grid/DataSource API.

Kind Regards,
Petur Subev
Telerik

[Andre Light]

Hello,

I've started a robust group state preservation grid extension that is designed to work with both Kendo Grid and ASP.Net RadGrid (control-specific implementations that utilize common functionality).

This extension makes significant improvements to Telerik's group state preservation example and enhances RadGrid, for which nothing else available even comes close to the Kendo UI example:

• Written in TypeScript to reduce implementation and coding errors.
• Maintains state even when sub-groups have identical names/values across multiple parent groups (tracks the full path to the group, not just the group name by itself).
• Automatically tracks both Expanded and Collapsed state (your grid can be either collapsed or expanded by default) and clears saved grouped data when appropriate to reduce memory usage.
• Saves state of all groups when state changes are detected, thereby covering scenarios where multiple groups might be expanded/collapsed after a single click event (e.g. expand/collapse parents and/or children simultaneously).
  Includes intelligent functionality to specify the default toggle state (on startup/first group applied), which allows expanding/collapsing all rows without overriding previous user states (or expand/collapse on first load).
• Includes ToggleAllGroups method.
• Asynchronous group state saving to ensure the UX is not negatively impacted.
• Core functionality that works with both Kendo UI Grid and ASP.Net Grid, thus reducing ongoing maintenance for those who use both control sets.
• Grid position is saved and associated with specific page numbers, scroll position is adjusted automatically and intuitively, and scrolling is animated.

Check it out here and let me know what you think.​

[Nathan]

hi kevin

 I'm trying to achieve the same functionality. 

Would you happen to have a complete code example?