Forums Home / Wijmo / General Discussion
Posted by: smile8691 on 14 September 2017, 11:22 am EST
smile8691
Posted 14 September 2017, 11:22 am EST
I am adding some data and then calling scope.flex.collectionView.refresh() on a flexgrid (the grid is a tree with child-items-path set). After I call refresh, all of the nodes of the tree are expanded. Is there a way to prevent this?
manpreet-kaur
Posted 14 September 2017, 11:23 am EST
Hello,
Kindly refer to the following forum link: http://wijmo.com/topic/wijmo-flexgrid-in-tree-mode-collapseexpand/, which discusses how you can expand or collpase specific nodes or collapse all the nodes at a sepcific level by using the “collapseGroupsToLevel” method of FlexGrid.
You can follow any approach to handle the expanding nodes during refresh. Hope it helps.
Thanks,
Manpreet Kaur
smile8691
Posted 14 September 2017, 11:23 am EST
Thank you!
smile8691
Posted 14 September 2017, 11:23 am EST
Sorry, but this is not a solution to my problem. I want the flexgrid expanded nodes to not expand all nodes when I call refresh. The code you gave me will only change the state of the selected node. So when I call refresh and then expandCollapse(), my selected row is collapsed and all other rows are expanded. This is the opposite of what I want to achieve.
smile8691
Posted 14 September 2017, 11:23 am EST
Hi Can anyone please help with this issue. thanks
manpreet-kaur
Posted 14 September 2017, 11:23 am EST
Hello,
I apologize for the delayed response. As per my understanding you are looking forward to display all the nodes as collapsed nodes, after FlexGrid has been refreshed.
As mentioned above, you collapse all the nodes at a sepcific level by using the “collapseGroupsToLevel” method of FlexGrid. You can call this method after calling the refresh method of the collectionView. Kindly refer to the attached HTML Page, which calls this method to collapse all the expanded nodes after the refresh method is called.
Hope it helps. Please let me know if you are referring to a different scenario.
Thanks,
Manpreet Kaur
2015/08/FlexGrid_Collapse.html
smile8691
Posted 14 September 2017, 11:23 am EST
That is not what I want. When refresh is called, I want all nodes collapse/expand state to stay exactly the same.
manpreet-kaur
Posted 14 September 2017, 11:23 am EST
Hello,
Thank you for sharing your observations with us. I am working on creating a demo sample which fulfills your requirement. I would soon share my observations on the same.
Thanks,
Manpreet Kaur
manpreet-kaur
Posted 14 September 2017, 11:23 am EST
Hello,
You would need to loop through the FlexGrid rows and manually save the expand/collapse state of each row. After the FlexGrid has been refreshed you can reset this state on the group header rows. Here is the sample code for the functions which expand/collapse the group header rows:
[js]
function SaveExpandCollapse(hierGrid) {
var rows = hierGrid.rows;
for (var rowIdx = 0; rowIdx < rows.length; rowIdx++) {
rootRow = rows[rowIdx];
if (rootRow.hasChildren) {
ecarr.push(rootRow.isCollapsed);
}
}
}
function ApplyExpandCollapse(hierGrid) { var rows = hierGrid.rows; for (var rowIdx = 0, i = 0; rowIdx < rows.length; rowIdx++) { rootRow = rows[rowIdx]; if (rootRow.hasChildren) { rootRow.isCollapsed = ecarr[i]; i++; } } }
[/js]
Kindly refer to the attached HTML Page which implements the same. Hope it helps.
Thanks,
Manpreet Kaur
2015/08/FlexGrid_Collapse_Expand.html
smile8691
Posted 14 September 2017, 11:23 am EST
Thanks!
smile8691
Posted 14 September 2017, 11:23 am EST
This code does not work properly. Please post a working fiddler example.
manpreet-kaur
Posted 14 September 2017, 11:23 am EST
Hello,
Kindly refer to the following jsfiddle: http://jsfiddle.net/hh0f2zax/1/ which is created based on the sample HTML Page provided above. It is working as expected i.e. t maintains the expand/collapse state of the groups in FlexGrid.
Hope it helps.
Thanks,
Manpreet Kaur
sloshy
Posted 14 September 2017, 11:23 am EST
This fiddler example doesn’t work.
I’m looking to do something like this as well.
Seems setting the isCollapsed is not working.
manpreet-kaur
Posted 14 September 2017, 11:23 am EST
Hello,
The fiddle provided above is working correctly at my end with the latest version of Wijmo 5 i.e. 2015v2.90. If I collapse several groups and then click on the Refresh button, then it refreshes the FlexGrid but still maintains the collapsed/expand state of the rows.
Here is the link to the updated fiddle which uses the latest version: http://jsfiddle.net/hh0f2zax/3/.
Could you please elaborate your query further describing what issue are you facing with the fiddle. I would request you to modify the above fiddle to depict your issue so that I can replicate the issue at my end and debug it further. Please let me know in case you are facing this issue with any specific browser.
Thanks,
Manpreet Kaur
sloshy
Posted 14 September 2017, 11:23 am EST
That seems to work. However, when you sort a column, its losing its collapse state.
Here is the fiddle: http://jsfiddle.net/vLouz0w1/
raunak
Posted 14 September 2017, 11:23 am EST
Hi,
In order to accomplish your requirement, we would suggest you to handle the ‘sortingColumn’ and ‘sortedColumn’ events of FlexGrid.
Here is the link of the updated fiddle:
http://jsfiddle.net/vLouz0w1/2/
Regards,
Raunak Ladha
sloshy
Posted 14 September 2017, 11:23 am EST
So I’m handling this event, and the code is working…
However… when loading new data or sorting, you can see it auto-expand, then my code kicks in and “fixes” it…
However, the user can see this flickering. Is there a way to fix the flickering?
nsd
Posted 14 September 2017, 11:23 am EST
Hi Sloshy
Try this out, this is what we do!
Run this code before creating a FlexGrid.
[js]
// Overwrite refresh so we keep the expanse / collapse status of groups
(function () {
var baseBind = wijmo.grid.FlexGrid.prototype._bindGrid;
wijmo.grid.FlexGrid.prototype._bindGrid = function (full) {
var state = {};
var rows = this.rows; for (var rowIdx = 0; rowIdx < rows.length; rowIdx++) { var rootRow = rows[rowIdx]; if (rootRow.hasChildren) { state[rootRow.dataItem.level + "_" + rootRow.dataItem.name] = rootRow.isCollapsed; } } try { baseBind.call(this, full); } finally { var rows = this.rows; for (var rowIdx = 0; rowIdx < rows.length; rowIdx++) { var rootRow = rows[rowIdx]; if (rootRow.hasChildren) { var rowName = rootRow.dataItem.level + "_" + rootRow.dataItem.name; if (state.hasOwnProperty(rowName)) { rootRow.isCollapsed = state[rootRow.dataItem.level + "_" + rootRow.dataItem.name]; } } } } }
})();
[/js]
spsk78
Posted 14 September 2017, 11:23 am EST
I do have same issue that grid refreshed with all nodes expanded but I would like to this get refreshed with collapsed state after reloading the data or after itemsource changed to new data source.
I have attached the html with two data sources and the 2nd one get assigned when you click refresh.
2016/02/FlexGrid_Collapse_NotWorking.html
manpreet-kaur
Posted 14 September 2017, 11:23 am EST
Hello,
Your query has been answered at the following forum link: http://wijmo.com/topic/prevent-children-nodes-expanding-after-resettingreloading-item-source/#post-36184. Kindly refer to the same.
Hope it helps.
Thanks,
Manpreet Kaur
aks2mail
Posted 5 June 2018, 6:21 pm EST
I need to show the grid with detail row grid in expend mode when initially parent grid load. Is it possible , how? Is there any example code , that will be helpful.
