Expand mode to be single in Hierarchy grid

[Hugo Zhao]

Hi,

https://www.syncfusion.com/forums/147291/expand-mode-to-be-single-in-hierarchy-grid-and-log-column-values-of-expanded-row

Could you be so kind as to show me with how to implement this with blazor. ( expand one and collapse other). 

Many thanks

[Rahul Narayanasamy]

Hi Hugo, 

Greetings from Syncfusion. 

Query: Expand mode to be single in Hierarchy grid - Could you be so kind as to show me with how to implement this with blazor. ( expand one and collapse other). 

We have validated your query and you want to close the detailed row when another detail row is clicked. You can achieve your requirement by using the Microsoft JSInterop and binding the javascript click event to check the current target and then invoking the DetailExpandCollapseRow method of grid. Please find the below code snippet and the sample for your reference. 

[Index.razor] 

<SfGrid @ref="Grid" ID="Grid" DataSource="@Employees" Toolbar="Toolbaritems"> 

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

    <GridTemplates> 

        <DetailTemplate> 

            @{ 

                var employee = (context as EmployeeData); 

                <div> 

                    <SfGrid ID="DetailGrid" DataSource="@Orders"> 

                    . . . 

                    </SfGrid> 

                </div> 

            } 

        </DetailTemplate> 

    </GridTemplates> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<EmployeeData> Grid; 

    . . . 

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

    public async Task DataBound() 

    { 

        if (firstrender) 

        { 

            var dotNetReference = DotNetObjectReference.Create(this); 

            await Runtime.InvokeAsync<string>("detail", dotNetReference); 

            firstrender = false; 

        } 

    } 

    public async Task DetailDataBound(DetailDataBoundEventArgs<EmployeeData> args) 

    { 

        if (target != null) 

        { 

            if (target == args.Data) 

            { 

                return; 

            } 

            await Grid.DetailExpandCollapseRow(target); 

        } 

        target = args.Data; 

    } 

 

    [JSInvokable("DetailCollapse")] 

    public void DetailRowCollapse() 

    { 

        target = null; 

    } 

    p. . . 

} 

[detailexpand.js] 

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 

    } 

}) 

Sample: https://www.syncfusion.com/downloads/support/forum/162126/ze/SampleHGrid349566863  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Hugo Zhao]

Thank you very much

[Rahul Narayanasamy]

Hi Hugo, 

 

Thanks for the update. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rahul