How to change child grid styles?

[Jason Nham]

 Why is it these styles aren't effecting the select all checkbox and the child grid checkboxes? 

.e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-icons{ 
margin-left: 20px; 
background-color: red; 
width: 30px; 
height: 30px; 
} 

[Kishore Muthukrishnan]

Hi Jason,

Greetings from the Syncfusion support.

Query:  Why is it these styles aren't affecting the select all checkbox and the child grid checkboxes?

We investigated your query and provided information. We found that you have applied custom CSS properties to the Grid's rowcell (e-rowcell) element, which will only affect that specific element. The selectall (header) checkbox's element is different from the rowcell element. We recommend using the headercell (e-headercell) class as well, so that the changes will reflect on the selectall checkboxes in both the Grid and the child grid.

Please refer to the code snippet for more details.

[index.html]

 .e-grid .e-headercell .e-checkbox-wrapper .e-frame.e-icons,

            .e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-icons{ 

                margin-left: 2px; 

                background-color: red; 

                width: 20px; 

                height: 20px; 

            }

However, the styles for the child grid have been applied correctly on our end. Please refer to the sample link for more information.

Sample: https://stackblitz.com/edit/6hudje?file=index.ts,index.html

Please let us know if you need any further assistance.

Regards,

Kishore M

[Jason Nham]

For some reason, the styles aren't rendering for the child grid for my angular grid. It works for all the parent text boxes.

HTML Code:
<ejs-grid [dataSource]='parentData' 
[childGrid]='childGrid' 
[selectionSettings]="{checkboxOnly: true}" 
(checkBoxChange)="checkBoxChange($event)" 
(detailDataBound)="detailDataBound($event)" 
height='400px' >
   <e-columns>
      <e-column type="checkbox" width="50"></e-column> 
      <e-column field='customerId' [isPrimaryKey]='true' [visible]="false"></e-column> 
      <e-column field='custonerNum' headerText='Claim' width=100></e-column> 
   </e-columns> 
</ejs-grid>

Styles:

.e-grid .e-headercell .e-checkbox-wrapper .e-frame.e-icons, 
.e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-icons{ 
    margin-left: 2px; background-color: red; width: 20px; height: 20px; 
}

Component.ts

public parentData?: object[]; 
public childGrid: GridModel = { 
dataSource: flightData, 
queryString: 'ClaimID', 
columns: [ 
{ type: 'checkbox', width: 50 }, 
{ field: 'flightId', visible: false }, 
{ field: 'flightType', headerText: 'Flight Type', width: 80 }, 
{ field: 'date', headerText: 'Date', width: 100, disableHtmlEncode: false, 
  format: { type: 'dateTime', format: 'M/d/yyyy  <br>h:mm:ss a' 
  } } 
 ] 
};

[Kishore Muthukrishnan]

Hi Jason Nham,

In Angular components, the default ViewEncapsulation can prevent styles from being applied to child components (like a child grid). We recommend using ViewEncapsulation.None to ensure that your custom CSS is applied to all child components. Please refer the below code snippet and sample for more information.

[app.component.ts]

@Component({

    selector: 'app-root',

    templateUrl: 'app.component.html',

    providers: [DetailRowService, SortService, PageService, FilterService],

    standalone: true,

    encapsulation: ViewEncapsulation.None,

    imports: [ GridModule, ]

})

Sample: https://stackblitz.com/edit/angular-4i7f24?file=src%2Fapp.component.html,src%2Findex.html,src%2Fapp.component.ts,src%2Fapp.component.css

Regards,

Kishore Muthukrishnan