How to iterate grid rows and expand certain ones

[Richard]

I have a three level grid from which users may navigate to views and return to the grid.  I want to put them back in the context they left.  I'm really having trouble figuring out how to do this.  I've been able to save the data-uid of an expanded row at the top level, but I can't seem to find it when the page loads after the user returns.  Maybe I'm not subscribing to the correct event?

I've subscribed to 

.Events(events => events.DataBound("onDataBound").DetailInit("onDetailInit").DetailExpand("onExpand").DetailCollapse("onCollapse"))

In onExpand I have

function onExpand(e) {
    //alert('onExpand was called. BatchID = ' + e.masterRow.closest("tr.k-master-row").attr('data-uid'));
    // save the data-uid value in the session
    var selectedBatchID = e.masterRow.closest("tr.k-master-row").attr('data-uid')
    $.post('@Url.Action("SetSessionVariable", "Home")',
        {
            key: 'lastSelectedBatchID',
            value: selectedBatchID
        });
}

 
I think I want to get the row in onDataBound or possibly onDataBinding but can't get a handle on the desired row.  I've looked a lots of examples that are ll different and none of them work for me.

Once I get the top level row expanded, then I'll need to do the same for the second and third levels.  Can you give an example of how this is done?  All the demos I've see so far are super simple and really don't seem to apply or don't give context as to which event is being subscribed to.

Thanks!

Rich

[Alexander Popov]

Hi Rich,

The uid's are randomly generated each time the Grid is bound, and that is why you cannot find the rows by their data-uid attribute. You could however, do the reverse. Save the model ID of the expanded row, then find the dataItem using the dataSource's get method and use its uid to find the row.

Regards,
Alexander Popov
Telerik

 

 

[Richard]

As a service to anyone trying to figure this out I'm posting my solution.  This is not intuitive, nor well-documented.  The sample code I've run across on many sites does not work, the objects simply are not available or something about them has been changed.  IMHO, this is way harder to do than it needs to be!

In my solution, there is a three level grid.  In the first and second levels I subscribe to the Expand and Databound events.  There are two javascript functions for each grid.  In onExpand the model id is saved to the session as this code goes away from the grid page to a view.  Upon returning, onDatabound fires and the grid rows are examined until the last expanded row is found, and then expanded thus giving the user a return to the context in which they were last looking at the grid.

function onBatchGridExpand(e) {
     // save the BatchID value of the row that was just expanded in the browser session
     // first get the data-uid of the row
     var selectedRowID = e.masterRow.closest("tr.k-master-row").attr('data-uid');

     // using the uid, retrieve the BatchID value and stor it in the session
     $.post('@Url.Action("SetSessionVariable", "Home")',
         {
             key: 'lastSelectedBatchID',
             value: e.sender.dataSource.getByUid(selectedRowID).BatchID
         });
 }

 function onBatchGridDataBound(e) {
     var lastSelectedBatchID = '@Session["lastSelectedBatchID"]';

     var grid = $('#BatchGrid').data("kendoGrid");
     var data = grid.dataSource.data();
     var totalNumber = data.length;

     for (var i = 0; i < totalNumber; i++) {
         var currentDataItem = data[i];
         if (currentDataItem.BatchID == lastSelectedBatchID) {
             var rowUID = currentDataItem.uid;
             var row = grid.tbody.find("tr[data-uid='" +  rowUID +  "']");
             grid.expandRow(row);
             break;
         }
     }
 }

 function onTranGridExpand(e) {
     // save the Transaction ID value of the row that was just expanded in the browser session
     // first get the data-uid of the row
     var selectedRowID = e.masterRow.closest("tr.k-master-row").attr('data-uid');

     // using the uid, retrieve the BatchID value and stor it in the session
     $.post('@Url.Action("SetSessionVariable", "Home")',
         {
             key: 'lastSelectedTranID',
             value: e.sender.dataSource.getByUid(selectedRowID).ID
         });
 }

 function onTranGridDataBound(e) {
     var lastSelectedTranID = '@Session["lastSelectedTranID"]';

     var grid = e.sender;
     var data = grid.dataSource.data();
     var totalNumber = data.length;

     for (var i = 0; i < totalNumber; i++) {
         var currentDataItem = data[i];
         if (currentDataItem.ID == lastSelectedTranID) {
             var rowUID = currentDataItem.uid;
             var row = grid.tbody.find("tr[data-uid='" + rowUID + "']");
             grid.expandRow(row);
             break;
         }
     }
 }