Articles in this section
Category / Section

How to customize grid appearance using custom CSS?

1 min read

You can customize the grid based on your requirement by using Custom CSS. Classes have been used here to customize the grid styles.

The following code example demonstrates how to customize the grid’s appearance by using Custom CSS.

JS

<div id="Grid"></div>
<script type="text/javascript">
     $(function () {
         $("#Grid").ejGrid({
             dataSource: window.employeeView,
             allowGrouping: true,
             groupSettings: { groupedColumns: ["Title"] },
                 showSummary: true,
                         summaryRows: [{ showCaptionSummary: true, summaryColumns: [{ summaryType: ej.Grid.SummaryType.Count, displayColumn: "Title", dataMember: "Title", prefix: "Count = " }], showTotalSummary: false }],
             columns: [
                    { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 },
                    { field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 },
                    { field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left, width: 120 },
                    { field: "City", headerText: 'City', textAlign: ej.TextAlign.Left, width: 100 },
                    { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 }
             ]
         })
     })
</script>

MVC

@(Html.EJ().Grid<OrdersView>("Grid")
        .AllowGrouping()
        .GroupSettings(group => { group.GroupedColumns(col => { col.Add("Title"); }); })
        .ShowSummary()
        .SummaryRow(row =>{ row.ShowCaptionSummary(true).ShowTotalSummary(false)
               .SummaryColumns(col =>{ col.SummaryType(SummaryType.Count)
                     .DisplayColumn("Title").DataMember("Title").Prefix("Count = ").Add();
                }).Add();
          })
        .Columns(col =>
        {                            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
            col.Field("FirstName").HeaderText("First Name").Width(100).Add();
            col.Field("Title").HeaderText("Title").Width(120).Add();
            col.Field("City").HeaderText("City").Width(100).Add();                            col.Field("Country").HeaderText("Country").Width(100).Add();
        }))

ASP

<ej:Grid ID="Grid" runat="server" AllowGrouping="True" ShowSummary="True" >
            <GroupSettings GroupedColumns="Title"></GroupSettings>
                <SummaryRows>
                <ej:SummaryRow ShowCaptionSummary="True" ShowTotalSummary="False">
                    <SummaryColumn>
                        <ej:SummaryColumn SummaryType="Count" DisplayColumn=" Title" DataMember=" Title" Prefix="Count = " />
                    </SummaryColumn>
                </ej:SummaryRow>
                       </SummaryRows>
            <Columns>
                <ej:Column Field=" EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" />
                <ej:Column Field="FirstName" HeaderText="First Name" Width="100" />
                <ej:Column Field="Title" HeaderText="Title" Width="120" />
                <ej:Column Field="City" HeaderText="City" Width="100" />
                <ej:Column Field="Country" HeaderText="Country" Width="100" />
            </Columns>
</ej:Grid>

CSS

.e-grid .e-gridcontent { /* grid content color*/
    background-color: #FFF8DC;
    border-color: #bbbcbb;
    color: black;
}
.e-grid .e-groupdroparea { /* grid grouped area color*/
    background: #ffaf4e;    
    border-top-color: #bbbcbb;
    color: #fff;
}
.e-grid .e-cloneproperties { /* grid grouped drag cloner color*/
    color: #fff;
    background: #ffaf4e;   
    border-color: #bbbcbb;
}
.e-grid .e-groupcaption, .e-grid .e-groupcaptionsummary { /* grid summary color*/
    background-color: #f6f7f7;
    border-color: #bbbcbb;
}
.e-grid .e-groupcaptionsummary { /* grid summary alignment*/
    text-align: right !important;
}
.e-grid .e-groupheadercell:hover { /* grid grouped header cell hover color*/
    background: #ffbb60;
    color: #fff;
}
.e-grid .e-alt_row { /* grid alternate row color*/
    background: #fff;
}
.e-grid td.e-active { /* grid selection color and styles*/
    background: #C9EDEF;
    color: black;
    font-weight: bold;
    text-align:right !important; /* grid selection text align*/
}
.e-grid tr:hover td{ /* grid row hover text align*/
    text-align:center !important;
}
.e-gridheader .e-headercell, .e-grid td.e-active { /* grid header color and grid row select color*/
    background: #8B4513;
    min-height: 100%;
    border-bottom-color: #8B4513;
}
.e-grid .e-gridheader { /* grid header font color and styles*/
    color: white;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-bottom-color: #ffaf4e;
    border-top-color: #bbbcbb;
    height: 30px;
}
.e-grid .e-headercelldiv{ /* grid headercell font styles*/
    font-weight:lighter;
    font-size: 18px;
}
.e-grid .e-alt_row .e-rowcell{ /* grid alternate rows styles*/
    font-style: italic;
    text-align:right !important; /* grid alternate rows text align*/
    color:#700000;
}
.e-grid .e-alt_row .e-rowcell:hover{ /* grid alternate rows styles in hover*/
    font-style: italic;
    color:#700000;
}
.e-grid .e-alt_row:hover .e-rowcell{ /* grid alternate rows text align in hover*/
    text-align:left !important; 
}
.e-grid .e-alt_row .e-rowcell.e-active{ /* grid alternate rows styles in hover*/
    font-style: italic;
    color:white;
}
.e-grid .e-groupdroparea.e-hover {  /* grid group hover design*/
    background: #ffbb60;
}
.e-grid tr.e-hover { /* grid row hover color and styles*/
    background: #E6CD82;
    color: black;
    font-weight: bold;
}

The following screenshot displays the Custom CSS in Grid.

Figure 1: Output

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied