How to open only one Detail Row template

[Blazor]

I am using this demo;
https://blazor.syncfusion.com/demos/datagrid/detail-template?theme=bootstrap4

I want to allow only one opend detail row / detailtempate.

How can i achive this ?

here is i what i don't  want to; (opened two detail template)

[Renjith Singh Rajendran]

Hi Customer, 

Greetings from Syncfusion support. 

We can achieve this by using Microsoft JSInterop. We have bind the JavaScript “click” event to the application. And in that event handler based on the target we will be calling the collapseAll method of detailRowModule to achieve this requirement. 

We are attaching the sample for your convenience, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1407088608 

 

Please use the codes below, 

<SfGrid @ref="Grid" ID="Grid" DataSource="@Employees" >            ...</SfGrid>

 

[expandrow.js] 

document.addEventListener('click', function (args) {    if (args.target.classList.contains("e-dtdiagonalright") || args.target.classList.contains("e-detailrowcollapse")) {        var gObj = document.getElementById("Grid").ej2_instances[0];        gObj.detailRowModule.collapseAll();    }})

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Blazor]

Hi Renjith,
Thanks For great support

It is working but there is one problem;
When i add OnActionComplete event,  behavior changing unacceptable way
here is video;

https://drive.google.com/file/d/1zMusAwqIA3GpV8O8RysppDFcKAiTU1m-/view

I just added "OnActionComplete"

Event hadler is empty;


So, Can you find an other solution ?

[Renjith Singh Rajendran]

Hi Customer, 

Thanks for your update. 

We have modified the sample from our previous update based on this scenario. In the below sample we have used the collapse method of Grid, instead of the previously suggested collapseAll. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1206639314 

 

Please refer and use as like the code below, 

var prevrowIndex; 

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

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

        var gObj = document.getElementById("Grid").ej2_instances[0]; 

        if (prevrowIndex != undefined) { 

            gObj.detailRowModule.collapse(prevrowIndex);       //Collapse only the particular row instead based on previous index 

        } 

        prevrowIndex = parseInt(args.target.closest("tr").getAttribute("aria-rowindex"));    //Get the previously expanded row index 

    } 

}) 

Please get back to us f you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Blazor]

Hi great support,

It's working perfectly now. Thanks. ❤

[Renjith Singh Rajendran]

Hi Customer, 

Thanks for your update. 

We are glad to hear that the provided suggestion helped you in achieving your requirement.  

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Blazor]

Hi Renjith,
After 18.2.44 update

I am getting some error from your solution;
When i am opening one an other row detail here is exception on developer tools;

And other row detail is not collapsing.
Can you please check this ?

[Renjith Singh Rajendran]

Hi Customer, 

Thanks for your update. 

In our latest version 18.2.0.44, we have moved various features from JavaScript to C# side, hence this method has been removed. So to achieve this requirement, we suggest you to use the script codes as like below, instead of the collapse method. We have also modified the sample, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-285072204 

 

Please refer the below highlighted codes below, 

var prevrowIndex; 

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

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

        var gObj = document.getElementsByClassName("e-grid")[0].blazor__instance; 

        if (prevrowIndex != undefined) { 

            var rowele = gObj.getRowByIndex(prevrowIndex).querySelector(".e-detailrowexpand"); 

            rowele.click(); 

        } 

        prevrowIndex = parseInt(args.target.closest("tr").getAttribute("aria-rowindex")); 

    } 

}) 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Blazor]

Hi great support,

I have tested your solution . here is video;
https://drive.google.com/file/d/1EtwjeavuY0m91vb6qEwWgttKAuXVemsX/view

When i am bit fast collapsing and expanding solution is not working .

Is there any other way ?

[Renjith Singh Rajendran]

Hi Customer, 

Thanks for your update. 

We suggest you to use the DetailDataBound event of Grid, and in this event handler we suggest you to call the DetailExpandCollapseRow method of Grid based on the previously opened row data. We have modified the sample based on this requirement. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1234884177 

Documentations :  

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

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

 

Please use as like the code below 

 

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

public async Task DetailDataBound(DetailDataBoundEventArgs<EmployeeData> args){    if(target != null)        await Grid.DetailExpandCollapseRow(target);    target = args.Data;}

Note : Here after there is no need for using the JavaScript file(expandrow.js). You can remove that file from your application. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Blazor]

This is much better solution .
Thank you Renjith.❤

[Renjith Singh Rajendran]

Hi Customer, 

We are glad to hear that the provided solution helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Blazor]

Hi Renjith,
I found an other problem in this solution, here is video;

https://drive.google.com/file/d/1psbJ1C-OXndEcDxEkpLOSKh81O8ACA83/view

Same row detail is not expanding after closing second time .

[Renjith Singh Rajendran]

Hi Customer, 

Thanks for your update. 

We have modified our sample from previous update to overcome the reported problem. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1142569818 

 

To overcome this, we have returned the DetailDataBound event call by checking for target and args.data. And also, we have used the DataBound event and added the JS method in the application. We have used the DataBound handler to pass the dotnetreference to JS. By using the dotnetreference, we will be making call from JS to C#, during collapse action in Grid. This C# method will empty the target, when collapse action performed in Grid. 

Please refer the code below, 

 

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; 

    } 

} 

public async Task DetailDataBound(DetailDataBoundEventArgs<EmployeeData> args) 

{ 

    if (target != null) 

    { 

        if (target == args.Data)              // return when target is equal to args.data 

        { 

            return; 

        } 

        await Grid.DetailExpandCollapseRow(target); 

    } 

    target = args.Data; 

} 

 

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

public void DetailRowCollapse() 

{ 

    target = null;                   // empty the target when collapse action is done  

} 

[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'); // call C# method from javascript function    }})

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

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Blazor]

Hi,
It would be nice to get sample solution.

I didn't understand what is "taget" object.

[Renjith Singh Rajendran]

Hi Customer, 

Thanks for your update. 

Query : It would be nice to get sample solution. 

We have already attached the sample demo in our previous update dated July 20, 2020.  

We are re-attaching the sample solution demo for your convenience, please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1142569818 

 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Blazor]

Thanks, I didn't noticed.
Its working as expected.

[Renjith Singh Rajendran]

Hi Customer,  

Thanks for your update. 

We are glad to hear that the provided solution helped you in achieving your requirement.  

Please get back to us if you need further assistance.  

Regards,  

Renjith Singh Rajendran 

[Fermin Ricolfe]

Must check target is not the same or you cannot open or close the same item

private SfGrid<Evaluation> grid;
private Evaluation target;


public async Task DetailDataBound(DetailDataBoundEventArgs<Evaluation> args)
{
    // Must check target is not the same or you cannot open or close the same item
    if (target != null && target.Id != args.Data.Id)
    {
        await grid.ExpandCollapseDetailRowAsync(target);
    }
    target = args.Data;
}

[Monisha Saravanan]

Hi Fermin,

Thanks for the suggestion.