Keep detailtemplate open after Grid refresh

[Hajir]

Hi,
I'm using Blazor DataGrid with Detail template having another grid in my detail template. After create or update I do the below to refresh the data (I don't do MyGrid.Refresh() and it works, not sure what's the purpose of that. I'd appreciate it if you can explain).

 public async Task OnActionCompleteDetail(ActionEventArgs Args)
    {
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save)
        {
            Content = Args.Action == "Add" ? $"Answer created!" : $"Answer updated!";
            var currentItem = Args.RowData.QuestionId;
            await GetData(); // calling server to get the data with .Include to get the detail template's data

            ToastObj.Content = Content;
            await Task.Delay(100);
            await ToastObj.ShowAsync();
        }

        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Delete)
        {
            Content = $"Answer deleted!";
            ToastObj.Content = Content;
            await Task.Delay(100);
            await ToastObj.ShowAsync();
        }
    }

I'm trying to allow add/edit parent and detail template. but whenever I add item to the child template, the grid data update and causes the row collapse. 

I want to preserve the detailtemplate after I do a crud operation and refreshing the grid.

Tha

[Renjith Singh Rajendran]

Hi Hajir, 

Greetings from Syncfusion support. 

Query 1 : I want to preserve the detailtemplate after I do a crud operation and refreshing the grid. 

When updating a row in Grid, this will refresh the entire grid, thereby collapsing the expanded rows. This is the default behavior of performing CRUD in a Grid with DetailTemplate.  

Based on this scenario, we suggest you to call the ExpandCollapseDetailRowAsync 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 to a dictionary in DetailDataBound event. And used Microsoft JSInterop to remove the collapsed rows from the ExpandedRows dictionary value.  

We are attaching the sample and video demo for your reference, please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-1981554193 

Video demo : https://www.syncfusion.com/downloads/support/directtrac/general/ze/detailrowexpandpersist834075438 

 

Please refer the codes below, 

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

 

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.GetRowIndexByPrimaryKeyAsync(a.Key);     //Fetch row index using Primary key  

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

    }}

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

public void DetailDataBound(DetailDataBoundEventArgs<Order> args) 

{ 

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

    { 

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

    } 

} 

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

public void DetailRowCollapse(string CollapseIndex) 

{ 

    Order CollapseRow = (Order)Grid.CurrentViewData.ElementAt(Convert.ToInt32(CollapseIndex));  //fetch collapse row from Grid current view 

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

} 

[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    }})

Query 2 : I don't do MyGrid.Refresh() and it works, not sure what's the purpose of that. I'd appreciate it if you can explain). 

Refresh() is a Grid’s inbuilt method to refresh the Grid programmatically. Calling Refresh() will refresh the contents of Grid programmatically. 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[Andreas Lymalm]

The code example above is not entirely correct. If you want to check for collapsed action in detailexpand.js, you should instead have this check:

if (args.target.classList.contains("e-dtdiagonalright") || args.target.classList.contains("e-detailrowcollapse"))

Also, two things to consider:

• A dictionary is not needed, since the value part is not used. Just use e.g. a HashSet instead.
• If you have a table where you can delete rows, be sure to implement ExpandedRows.Remove(CollapseRow.OrderID); after deleting the row.

[Prathap Senthil]

Hi Andreas,

Query:” A dictionary is not needed, since the value part is not used. Just use e.g. a HashSet instead .deleting rows and ensuring the removal of the corresponding data from Expanded Rows.”

Based on your request, we have modified the sample to use the HashSet method to store the value. We have also ensured that the rows are deleted after deleting the row in ExpandedRows. Kindly refer to the below code snippet and modified sample for your reference.

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);

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

        }

    }

 

    HashSet<int> ExpandedRows = new HashSet<int>();

 

    public void DetailDataBound(DetailDataBoundEventArgs<EmployeeData> args)

    {

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

        {

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

        }

    }

 

    [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 hashset

    }

//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"))

    {

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

    }

})

 

Regards,
Prathap S

Attachment: DataGrid._c92bc0b7.zip

[Alexander Kuhlmann]

If I use this approach the detailrow did not stay open.

It is collapsing first and then expands again.

So the view is flickering everytime the grid is refreshing.

Can I prevent the default collapsing on refresh?

[Prathap Senthil]

Hi Alexander,

We are unable to reproduce the reported issue when attempting to reproduce the issue . For your reference we have attached gif file for your reference. So, to
further proceed with the reporting problem, we require some additional clarification from your end. Please share the below details to proceed further at our end.

• To analyze the reported issue, could you please share a simple and reproducible sample with duplicate data that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution.
• If possible, kindly share your attempt to replicate the issue using the attached simple sample.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible.

Note: When updating a row in the grid, the entire grid will be refreshed. This is the default behavior.

Regards,
Prathap S

Attachment: GIF_DETAILTEMPLATE_8fa5c7a8.zip