How to Expand/Collapse a row on click on the GridColumn instead of only on Expand/Collapse Icon

Question

Is there a way to expand a treegrid row, when the user clicks Grid Column on the row instead of directly on the little expand / collapse Icon.

It feels a bit tedious to exactly target the expand/Collapse Icon.

Thanks,

Adnan

Farveen Sulthana Thameeztheen Basha · Answer

Hi Adnan Ali, Query#:- Is there a way to expand a treegrid row, when the user clicks Grid Column on the row instead of directly on the little expand / collapse Icon. We have achieve your requirement using RowSelecting event of the TreeGrid. In RowSelecting event we have called “ExpandRow” method by passing row data so that row will be expanded on clicking row Clicking the expand/collapse icon will also perform expand collapse functionality Refer to the code below:- . . . @code{ public List TreeGridData { get; set; } SfTreeGrid TreeGrid { get; set; } public Boolean ExpandCollapseRow = false; protected override void OnInitialized() { this.TreeGridData = TreeData.GetSelfDataSource().ToList(); } public void RowSelectingHandler(RowSelectingEventArgs args) { // preventing Row Selection if (!this.ExpandCollapseRow) { this.TreeGrid.ExpandRow(args.Data); // expanding row on row click by calling ExpandRow method } this.ExpandCollapseRow = false; } public void ExpandingHandler(RowExpandingEventArgs args) { // setting flag this.ExpandCollapseRow = true; } public void CollapsingHandler(RowCollapsingEventArgs args) { // setting flag this.ExpandCollapseRow = true; } . . } Documentation link:- https://blazor.syncfusion.com/documentation/treegrid/events/#rowselecting https://blazor.syncfusion.com/documentation/treegrid/events/#expanding Please get back to us if you need any further assistance. Regards,Farveen sulthana T

Adnan Ali · Answer

Thanks for quick response, It works fine but RowSelectingHandler and other handlers are also triggered when we click on Action Buttons on second or third grid column. Can we make it only specific for GridColumn containing Parent Child Data.

one more thing that most of the times Expand /Collapse icon changes state instantly but child data contained by the selected row takes too much time to load or show in the grid

Farveen Sulthana Thameeztheen Basha · Answer

Hi Adnan, 

Query#:- Can we make it only specific for GridColumn containing Parent Child Data. 

We will check for the feasibility of your requirement and provide you further details by on or before 17th February 2022. Until then we appreciate your patience. 

Query#:- one more thing that most of the times Expand /Collapse icon changes state instantly 

Also we are unable to replicate the problem at our end. Share details such as Video Demo or any specific scenario you have faced the issue to proceed further.  

Regards,Farveen sulthana T

Farveen Sulthana Thameeztheen Basha · Answer

Hi Adnan, We appreciate your patience. Query#:- Can we make it only specific for GridColumn containing Parent Child Data. To achieve your requirement we have prevented the RowSelectingHandler on selecting the childrows by differentiate using ParentIdMapping values. Refer to the code below:- . . . @code{ public List TreeGridData { get; set; } SfTreeGrid TreeGrid { get; set; } public Boolean ExpandCollapseRow = false; protected override void OnInitialized() { this.TreeGridData = TreeData.GetSelfDataSource().ToList(); } public void RowSelectingHandler(RowSelectingEventArgs args) { var rowTaskId = args.Data.TaskId; var Source = TreeGrid.DataSource; var hasChildRows = Source.Where(rec => rec.ParentId == rowTaskId).Count(); if (hasChildRows > 0) { if (!this.ExpandCollapseRow) { this.TreeGrid.ExpandRow(args.Data); // expanding row on row click by calling ExpandRow method } this.ExpandCollapseRow = false; } else { // Logic for only child rows args.Cancel = true; // prevented rowSelect handlers for child rows } } public void ExpandingHandler(RowExpandingEventArgs args) { // setting flag this.ExpandCollapseRow = true; } public void CollapsingHandler(RowCollapsingEventArgs args) { // setting flag this.ExpandCollapseRow = true; } } Please get back to us if you need any further assistance on it. Regards,Farveen sulthana T

Adnan Ali · Answer

Thanks For Your Feedback

Maybe i was not able to explain query well. I have added a second Grid Column.

Row Selecting Handler is also triggered when we click on View Task Button in second grid column and Expands or Collapses the Row. Can we make it to trigger only when we click on data in First GridColumn i.e. Task instead of View Task

<SfTreeGrid DataSource="@TreeGridData" @ref="TreeGrid" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">

<TreeGridEvents RowSelecting="RowSelectingHandler" Expanding="ExpandingHandler"

Collapsing="CollapsingHandler" TValue="TreeData.BusinessObject">TreeGridEvents>

<TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right">TreeGridColumn>

TreeGridColumn>

. . .

TreeGridColumns>

SfTreeGrid>

@code{

public List<TreeData.BusinessObject> TreeGridData { get; set; }

SfTreeGrid<TreeData.BusinessObject> TreeGrid { get; set; }

public Boolean ExpandCollapseRow = false;

protected override void OnInitialized()

{

this.TreeGridData = TreeData.GetSelfDataSource().ToList();

}

public void RowSelectingHandler(RowSelectingEventArgs<TreeData.BusinessObject> args)

{

var rowTaskId = args.Data.TaskId;

var Source = TreeGrid.DataSource;

var hasChildRows = Source.Where(rec => rec.ParentId == rowTaskId).Count();

if (hasChildRows > 0)

{

if (!this.ExpandCollapseRow)

{

this.TreeGrid.ExpandRow(args.Data); // expanding row on row click by calling ExpandRow method

}

this.ExpandCollapseRow = false;

} else

{

// Logic for only child rows

args.Cancel = true; // prevented rowSelect handlers for child rows

}

public void ExpandingHandler(RowExpandingEventArgs<TreeData.BusinessObject> args)

{

// setting flag

this.ExpandCollapseRow = true;

}

public void CollapsingHandler(RowCollapsingEventArgs<TreeData.BusinessObject> args)

{

// setting flag

this.ExpandCollapseRow = true;

}

Farveen Sulthana Thameeztheen Basha · Answer

Hi Adnan, Query#:- Row Selecting Handler is also triggered when we click on View Task Button in second grid column and Expands or Collapses the Row. Can we make it to trigger only when we click on data in First GridColumn To achieve this requirement, we suggest to use CellSelection Mode of TreeGridSelectionSettings of TreeGrid. So that CellSelecting event will be triggered. In this event you can get the corresponding column details and prevent for other columns by setting args.cancel as true on RowSelecting event. Refer to the code below:-