Hide the expand/collapse icon in parent row with no record in child grid

17 Feb 20226 minutes to read

By default, the expand/collapse icon will be visible even if the child grid is empty.

You can use rowDataBound event to hide the icon when there are no records in child grid.

To hide the expand/collapse icon in parent row when no records in child grid, follow the given steps:

Step 1:

Create CSS class with custom style to override the default style of Grid.

    .e-row[aria-selected="true"] .e-customizedExpandcell {
        background-color: #e0e0e0;
    }

    .e-grid.e-gridhover tr[role='row']:hover {
        background-color: #eee;
    }

Step 2:

Add the CSS class to the Grid in the rowDataBound event handler of Grid.

    function rowDataBound(args) {
        var filter = args.data.EmployeeID;
        var data = new ej.data.DataManager(this.childGrid.dataSource).executeLocal(new ej.data.Query().where("EmployeeID", "equal", parseInt(filter), true));
        if (data.length == 0) {
            //here hide which parent row has no child records
            args.row.querySelector('td').innerHTML = " ";
            args.row.querySelector('td').className = "e-customizedExpandcell";
        }
    }

In the below demo, the expand/collapse icon in the row with EmployeeID as 1 is hidden as it does not have record in child Grid.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" load="load" rowDataBound="rowDataBound">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
        <e-grid-column field="EmployeeID" headerText="Employee ID" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" width="120" format="yMd"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
    
<style>
    .e-row[aria-selected="true"] .e-customizedExpandcell {
        background-color: #e0e0e0;
    }
    
    .e-grid.e-gridhover tr[role='row']:hover {
        background-color: #eee;
    }
</style>

<script>
    function load(args) {
        var grid = document.getElementById('Grid').ej2_instances[0]
        grid.childGrid = {
            dataSource: dataManger,
            queryString: 'EmployeeID',
            allowPaging: true,
            columns: [
                { field: 'Order', headerText: 'Order ID', textAlign: 'Right', width: 120 },
                { field: 'EmployeeID', headerText: 'Employee ID', width: 120 },
                { field: 'ShipName', headerText: 'Ship Name', width: 150 }
            ],
        }
    }
        
    var dataManger = [ { Order: 100, ShipName: 'Berlin', EmployeeID: 2 },
        { Order: 101, ShipName: 'Capte', EmployeeID: 3 },
        { Order: 102, ShipName: 'Marlon', EmployeeID: 4 },
        { Order: 103, ShipName: 'Black pearl', EmployeeID: 5 },
        { Order: 104, ShipName: 'Pearl', EmployeeID: 6 },
        { Order: 105, ShipName: 'Noth bay', EmployeeID: 7 },
        { Order: 106, ShipName: 'baratna', EmployeeID: 8 },
        { Order: 107, ShipName: 'Charge', EmployeeID: 9 },
    ];

    function rowDataBound(args) {
        var filter = args.data.EmployeeID;
        var data = new ej.data.DataManager(this.childGrid.dataSource).executeLocal(new ej.data.Query().where("EmployeeID", "equal", parseInt(filter), true));
        if (data.length == 0) {
            //here hide which parent row has no child records
            args.row.querySelector('td').innerHTML = " ";
            args.row.querySelector('td').className = "e-customizedExpandcell";
        }
    }
    
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}