To modify the Grid appearance, you need to override the default CSS of grid. Please find the CSS structure that can be used to modify the Grid appearance. Also, you have an option to create your own custom theme for all the JavaScript controls using our Theme Studio
.
Use the below CSS to customize the Grid root element.
.e-grid {
font-family: cursive;
}
Use the below CSS to customize the Grid header root element. Using this, you can override the thin line between header and content of the grid.
.e-grid .e-gridheader {
border:2px solid green
}
You can customize the Grid header cell elements using this CSS.
.e-grid .e-headercell {
color: darkblue;
}
Use the below CSS to customize the Grid header cell div element. Using this CSS, you can customize the header text content.
.e-grid .e-headercelldiv {
font-size: 15px;
}
Using this CSS, you can customize the Grid pager root element.
.e-grid .e-gridpager {
font-family: cursive;
background-color: #deecf9;
}
Use the below CSS to customize the Grid pager container element.
.e-grid .e-pagercontainer {
background-color: #deecf9;
}
Customize the Grid pager navigation elements, using the below selector.
.e-grid .e-gridpager .e-prevpagedisabled,
.e-grid .e-gridpager .e-prevpage,
.e-grid .e-gridpager .e-nextpage,
.e-grid .e-gridpager .e-nextpagedisabled,
.e-grid .e-gridpager .e-lastpagedisabled,
.e-grid .e-gridpager .e-lastpage,
.e-grid .e-gridpager .e-firstpage,
.e-grid .e-gridpager .e-firstpagedisabled {
background-color: #deecf9;
}
Use the below CSS to customize the Grid pager current page numeric link elements.
.e-grid .e-gridpager .e-numericitem {
border-radius: initial;
}
Using this CSS, you can customize the Grid pager current page numeric item.
.e-grid .e-gridpager .e-currentitem {
background-color: #0078d7;
}
Use the below CSS to customize the Grid sorting icon which present in the Grid header. You can use the available Syncfusion icons based on your theme.
.e-grid .e-icon-ascending::before {
content: '\e306';
}
.e-grid .e-icon-ascending::before {
content: '\e304';
}
Use the below CSS to customize the Grid multi sorting icon which present in the Grid header. You can use the available Syncfusion icons based on your theme.
.e-grid .e-sortnumber {
background-color: #deecf9;
font-family: cursive;
}
Use the below CSS to customize the Grid Filterbar cell element present in the Grid header.
.e-grid .e-filterbarcell {
background-color: #deecf9;
}
Customize the Grid Filterbar input element using this CSS.
.e-grid .e-filterbarcell .e-input-group input.e-input{
font-family: cursive;
}
Use the below CSS to customize the Grid Filterbar highlight color of focused filterbar input element.
.e-grid .e-filterbarcell .e-input-group.e-input-focus::after,
.e-grid .e-filterbarcell .e-input-group.e-input-focus::before{
background-color: #0078d7;
}
Use the below CSS to customize the Grid Filterbar input clear icon.
.e-grid .e-filterbarcell .e-input-group .e-clear-icon::before {
content: '\e825';
}
Below CSS customizes the Grid filter icon which present in the Grid header. You can also use custom icons. Here we have used bootstrap icon for filter icon element.
.e-grid .e-icon-filter::before{
content: '\002a';
}
Use the below CSS to customize the Grid filter dialog content element.
.e-grid .e-filter-popup .e-dlg-content {
background-color: #deecf9;
}
Grid filter dialog footer element an be customized by using the below CSS.
.e-grid .e-filter-popup .e-footer-content {
background-color: #deecf9;
}
Use the below CSS to customize the Grid filter dialog input element.
.e-grid .e-filter-popup .e-input-group input.e-input{
font-family: cursive;
}
Use the below CSS to customize the Grid filter dialog button element.
.e-grid .e-filter-popup .e-btn{
font-family: cursive;
}
Grid Excel filter dialog number filters element can be customized using the below CSS.
.e-grid .e-filter-popup .e-contextmenu-wrapper ul{
background-color: #deecf9;
}
Use the below CSS to customize the group header element.
.e-grid .e-groupdroparea {
background-color: #deecf9;
}
Use the below CSS to customize the Grid group expand/collapse icon. You can use the available Syncfusion icons based on your theme.
.e-grid .e-icon-gdownarrow::before{
content:'\e916'
}
.e-grid .e-icon-grightarrow::before{
content:'\e913'
}
Below CSS customizes the Grid group caption row element.
.e-grid .e-groupcaption {
background-color: #deecf9;
}
.e-grid .e-recordplusexpand,
.e-grid .e-recordpluscollapse {
background-color: #deecf9;
}
Use the below CSS to customize the Grid grouping indent cell element.
.e-grid .e-indentcell {
background-color: #deecf9;
}
Use the below CSS to customize the Grid toolbar root element.
.e-grid .e-toolbar-items {
background-color: #deecf9;
}
Use the below CSS to customize the Grid toolbar button element.
.e-grid .e-toolbar .e-btn {
background-color: #deecf9;
}
Use the below CSS to customize the Grid edited and added row table elements
.e-grid .e-editedrow table,
.e-grid .e-addedrow table {
background-color: #deecf9;
}
Grid edited row input elements can be customized using the below CSS.
.e-grid .e-gridform .e-rowcell .e-input-group .e-input.e-field {
font-family: cursive;
}
Use the below CSS to customize the Grid edit dialog header element
.e-edit-dialog .e-dlg-header-content {
background-color: #deecf9;
}
Below CSS customizes the Grid edited row input element in Dialog edit mode
.e-gridform .e-rowcell .e-float-input .e-field {
font-family: cursive;
}
Use the below CSS to customize the Grid aggregate root elements
.e-grid .e-gridfooter {
background-color: #deecf9;
}
Using this CSS, you can customize the Grid summary row cell elements.
.e-grid .e-summaryrow .e-summarycell {
background-color: #deecf9;
}
Row selection background can be customized using below CSS.
.e-grid td.e-selectionbackground {
background-color: #deecf9;
}
Cell selection background can be customized using below CSS.
.e-grid td.e-cellselectionbackground {
background-color: #deecf9;
}
Column selection background can be customized using below CSS.
.e-grid .e-columnselection {
background-color: #deecf9;
}