Select Tree Grid rows based on certain condition does not work with pagination

Question

Hi! I am following the documentation to select rows at first render based on certain conditions but when I Enable pagination and navigate through the pages in the Tree Grid component the selection does not change.

Also, I want to perform this with a column with the ShowCheckbox property and instead of using SelectRows I am using SelectCheckboxes but it triggers an error (is not working with pagination as well).

I am attaching gifs and the project to reproduce the behavior.

Attachment: repos_3b99511b_d6d1e692.rar

Padmavathy Kamalanathan · Accepted Answer

Hi Adriana, 
 
Thanks for the update. 
 
Query: solution does not work if we change pageSize 
 
We are able to reproduce the reported issue at our end. We have modified the sample such that solution works with changing pageSize. 
 
Please check the below code snippet, 
 





  
    public async Task OnDataBound(object args) 
    { 
        var recs = this._treeGrid.GetCheckedRecords(); 
        var indx = this._treeGrid.GetCheckedRowIndexes(); 
        var currentData = this._treeGrid.GetCurrentViewRecords(); 
        if (recs.Result.Count != 0) // if any record in current view has already been checked 
        { 
            if (currentData.Count > this._treeGrid.PageSettings.PageSize *  
            this._treeGrid.PageSettings.PageCount) 
            { // condition to check if page size is changed. If yes, check the checkboxes of 
             newly included records of the page (if progress value is "open") 
                var index2 = 0; 
                foreach (var data2 in currentData) 
                { 
                   alreadyChecked2 = false; 
                    foreach (var check2 in recs.Result) 
                    { 
                        if (data2.TaskID == check2.TaskID) // this is true if the particular page  
                     has been visited already and some records whose progress value are "Open" 
                        { 
                            alreadyChecked2 = true; 
                        } 
  
                    } 
                    if (!alreadyChecked2) 
                    { 
                        if (data2.Progress == "Open") 
                        { 
                            SelectedNodeIndex.Add(index2); 
                        } 
                    } 
                    index2++; 
                } 
                alreadyChecked2 = false; 
  
            } 
          ------------- 
        if (!alreadyChecked) //using this flag we can prevent  checking the already  
          checked checkbox while paging 
        { 
            await this._treeGrid.SelectCheckboxes(SelectedNodeIndex); 
        } 
        alreadyChecked = false; 
  
    } 
     
 
Please find the below sample for reference, 
https://www.syncfusion.com/downloads/support/forum/164008/ze/BlazorApp1-2068859116  
 
Kindly get back to us for further assistance. 
 
Regards, 
Padmavathy Kamalanathan

Padmavathy Kamalanathan · Answer

Hi Adriana,

Thanks for contacting Syncfusion Forums.

Query: Select Tree Grid rows based on certain condition does not work with pagination

In your sample, we could see that you have selected checkbox using “selectCheckboxes” method when the “Progress” Column value is “Open” in “DataBound” event of Tree Grid. At initial rendering, checkboxes of page 1(based on condition) will be checked. When you navigate to page 2 and come back to page 1, the databound event will get triggered again and the selectCheckboxes method will be called again which will uncheck those checkboxes now. Thus your solution doesn’t work with pagination.

We have modified the solution using OnDataBound event such that if we revisit any page(whose checkboxes were checked already) we prevent checking them again with the method “selectCheckboxes”.

Please check the below code snippet,

<SfTreeGrid @ref="_treeGrid" DataSource="@TreeGridData" IdMapping="TaskID" ParentIdMapping="ParentID"

Height="315" TreeColumnIndex="1" AllowPaging="true">

<TreeGridPageSettings PageSizes="@PageSizes" PageCount="5" PageSize="2"></TreeGridPageSettings>

<TreeGridEvents OnActionBegin="ActionBeginHandler" DataBound="OnDataBound"

TValue="SelfReferenceData"></TreeGridEvents>

<TreeGridColumns>

<TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" IsPrimaryKey="true"

TextAlign="TextAlign.Right"></TreeGridColumn>

<TreeGridColumn ShowCheckbox Width="120"></TreeGridColumn>

<TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>

</TreeGridColumns>

</SfTreeGrid>

public Boolean alreadyChecked = false;

public List<int> SelectedNodeIndex = new List<int>();

public async Task OnDataBound(object args)

{

var recs = this._treeGrid.GetCheckedRecords();

var indx = this._treeGrid.GetCheckedRowIndexes();

var currentData = this._treeGrid.GetCurrentViewRecords();

if (recs.Result.Count != 0) // if any record in current view has already been checked

{

foreach (var data1 in currentData)

{

foreach (var check in recs.Result)

{

if (data1.TaskID == check.TaskID) // this is true if the particular page has been visited already

and some records whose progress value are "Open"

{

alreadyChecked = true; // setting alreadyChecked to true so that using this flag

we can prevent checking the already checked checkbox while paging

}

if (!alreadyChecked) // if the page is not visited already

{

var dataSource = this._treeGrid.GetCurrentViewRecords();

var index = 0;

foreach (var data in dataSource)

{

if (data.Progress == "Open")

{

SelectedNodeIndex.Add(index);

}

index++;

}

else

{

var dataSource = this._treeGrid.GetCurrentViewRecords();

var index = 0;

foreach (var data in dataSource)

{

if (data.Progress == "Open")

{

SelectedNodeIndex.Add(index);

}

index++;

}

if (!alreadyChecked) //using this flag we can prevent checking the already checked checkbox while paging

{

await this._treeGrid.SelectCheckboxes(SelectedNodeIndex);

}

alreadyChecked = false;

}

Please check the below sample,

https://www.syncfusion.com/downloads/support/forum/164008/ze/BlazorApp1918495425

Kindly get back to us for further assistance.

Regards,

Padmavathy Kamalanathan

Adriana Selena Tito Ilasaca · Answer

Hi there,

Thanks for your answer it works, but I notice strange behavior.

In the example above we allow pagination but with the implementation when you do not navigate between pages and the first thing you do is to change the PageSize you can see the items with the open option should be selected but they are not. It is because we have already selected items on the current page so once OnDataBound is triggered will notice that there are already selected items so it won't select again.

So if you do not change the PageSize at first render and you navigate to the second page and go back to the first-page and change the PageSize won't do the selection because there is already selected items but we already have the items that were part of the second page selected so no problem when you navigate through the pages and later change the PageSize.

I add a gif reproducing the issue, this is reproduced in the last sample you attached to this thread

Attachment: TreGridComponentIssue_7ea672f2.rar