Getting list of all expanded rows so that I can open them later

Mike Burgess posted over 8 years ago

I need to be able to get a list of rows (client side) that have been expanded, so that when a user reloads the page, I can then expand them.

I've seen code to get the expanded rows, but trying to expand them again, doesn't seem to work. I'm missing something obvious I'm sure.

This is the code that I found (on the forum) to get all the expanded rows:

arrExpandedRows = $("#gridRRA").igHierarchicalGrid("allChildren");

This is what I was using to expand the rows (found in the forum):

for (i = 0; i < arrExpandedRows.length; i++){
var rowDom = $("#" + arrExpandedRows[i].id);
$("#gridRRA").igHierarchicalGrid("expand",rowDom);
}

Parents

17590

Offline Vasya Kacheshmarova posted over 8 years ago
Hello Mike,

Every row that is currently expanded has an area-expanded attribute that is set to true. In order to get all expanded rows at a certain point of time you can use a jQuery selector for all the rows that has this attribute value set to true. For example:

var expandedRows = $("#hierarchicalGrid tr[aria-expanded=true]");

expandRows will be a collection with all currently expanded row DOM elements.

Afterwards, when you want to expand them again you can use expand method of the igHierarachicalGrid. It takes row DOM element as an argument and it could be retrieved from expandRows collection. For example:

$("#btnExpandRows").click(function(){
    if(expandedRows){
    $.each(expandedRows, function(){
         $("#hierarchicalGrid").igHierarchicalGrid("expand", this);
    });
    }
    })

I am attaching a small sample illustrating my suggestion for your reference. First expand a row/rows and click "Get Expanded Rows button". Then collapse them and click the "Expand Previously Expanded Rows Button". All previously collapsed rows will be expanded again.

Please let me know if you need any further assistance with this matter.
igHierarachicalgridExpandPreviouslyExpandedRows.zip
Cancel
Reply

Cancel
90

Offline Mike Burgess posted over 8 years ago in reply to Vasya Kacheshmarova
This works great, as long as you haven't shut down the browser or rebound the grid even in the current session.

What I'm trying to achieve is to allow them to come back to the web page later and have the rows they were looking at expanded again.

For example, add another button - to your example to have it rebind the data.
<input type="button" id="btnRebindData" value="Rebind"></input>

Add the button click

$("#btnRebindData").click(function(){

expandedRows = $("#hierarchicalGrid").igHierarchicalGrid("dataBind");
})

Expand some rows, click your "Get Expanded Rows"

close the rows, click the "Expand Previously Expanded Rows"

works great. Close some, click Expand again, still works.

Click the new button the rebinds the data

click the Expand - nothing happens.

Put a "console.info(this);" in the expand routine, and it shows that the values still appear to be identical.
Cancel
Reply

Cancel

Reply

90

Verified Answer
Offline Mike Burgess posted over 8 years ago in reply to Mike Burgess
Here's what I figured out - not sure why it works but it does.

I modified the expand code a little:

In the loop:

I get the "data-row-idx" of the row

I get the dom element using jquery

i expand it.

This works even after a rebind. I haven't tested it yet on coming back to the webpage or restarting the browser, but I'm hopeful.

Modified Code:

$.each(expandedRows, function(){
//$("#hierarchicalGrid").igHierarchicalGrid("expand", this);
// get the data-row-index of the tr object
var id = $(this).attr('data-row-idx');
// get the element based on the id
var newEl = $("tr[data-row-idx='" + id + "']");
// open the new element
$("#hierarchicalGrid").igHierarchicalGrid("expand", newEl);
});
Cancel
Reply

Reject Answer

Cancel

Children

0

Offline rahul pal posted over 1 year ago in reply to Vasya Kacheshmarova

Hello Vasya Kacheshmarova I tired your code but after refresh the grid ... row is getting collapse

function SetExpandedRows(gridName, expandedRowIds) {
debugger;
//Loop through the array of row id's
for (var i = 0; i < expandedRowIds.length; i++) {
//Get the reference to the row in the grid
//var gridRow = $("#" + gridName).igGrid("rowById", expandedRowIds[i]);

expandedRowIds.push($(this).attr("data-id"))
localStorage.setItem("id", JSON.stringify(expandedRowIds));
console.log(localStorage);
if (localStorage) {
debugger;
$.each(JSON.parse(localStorage.getItem("id")), function () {
var newEl = $("tr[data-id='" + this + "']");
debugger;
$("#" + gridName).igHierarchicalGrid("expand", newEl);
});

}
Cancel
Reply

Cancel

17590

Offline Vasya Kacheshmarova posted over 8 years ago in reply to Mike Burgess

Hello Mike,

Since you would like to implement persistence across data binding and browser refresh my suggestion is to use row ids (as you assumed) and keep these ids in the localStorage. Afterwards, when you would like to expand these rows again to retrieve the row by its id and pass it as parameter to expand method.For example:


$("#btnGetExpandedRows").click(function(){
    expandedRows = $("#hierarchicalGrid tr[aria-expanded=true]");
    $.each(expandedRows, function(){
    dataIds.push($(this).attr("data-id"))
    });
    localStorage.setItem("id",JSON.stringify(dataIds) );
    })
     $("#btnExpandRows").click(function(){
    if(localStorage){
    $.each(JSON.parse(localStorage.getItem("id")), function(){
     var newEl = $("tr[data-id='" + this + "']");
     $("#hierarchicalGrid").igHierarchicalGrid("expand", newEl);
    });
    }
    else{
     alert("Expand any row");
    }
    });

I am attaching ,y modified sample for your reference.

Please let me know if you have any additional questions regarding this matter.

igHierarachicalgridExpandPreviouslyExpandedRowsPersistance.zip