[Solved] Saving expanded detail rows

[Andrew]

What I want to do is add/remove row uuid's to an array when they are expanded/collapsed.  Then on refreshing my datasource i can re-expand the previously expanded rows.

I'm very close to accomplishing this but having one MAJOR problem.

I'm using the first solution detailed here as a base.
http://stackoverflow.com/questions/25029806/retain-expanded-rows-after-databinding-kendo-ui-grid

This works, EXCEPT the row uuid's are changing upon setting and reading the datasource.  I'm unable to figure out whats causing them to change.
Any ideas/input are appreciated. I'm sooo close!

Thanks

[Dimiter Madjarov]

Hello Andrew,


I would suggest to store the ids of the elements, instead of the uids. For convenience I prepared a small example that demonstrates the approach.

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik

 

 

[Andrew]

Hey Dimiter,

Thanks for the suggestion.  Your solution works great!

However, I now have a related question.

On databound I had been expanding and then collapsing all rows in order to create the tab that contains notifications in the details row.  Without doing this there is no tab to appendTo when I go to attach notifications.  

this.expandRow(this.tbody.find("tr.k-master-row")); //expand all rows
this.collapseRow(this.tbody.find("tr.k-master-row")); //then collapse all, needed to init notification containers

So they'll error if they try to appendTo and the detail row hasn't been expanded yet.  Any ideas on a possible work around for this?

[Dimiter Madjarov]

Hello Andrew,


If you are referring to the fact, that the detail rows are not existing when the Grid is initialized, this is by design. Indeed the detail row is appended to the DOM, the first time it's parent is expanded.

Regards,
Dimiter Madjarov
Telerik

 

 

[Andrew]

Yes thats fine.  But the problem is I need them to exist so that I can append notifications inside them.  To do this I was expanding and then collapsing all rows on databind.

Doing this erases what was stored as previously expanded.  So I'm wondering if there are any work arounds you can think of.  Perhaps somehow disabling the detailExpand/Collapse events temporarily?  I'm kind of stuck.

[Dimiter Madjarov]

Hello Andrew,


A sample approach would to remove the detailExpand and detailCollapse events from the Grid configuration. Then you could use the bind and unbind methods to attach/de-attach the handlers when needed.
E.g.

var grid = $("#grid").data("kendoGrid");
grid.bind("detailExpand", function(e) {
   id = this.dataItem(e.masterRow).EmployeeID;
   expanded[id] = true;
})

Regards,
Dimiter Madjarov
Telerik

 

 

[Andrew]

YES!  Works perfectly!  Thank you Dimiter.  This is exactly what I needed.

For reference for others who may find this helpful, this is now my createGrid function + corresponding functions for the event handling.


function createOverviewGrid() {
    $("#grid").kendoGrid({
        dataSource: dataArray,
        autoBind: false,
        height: 900,
        width: 1900,
        reorderable: true,
        sortable: true,
        scrollable: true,
        pageable: false,
        selectable: "multiple, row",
        detailTemplate: kendo.template($("#grid-detail-template").html()),
        detailInit: detailInit,
        detailExpand: detailExpand,
        detailCollapse: detailCollapse,
        dataBound: function (e) {
            var grid = this;
            grid.unbind("detailExpand", detailExpand);
            grid.unbind("detailCollapse", detailCollapse);

            this.expandRow(this.tbody.find("tr.k-master-row")); //expand all rows
            this.collapseRow(this.tbody.find("tr.k-master-row")); //then collapse all, needed to init notification containers

            grid.bind("detailExpand", detailExpand);
            grid.bind("detailCollapse", detailCollapse);

            grid.tbody.find("tr[role='row']").each(function () {
                var id = grid.dataItem(this).reqID;

                if (expanded.hasOwnProperty(id) && expanded[id]) {
                    grid.expandRow(this);
                }
            });            
        },
        columns: columnsArray
    });
}

function detailExpand(e) {
    id = this.dataItem(e.masterRow).reqID;
    expanded[id] = true;
}

function detailCollapse(e) {
    id = this.dataItem(e.masterRow).reqID;
    expanded[id] = false;
}

[Dimiter Madjarov]

Hello Andrew,


I am glad the issue is resolved.
Thank you for posting it for future reference.

Regards,
Dimiter Madjarov
Telerik