This is a migrated thread and some comments may be shown as answers.

Remember expanded details row on read/refresh.

5 Answers 487 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pramod Pallath
Top achievements
Rank 1
Pramod Pallath asked on 22 Apr 2012, 06:39 AM
I have a scenario with grid within grid implemented using the detailInit method. Here when user makes edit, i  do some calculations that will change the data in the both parent and child. and then to refresh data, i will call the datasource.read to render data. this works and the data is displayed, however any detail grid which are expanded will be collapsed, is there any way i can prevent this from happening.

Regards,
Pramod
SyneITY

5 Answers, 1 is accepted

Sort by
0
Ravikant
Top achievements
Rank 1
answered on 24 Apr 2012, 01:05 PM
I am adding multiple kendo-grid in the matrix form as per requirement but on refreshing the page every time rows positions are changing .
Can any one please tell me how to make their position static on the same row id..

thanks.....
0
Steven
Top achievements
Rank 1
answered on 24 May 2012, 04:21 AM
I have the same question...has anyone been able to figure this out.   Telerik?   Do you have any suggestions?
0
Atanas Korchev
Telerik team
answered on 25 May 2012, 10:35 AM
Hi,

 This is not supported out of the box. The grid will rebind when you call the dataSource.read() method which in turn will hide all detail rows.

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chris
Top achievements
Rank 1
answered on 26 Nov 2013, 03:18 PM
Hi,

I have the same problem. I have a grid that is refreshed periodically by calling read()  on the dataSource. The pattern works great with the exception of collapsing the expanded rows.

Can you can provide us with a simple pattern in JSFiddle that keeps the rows expanded? My thought is to use a cookie to remember the uid's but I'm hoping there is an easier way.

Thanks,
Chris
0
Atanas Korchev
Telerik team
answered on 26 Nov 2013, 04:11 PM
Hello,

I created a simple demo which shows a possible implementation using sessionStorage (cookies can be used as an alternative): http://jsbin.com/EqIdUzU/1/edit

The expanded rows are stored/removed in the detailExpand and detailCollapse events:

detailExpand: function(e) {
    var state = sessionStorage.getItem("grid");
     
    if (!state) {
      state = {};
    } else {
      state = JSON.parse(state);
    }
     
    state[this.dataItem(e.masterRow).id] = true;
     
    sessionStorage.setItem("grid", JSON.stringify(state));
  },
  detailCollapse: function(e) {
    var state = sessionStorage.getItem("grid");
     
    if (state) {
      state = JSON.parse(state);
       
      delete state[this.dataItem(e.masterRow).id];
       
      sessionStorage.setItem("grid", JSON.stringify(state));
    }
  }

Then the grid state is restored via the expandRow method:

var state = sessionStorage.getItem("grid");
 
if (state) {
  state = JSON.parse(state);
   
  for (var id in state) {
    var dataItem = grid.dataSource.get(id);
    grid.expandRow("tr[data-uid=" + dataItem.uid + "]");
  }
}


Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Pramod Pallath
Top achievements
Rank 1
Answers by
Ravikant
Top achievements
Rank 1
Steven
Top achievements
Rank 1
Atanas Korchev
Telerik team
Chris
Top achievements
Rank 1
Share this question
or