We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
Hi,
I need to select some rows of a TreeGrid, depending on a field value. To achieve this I selected the rows on TreeGrid's DataBound event.
The data can be updated from other pages so I need to update the TreeGrid when such an event occurs.
Also I need to update selected rows when a previously collapsed row is expanded, because the state of some of the hidden rows may have changed from another page.
When the page is first loaded, the TreeGrid is giving the feeling that all rows are not being selected
simultaneously, instead they are selected one by one.
When columns are not using templates and selection is changed from header checkbox or from a toolbar button everything looks ok but if I use templates for TreeGrid columns and trigger the change from expand event, then the display looks like a full refresh.
The issue is displayed better when all rows are are already selected. If I collapse and then expand a row, first all rows' selection is cleared and then reselected.
The attached sample has relatively few rows & columns and the column templates are rather simple, still the issue can be observed. It is worse when data is bigger and more complicated.
Is there a way to increase the performance and eliminate the display issue (or at least improve the user experience)?
Thanks,
Kind Regards
Hi Yunus,
Thanks for contacting Syncfusion support.
Query #:- When the page is loaded initially, the Tree Grid rows are selected one by one.
We are able to replicate the problem from our end. In your provided code you have used Templates for all columns. In that scenario, Initially TreeGrid has been rendered and after that it perform selection for templates bound to corresponding row(one by one) on DataBound event which takes time which is considered as behavior.
For example, we have performed the same action on button click which doesn’t show delay. But while performing the same at DataBound event simultaneous action occurs at same time.
Query #:- If all rows are selected, after collapse and then expanding a row, all rows selection is cleared and then reselected.
In your provided code example, On expanding you have used SetSelectedRows() method which reselects all the rows in OnRowExpanded event.
So share us the requirement or purpose of using SetSelectedRows method while Expanding. Based on that we will procced further.
Regards,
Shek
Hi Shek,
Query #:- If all rows are selected, after collapse and then expanding a row, all rows selection is cleared and then reselected
So share us the requirement or purpose of using SetSelectedRows method while Expanding. Based on that we will procced further.
The rows are selected on condition and the expanded rows could be updated by another user from another window. So I need to check if they are updated and select the rows if required. But I could not find a method to add new rows to the already selected ones, other than using SetSelectedRows. Being able to add new rows without giving all list to SetSelectedRows could ease the refresh effect.
Kind regards,
Yunus,
Query:So I need to check if they are updated and select the rows if required. But I could not find a method to add new rows to the already selected ones, other than using SetSelectedRows.
Based on your query, we suggest you to use the Deselecting event of the treegrid to prevent deselection while expanding the record. The GetSelectedRowIndexes method of the treegrid can be used to get the already selected row indexes. GetCurrentViewRecords and GetSelectedRowIndexes method can be used to get the unselected row index. Based on that row index, you can select the unselected row.
Please refer to the below code snippet,
|
<SfTreeGrid @ref="treeGrid" DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" ShowColumnChooser="true" Toolbar="toolbarItems" AllowSelection="true" HasChildMapping="HasChildren" AutoCheckHierarchy="true" LoadChildOnDemand="true"> <TreeGridEvents TValue="BusinessObject" DataBound="OnDataBound" RowDeselecting="deselecting" OnToolbarClick="OnToolbarClick" Expanded="OnRowExpanded"></TreeGridEvents>
………………..
private async void OnRowExpanded(RowExpandedEventArgs<BusinessObject> args) { flag = true; // here we enable the flag var to prevent deselection var currentView = treeGrid.GetCurrentViewRecords();//get currentview records var selectedrow = treeGrid.GetSelectedRowIndexesAsync(); //here get selected row indexes List<double> selectedIndexes = new List<double>();
List<double> index = new List<double>(); foreach (var item in currentView) { index.Add(await treeGrid.GetRowIndexByPrimaryKeyAsync(item.TaskId)); } //here we get the unselected row indexes var newList = index.Except(selectedrow.Result); //here we selected only unselected records treeGrid.SelectRowsAsync(newList.ToArray());
} public void deselecting(RowDeselectEventArgs<BusinessObject> args) { if(flag == true) { args.Cancel = true; // prevent the deselection flag = false; } } |
Please refer to the attached sample,
Kindly get back to us for further assistance.
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Hi,
Thank you for the solution, it is working good.
Can you help with one more case please?
When a record is deselected in another browser window, I notify all clients by a singleton service. When I receive the information and reconstruct the selected rows then use SelectRowsAsync all rows are deselected and reselected. If I use the above method, it cancels the deselection of all rows. In this case I need to remove one row from selected rows.
Thanks, kind regards
Yunus,
Query: If I use the above
method, it cancels the deselection of all rows. In this case I need to remove
one row from selected rows.
Based on your query, we understand that you want to persist the deselected rows on Page re-load and also with Expand/Collapse actions. To achieve this, we suggest using the GetSelectedRowIndexesAsync method to obtain the selected row indexes, then selecting the row using the SelectRowsAsync method and preventing deselection using a flag variable.
Please refer to the below code snippet,
|
<SfButton @onclick="onToggleClick" >RowDeselect</SfButton> <SfTreeGrid @ref="treeGrid" DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" ShowColumnChooser="true" Toolbar="toolbarItems" AllowSelection="true" HasChildMapping="HasChildren" AutoCheckHierarchy="true" LoadChildOnDemand="true"> <TreeGridEvents TValue="BusinessObject" DataBound="OnDataBound" Expanded="OnRowExpanded" RowDeselecting="deselecting" OnToolbarClick="OnToolbarClick "></TreeGridEvents>
……………….. public bool expand_flag = false; //define the flag var for expand action public bool deselect_flag = false; // defind the flag var for deselction action
private async void onToggleClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) { expand_flag = false; // here we disable the expand flag
var currentView = treeGrid.GetCurrentViewRecords(); var selectedrow = treeGrid.GetSelectedRowIndexesAsync(); //here get selected row indexes List<double> index = new List<double>(); foreach (var item in currentView) { index.Add(await treeGrid.GetRowIndexByPrimaryKeyAsync(item.TaskId)); } //here we get the unselected row indexes var newList = index.Except(selectedrow.Result);
if (newList.Count() > 0) { deselect_flag = true; // here we enable the deselection flag if we have any deselect row id = newList.ToList(); }
List<double> index_sel = new List<double>();
index_sel = await selectedrow; //here we collect the selected row indexes //here we select the row using selected row indexes await treeGrid.SelectRowsAsync(index_sel.ToArray());
}
private async void OnRowExpanded(RowExpandedEventArgs<BusinessObject> args) { expand_flag = true; // here we enable expand the flag var currentView = treeGrid.GetCurrentViewRecords();//get currentview records var selectedrow = treeGrid.GetSelectedRowIndexesAsync(); //here get selected row indexes List<double> selectedIndexes = new List<double>();
List<double> index = new List<double>(); foreach (var item in currentView) { index.Add(await treeGrid.GetRowIndexByPrimaryKeyAsync(item.TaskId)); } //here we get the unselected row indexes var newList = index.Except(selectedrow.Result); var list =false;
//here we collect if any row was unselected if(deselect_flag == true) { list = id.Intersect(newList).Any();
} if (list == true) { expand_flag = false; // disable the expand flag } else { treeGrid.SelectRowsAsync(newList.ToArray()); // here we select the deselected row when performing expand action }
} public void deselecting(RowDeselectEventArgs<BusinessObject> args) { //here based on the expand action we prevent the selection if(expand_flag == true && deselect_flag == false ) {
args.Cancel = true; // prevent the deselection expand_flag = true;
} |
Please refer to the below sample,
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfTreeGridTest_modified514816119
If we misunderstood your query, kindly get back to us for further assistance.
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
