Get Expanded Row

Question

How to get expanded row or rows in SfGrid? @{ ProvidersListModel item = context as ProvidersListModel;

} Let me know which event to override in order to get expanded Row or Rows.

Vignesh Natarajan · Answer

Hi Faizan,

Greetings from Syncfusion support.

Query: “How to get expanded row or rows in SfGrid?”

We have analyzed your query and we would like to inform you that we do not have direct method to find the expanded record details in Grid. So we have used JSRuntime to call a JavaScript method and find the expanded record details using CSS Selectors and returned those values.

Refer the below code example.

<SfButton OnClick="Exp" Content="Expand All Details"></SfButton>

<SfGrid @ref="Grid" DataSource="@Employees" Height="315px">

. . . . . .. . . .

</SfGrid>

@code{

SfGrid<EmployeeData> Grid { get; set; }

public async Task Exp()

{

int[] expanded = await Runtime.InvokeAsync<int[]>("expandedRows", Grid.ID);

}

[rowdetails.js]

For your convenience we have attached the sample using above code example.

Sample: https://www.syncfusion.com/downloads/support/forum/169025/ze/DataGrid_Server1650931291.zip

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

Faizan Mubasher · Answer

Thanks for reply!Actually we are trying to Batch Edit Master Detail Grid. For single level Grid it is easy, but when there is master detail Grid it becomes tricky. Can you please provide any example of Batch Edit of Master Detail Grid. Specially Grid with expandable rows.Thanks

Vignesh Natarajan · Answer

Hi Faizan,  
 
Thanks for the update.  
 
Query: “Can you please provide any example of Batch Edit of Master Detail Grid. Specially Grid with expandable” 
 
As per your requirement we have prepared a sample to perform Batch editing in Master Detail Grid (hierarchy structure) and sample can be downloaded from below  
 
Sample: https://www.syncfusion.com/downloads/support/forum/169025/ze/DataGrid_Server214933330.zip 
 
Refer our UG documentation for your reference 
 
https://blazor.syncfusion.com/documentation/datagrid/editing#batch  
 
Kindly refer the below sample and get back to us with more details if you have further queries.   
 
Regards, 
Vignesh Natarajan

Thomas Trummer · Answer

Hi,is it also possible to expand specific rows by javascript?By default all groups are collapsed after data loadedI also know that there is a function to expand all groups but I only want to expand the first group column.And if possible it would be nice to keep them expanded even if a scroll, sort, ... action was performedThanks

Vignesh Natarajan · Answer

Hi Thomas,

Thanks for contacting Syncfusion support.

Query: “is it also possible to expand specific rows by javascript?” && I only want to expand the first group column And if possible it would be nice to keep them expanded even if a scroll, sort, ... action was performed

Yes, we have achieved your requirement to expand first group in Grid by calling a JavaScript method using JSInterop. In the JavaScript method, we have clicked the expand icon to open the particular group. Refer the below code example.

@inject IJSRuntime Runtime

<SfGrid @ref="Grid" DataSource="Orders" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">

<GridEvents DataBound="OnDataBound" TValue="Order"></GridEvents>

<GridGroupSettings Columns="@Cols"></GridGroupSettings>

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="150"></GridColumn>

</GridColumns>

</SfGrid>

@code{

SfGrid<Order> Grid { get; set; }

public string[] Cols = new string[] { "CustomerID" };

public List<Order> Orders { get; set; }

public async Task OnDataBound()

{

//to collapse all the groups.

await Grid.GroupCollapseAll();

//send gridid, grouped column name and values of particular group you want to expand.

await Runtime.InvokeVoidAsync("ExpandGroup", Grid.ID);

}

[Host.cshtml]

[GroupExpand.js]

function ExpandGroup(GridId) { // get instance of the Gridcontent var gridObj = document.getElementById(GridId).querySelector(".e-gridcontent") gridObj.querySelectorAll(".e-recordpluscollapse")[0].querySelector(".e-icon-grightarrow").click(); }

Also we have implemented above requirement using the DataBound event which will be triggered after a certain data operations. Kindly refer the below sample code example.

Sample: https://www.syncfusion.com/downloads/support/forum/169025/ze/DataGrid_Server-689936065.zip

Please get back to us if you have further queries or if above solution does not resolve your query.

Regards,

Vignesh Natarajan