Is it possible to only show one child grid at a time

[R Brian Lindahl]

I'm using the grid control with a child grid. When doing a lot of editing, opening a child in more than one row leads to a lot of visual confusion. Is it possible to collapse any open rows when opening a new one? Thanks in adva

[Vikram Sundararajan]

Hi R Brian Lindahl,

Greetings from Syncfusion support,

We understand that you want to ensure only one child grid is expanded at a time, as having multiple child grids open simultaneously can cause visual confusion during editing. Below is a solution that achieves this functionality by using the recordClick event. This event checks for the expand icon click and collapses all previously expanded child grids before expanding a new one:

  recordClick: function (args) {

        if (grid && args?.target?.closest('.e-dtdiagonalright')) {

            grid.detailCollapseAll(); // Collapse all expanded rows before expanding the new one

        }

    }

Sample: https://stackblitz.com/edit/xjffce-gzzrvc?file=index.js

Api: https://ej2.syncfusion.com/documentation/api/grid#detailcollapseall

Please get back us if you need further assistance.

Regards,

Vikram S

[R Brian Lindahl]

Where does the "grid" variable come from? I'm using asp.net core razor pages, so I can't define the function inline to the grid definition. I have a separate function:''

    function recordClick(args) {
        if (grid && args?.target?.closest('.e-dtdiagonalright')) {
            grid.detailCollapseAll(); // Collapse all expanded rows before expanding the new one
        }
    }

but of course grid is undefined.

[Vikram Sundararajan]

Hi R Brian Lindahl,

We understand that you're facing an issue where the grid variable is undefined in your separate recordClick function since you're working with ASP.NET Core Razor Pages and can't define the function inline. To solve this, you can reference the grid instance by accessing it via its ID. Here's a simple way to do it:

<ejs-grid id="Grid"  recordClick="recordClick">

 

</ejs-grid>

 

  ………

function recordClick(args) {

    var grid =document.getElementById("Grid").ej2_instances[0]; // Replace 'Grid' with your grid's actual ID

    if (grid && args?.target?.closest('.e-dtdiagonalright')) {

        grid.detailCollapseAll(); // Collapse all expanded rows

    }

}

Please replace 'Grid' with the actual ID of your grid in the DOM.

Please get back us if you need further assistance.

Regards,

Vikram S

[R Brian Lindahl]

This was very helpful, thank you. 

I've expanded my parent/child grid to have a third level. Therefor I would like to do the same thing, but at the first "child" level. The problem is that I can't figure out what to use to identify which grid I'm asking it to collapse. The grid IDs are similar to "childGrid1234", and vary for every item in the child grid. Is there a way to get the grid I'm looking for, perhaps from a rowdata object or something similar? 

[Aishwarya Rameshbabu]

Hi R Brian Lindahl,

Based on the shared information, we observed that you are encountering an issue with obtaining the childGrid instance in the recordClick event of the Grid to enable collapsing of expanded rows when a new row is expanded, similar to the parent Grid. In Syncfusion Grid, each child Grid's ID is generated dynamically by default. However, you can access the childGrid instance using the target value in the recordClick event. Please refer to the code example and the attached sample and video demonstration below. In this sample, we accessed the childGrid instance by retrieving the childGrid element from args.target of the recordClick event using the EJ2-Base method closest.

Index.cshtml

    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()

            {

                ………………………………….

                RecordClick= "childRecordClick",

                FilterSettings = new GridFilterSettings { Type = FilterType.Excel },

                AllowSelection = false,

                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {

                       ………………………………….

                },

                ChildGrid = SecondchildGrid

            };

 }

<ejs-grid id="Grid" allowTextWrap="true" dataSource="@ViewBag.empdata" childGrid="ChildGrid" recordClick="recordClick" gridLines="Both" allowfiltering="true" height="300" toolbar="@(new List<string>() { "Search" })">

    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

     <e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings>

    <e-grid-columns>

              …………………………….

    </e-grid-columns>

</ejs-grid>

<script>

    function recordClick(args) {

        var grid = document.getElementById("Grid").ej2_instances[0]; // Replace 'Grid' with your grid's actual ID

        if (grid && args?.target?.closest('.e-dtdiagonalright')) {

            grid.detailCollapseAll(); // Collapse all expanded rows

        }

    }

    function childRecordClick(args) {

        var childIns = ej.base.closest(event.target, '.e-grid').ej2_instances[0]; // Getting the childGrid instance based on the target

        if (childIns && args?.target?.closest('.e-dtdiagonalright')) {

            childIns.detailCollapseAll(); // Collapse all expanded rows

        }

    }

</script>

 

Sample and Video Demonstration: Please find the attachments.

API Reference: RecordClick

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

Attachment: 194844SampleAndVideo_83a806a2.zip