Search results

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

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.

    public rowDataBound(args:any){
        let filter:string = args.data.EmployeeID;
        let childrecord: any = new DataManager(this.Grid.childGrid.dataSource).executeLocal(new Query().where('EmployeeID', 'equal', parseInt(filter), true));
        if(childrecord.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.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { employeeData } from './datasource';
import { GridComponent, RowDataBoundEventArgs, DetailRowService } from '@syncfusion/ej2-angular-grids';
import { DataManager, Query, DataResult } from '@syncfusion/ej2-data';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #Grid [dataSource]='data' [childGrid]='childGrid' (rowDataBound)="rowDataBound($event)">
                    <e-columns>
                        <e-column field='EmployeeID' headerText='EmployeeID' width='120' ></e-column>
                        <e-column field='FirstName' headerText='First Name'  width='150' ></e-column>
                        <e-column field='Title' headerText='Title' width='120' textAlign='Right'></e-column>
                        <e-column field='City' headerText='City' width='120' textAlign='Right'></e-column>
                        <e-column field='Country' headerText='Country' width='120' textAlign='Right'></e-column>
                    </e-columns>
                </ejs-grid>`,
    providers: [DetailRowService]
})
export class AppComponent implements OnInit {

    public data: object[];
    @ViewChild('Grid') public Grid: GridComponent;
    public childGrid: object;
    public dataManager: object[] = [{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}];

    ngOnInit(): void {
      this.data = employeeData;
      this.childGrid = {
          dataSource: this.dataManager,
          queryString: 'EmployeeID',
          allowPaging: true,
          columns: [
              { field: 'Order', headerText: 'Order ID', textAlign: 'Right', width: 120 },
              { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 120 },
              { field: 'ShipName', headerText: 'Ship Name', width: 150 }
          ]
      };
    }
    public rowDataBound(args: RowDataBoundEventArgs) {
        const EmployeeID = 'EmployeeID';
        const filter: string = args.data[EmployeeID];
        const childrecord: any = new DataManager(this.Grid.childGrid.dataSource as JSON[]).
        executeLocal(new Query().where('EmployeeID', 'equal', parseInt(filter, 10), true));
        if (childrecord.length === 0) {
            // here hide which parent row has no child records
            args.row.querySelector('td').innerHTML = ' ';
            args.row.querySelector('td').className = 'e-customizedExpandcell';
        }
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService,
                GroupService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);