Grid Expanded or Collapsed Persistence State

[Mustafa Kuyucu]

Hello,

I'm using Blazor Detail Grid how can I keep these grids persisted whether they are open or not.

How do I know if the grid is in Expand or collapse state?

Thanks in advance.

[Prathap Senthil]

Hi Mustafa,

Query:” Blazor Detail Grid how can I keep these grids persisted whether they are open or not.”

Regarding your query to maintain the expanded row in the detail template Grid, we would like to inform you that it is not possible for us to maintain expanded rows; instead, you can persist the expanded rows by calling the DetailExpandCollapseRow method of Grid in the DataBound event handler to persist the expanded rows. In the below code, we have fetched the expanded row details and added them to a dictionary in the DetailDataBound event. And used Microsoft JSInterop to remove the collapsed rows from the Expanded Rows dictionary value. Please refer to the attached code snippet and sample for your reference.

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Data

@inject IJSRuntime Runtime

@using Syncfusion.Blazor.Buttons

 

 

<SfButton OnClick="OnClick">Refresh Grid</SfButton>

 

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

    <GridEvents DetailDataBound="DetailDataBound" DataBound="DataBound" TValue="EmployeeData"></GridEvents>

    <GridTemplates>

        <DetailTemplate>

            @{

                var employee = (context as EmployeeData);

                <SfGrid DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))">

                    <GridColumns>

                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn>

                        <GridColumn Field=@nameof(Order.CustomerName) HeaderText="Last Name" Width="110"></GridColumn>

                        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Title" Width="110"></GridColumn>

                    </GridColumns>

                </SfGrid>

            }

        </DetailTemplate>

    </GridTemplates>

    <GridColumns>

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) IsPrimaryKey="true" HeaderText="First Name" Width="110"> </GridColumn>

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn>

        <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn>

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn>

        <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

    SfGrid<EmployeeData> Grid;

    public bool firstrender { get; set; } = true;

    public async Task DataBound()

    {

        if (firstrender)

        {

            var dotNetReference = DotNetObjectReference.Create(this);          // create dotnet ref

            await Runtime.InvokeAsync<string>("detail", dotNetReference);     // send the dotnet ref to JS side

            firstrender = false;

        }

 

        foreach (var a in ExpandedRows)

        {

            var PKIndex = await Grid.GetRowIndexByPrimaryKey(a.Key);

            await Grid.DetailExpandCollapseRow((EmployeeData)Grid.CurrentViewData.ElementAt(Convert.ToInt32(PKIndex)));     //Expand the already expnaded detailrows

        }

    }

    IDictionary<int, EmployeeData> ExpandedRows = new Dictionary<int, EmployeeData>();

 

    public void DetailDataBound(DetailDataBoundEventArgs<EmployeeData> args)

    {

        if (!ExpandedRows.ContainsKey(args.Data.EmployeeID))

        {

            ExpandedRows.Add(args.Data.EmployeeID, args.Data);  //add the expanded rows to dictionary

        }

    }

 

    [JSInvokable("DetailCollapse")]                            // method called from JS when collapse is done

    public void DetailRowCollapse(string CollapseIndex)

    {

        EmployeeData CollapseRow = (EmployeeData)Grid.CurrentViewData.ElementAt(Convert.ToInt32(CollapseIndex));

        ExpandedRows.Remove(CollapseRow.EmployeeID);              //Remove the collapsed row from expanded dictionary

    }

 

    public void OnClick()

    {

        Grid.Refresh();

    }

}

 

//detailExpand.js

var dotnetInstance;

 

function detail(dotnet) {

    dotnetInstance = dotnet; // dotnet instance to invoke C# method from JS

}

 

document.addEventListener('click', function (args) {

    if (args.target.classList.contains("e-dtdiagonaldown") || args.target.classList.contains("e-detailrowexpand")) {

        dotnetInstance.invokeMethodAsync('DetailCollapse', args.target.closest("tr").getAttribute("aria-rowindex")); // call C# method from javascript function

    }

})

 

Documentation:

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DetailExpandCollapseRow__0_

https://blazor.syncfusion.com/documentation/datagrid/events/#databound

https://blazor.syncfusion.com/documentation/datagrid/events/#detaildatabound

Regards,
Prathap S

Attachment: DataGrid_b9cff505.zip