documentation(951749):Style and appearance.

blazor-toc.html

@@ -1976,6 +1976,19 @@
 			<li>
 				<a href="/blazor/datagrid/events">Events</a>
 			</li>
+			<li>
+				<a href="/blazor/datagrid/style-and-appearance">Style and Appearance</a>
+				<ul>
+					<li><a href="/blazor/datagrid/style-and-appearance/aggregate">Aggregate</a></li>
+					<li><a href="/blazor/datagrid/style-and-appearance/editing">Editing</a></li>
+					<li><a href="/blazor/datagrid/style-and-appearance/filtering">Filtering</a></li>
+					<li><a href="/blazor/datagrid/style-and-appearance/grouping">Grouping</a></li>
+					<li><a href="/blazor/datagrid/style-and-appearance/header">Header</a></li>
+					<li><a href="/blazor/datagrid/style-and-appearance/paging">Paging</a></li>
+					<li><a href="/blazor/datagrid/style-and-appearance/selection">Selection</a></li>
+					<li><a href="/blazor/datagrid/style-and-appearance/sorting">Sorting</a></li>
+				</ul>
+			</li>
 			<li>How To
 				<ul>
 					<li>

blazor/datagrid/style-and-appearance/aggregate.md

@@ -0,0 +1,40 @@
+---
+layout: post
+title: Aggregate in Blazor DataGrid control | Syncfusion
+description: Learn here all about Aggregate in Syncfusion Blazor DataGrid control of Syncfusion Essential JS 2 and more.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Aggregate in Syncfusion Blazor DataGrid
+
+You can customize the appearance of aggregate elements in the Syncfusion Blazor DataGrid using CSS. Below are examples of how to customize the aggregate root element and the aggregate cell elements.
+
+## Customizing the aggregate root element
+
+To customize the appearance of the Grid's aggregate root elements, you can use the following CSS code:
+
+```css
+.e-grid .e-gridfooter {
+    font-family: cursive;
+}
+```
+
+In this example, the **e-gridfooter** class represents the root element of the aggregate row in the Grid footer. You can modify the `font-family` property to change the font of the aggregate root element.
+
+![Customize aggregate root element](../images/style-and-appearance/aggregate-root-element.png)
+
+## Customizing the aggregate cell elements
+
+To customize the appearance of the Grid's aggregate cell elements (summary row cell elements), you can use the following CSS code:
+
+```css
+.e-grid .e-summaryrow .e-summarycell {
+    background-color: #deecf9;
+}
+```
+
+In this example, the **e-summaryrow** class represents the summary row containing aggregate cells, and the **e-summarycell** class targets individual aggregate cells within the summary row. You can modify the `background-color` property to change the `color` of the aggregate cell elements.
+
+![Customize aggregate cell element](../images/style-and-appearance/aggregate-cell-element.png)

blazor/datagrid/style-and-appearance/editing.md

@@ -0,0 +1,76 @@
+---
+layout: post
+title: Editing in DataGrid control | Syncfusion
+description: Learn here all about Editing in Syncfusion DataGrid control of Syncfusion Essential JS 2 and more.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Editing in Syncfusion Blazor DataGrid
+
+You can customize the appearance of editing-related elements in the Syncfusion Blazor DataGrid using CSS. Below are examples of how to customize various editing-related elements.
+
+## Customizing the edited and added row element
+
+To customize the appearance of edited and added row table elements in the Grid, you can use the following CSS code:
+
+```css
+.e-grid .e-editedrow table, .e-grid .e-addedrow table {
+	    background-color: #62b2eb;
+}
+```
+In this example, the .**e-editedrow** class represents the edited row element, and the **.e-addedrow** class represents the added row element. You can modify the `background-color` property to change the color of these row table elements.
+
+![Customizing the added row element](../images/style-and-appearance/edited-added-row-element.png)
+![Customizing the edited row element](../images/style-and-appearance/edited-added-row-element-2.png)
+
+## Customizing the edited row input element
+
+To customize the appearance of edited row input elements in the Grid, you can use the following CSS code:
+
+```css
+
+.e-grid .e-gridform .e-rowcell .e-input-group .e-input {
+    font-family: cursive;
+    color:rgb(214, 33, 123)
+}
+
+```
+In this example, the **.e-gridform** class represents the editing form, and the **.e-input** class represents the input elements within the form. You can modify the `font-family` property to change the font and `color` property  to change text color of the input elements.
+
+![Customizing the edited and added row element](../images/style-and-appearance/edited-row-input-element.png)
+
+## Customizing the edit dialog header element
+
+To customize the appearance of the edit dialog header element in the Grid, you can use the following CSS code:
+
+```css
+
+.e-edit-dialog .e-dlg-header-content {
+    background-color: #deecf9;
+}
+
+```
+In this example, the **.e-edit-dialog** class represents the edit dialog, and the **.e-dlg-header-content** class targets the header content within the dialog. You can modify the `background-color` property to change the color of the header element.
+
+![Customizing the edit dialog header element](../images/style-and-appearance/edit-dialog-header-element.png)
+
+## Customizing the command column buttons
+
+To customize the appearance of command column buttons such as edit, delete, update, and cancel, you can use the following CSS code:
+
+```css
+
+.e-grid .e-delete::before ,.e-grid .e-cancel-icon::before{
+    color: #f51717;
+}
+.e-grid .e-edit::before, .e-grid .e-update::before {
+    color: #077005;
+}
+
+```
+In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** classes represent the respective command column buttons. You can modify the `color` property to change the color of these buttons.
+
+![Customize command column button](../images/style-and-appearance/commandbutton-1.png)
+![Customize command column button](../images/style-and-appearance/commandbutton-2.png)

blazor/datagrid/style-and-appearance/filtering.md

@@ -0,0 +1,162 @@
+---
+layout: post
+title: Filtering in Blazor DataGrid control | Syncfusion
+description: Learn here all about Filtering in Syncfusion Blazor DataGrid control of Syncfusion Essential JS 2 and more.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Filtering in Syncfusion Blazor DataGrid
+
+You can customize the appearance of filtering elements in the Syncfusion Blazor DataGrid using CSS. Below are examples of how to customize various filtering elements, including filter bar cell elements, filter bar input elements, focus styles, clear icons, filter icons, filter dialog content, filter dialog footer, filter dialog input elements, filter dialog button elements, and Excel filter dialog number filters.
+
+## Customizing the filter bar cell element
+
+To customize the appearance of the filter bar cell element in the Grid header, you can use the following CSS code:
+
+```css
+
+.e-grid .e-filterbarcell {
+      background-color: #045fb4;
+}
+
+```
+In this example, the **.e-filterbarcell** class targets the filter bar cell element in the Grid header. You can modify the `background-color` property to change the color of the filter bar cell element.
+
+![Filter bar cell element](../images/style-and-appearance/filter-bar-cell-element.png)
+
+## Customizing the filter bar input element
+
+To customize the appearance of the filter bar input element in the Grid header, you can use the following CSS code:
+
+```css
+
+.e-grid .e-filterbarcell .e-input-group input.e-input{
+      font-family: cursive;
+}
+
+```
+In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input** class targets the input element within the cell. You can modify the `font-family` property to change the font of the filter bar input element.
+
+![Filter bar input element](../images/style-and-appearance/filter-bar-input-element.png)
+
+## Customizing the filter bar input focus
+
+To customize the appearance of the filter bar input element's focus highlight, you can use the following CSS code:
+
+```css
+
+.e-grid .e-filterbarcell .e-input-group.e-input-focus{
+      background-color: #deecf9;
+}
+
+```
+In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input-group.e-input-focus** class targets the focused input element. You can modify the `background-color` property to change the color of the focus highlight.
+
+![Filter bar input focus](../images/style-and-appearance/filter-bar-input-element-focus.png)
+
+## Customizing the filter bar input clear icon
+
+To customize the appearance of the filter bar input element's clear icon, you can use the following CSS code:
+
+```css
+
+.e-grid .e-filterbarcell .e-input-group .e-clear-icon::before {
+      content: '\e72c';
+}
+
+```
+In this example, the **.e-clear-icon** class targets the clear icon element within the input group. You can modify the `content` property to change the icon displayed.
+
+![Filter bar input clear icon](../images/style-and-appearance/filter-bar-input-clear-icon.png)
+
+## Customizing the grid filtering icon
+
+To customize the appearance of the Grid's filtering icon in the Grid header, you can use the following CSS code:
+
+```css
+
+.e-grid .e-icon-filter::before{
+      content: '\e81e';
+}
+
+```
+In this example, the **.e-icon-filter** class targets the filtering icon element. You can modify the `content` property to change the icon displayed.
+
+![Grid filtering icon](../images/style-and-appearance/grid-filtering-icon.png)
+
+## Customizing the filter dialog content
+
+To customize the appearance of the filter dialog's content element, you can use the following CSS code:
+
+```css
+
+.e-grid .e-filter-popup .e-dlg-content {
+    background-color: #deecf9;
+}
+
+```
+In this example, the **.e-filter-popup .e-dlg-content** classes target the content element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's content.
+
+![Filter dialog content](../images/style-and-appearance/filter-dialog-content.png)
+
+## Customizing the filter dialog footer
+
+To customize the appearance of the filter dialog's footer element, you can use the following CSS code:
+
+```css
+
+.e-grid .e-filter-popup .e-footer-content {
+    background-color: #deecf9;
+}
+
+```
+In this example, the **.e-filter-popup .e-footer-content** classes target the footer element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's footer.
+
+![Filter dialog footer](../images/style-and-appearance/filter-dialog-footer.png)
+
+## Customizing the filter dialog input element
+
+To customize the appearance of the filter dialog's input elements, you can use the following CSS code:
+
+```css
+
+.e-grid .e-filter-popup .e-input-group input.e-input{
+      font-family: cursive;
+}
+
+```
+In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-input** class targets the input elements within the dialog. You can modify the `font-family` property to change the font of the input elements.
+
+![Filter dialog input element](../images/style-and-appearance/filter-dialog-input-element.png)
+
+## Customizing the filter dialog button element
+
+To customize the appearance of the filter dialog's button elements, you can use the following CSS code:
+
+```css
+
+.e-grid .e-filter-popup .e-btn{
+      font-family: cursive;
+}
+
+```
+In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-btn** class targets the button elements within the dialog. You can modify the `font-family` property to change the font of the button elements.
+
+![Filter dialog button element](../images/style-and-appearance/filter-dialog-button-element.png)
+
+## Customizing the excel filter dialog number filters element
+
+To customize the appearance of the excel filter dialog's number filters, you can use the following CSS code:
+
+```css
+
+.e-grid .e-filter-popup .e-contextmenu-container ul{
+      background-color: #deecf9;
+}
+
+```
+In this example, the **.e-filter-popup .e-contextmenu-wrapper** ul classes target the number filter elements within the excel filter dialog. You can modify the `background-color` property to change the color of these elements.
+
+![Excel filter dialog number filters element](../images/style-and-appearance/excel-filter-dialog-number-filters-element.png)

blazor/datagrid/style-and-appearance/grouping.md

@@ -0,0 +1,76 @@
+---
+layout: post
+title: Grouping in Blazor DataGrid control | Syncfusion
+description: Learn here all about Grouping in Syncfusion Blazor DataGrid control of Syncfusion Essential JS 2 and more.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Grouping in Syncfusion Blazor DataGrid
+
+You can customize the appearance of grouping elements in the Syncfusion Blazor DataGrid using CSS. Here are examples of how to customize the group header, group expand/collapse icons, group caption row, and grouping indent cell.
+
+## Customizing the group header
+
+To customize the appearance of the group header element, you can use the following CSS code:
+
+```css
+.e-grid .e-groupdroparea {
+    background-color: #132f49;
+}
+
+```
+In this example, the **.e-groupdroparea** class targets the group header element. You can modify the `background-color` property to change the color of the group header.
+
+![Group header](../images/style-and-appearance/group-header.png)
+
+## Customizing the group expand or collapse icons
+
+To customize the appearance of the group expand/collapse icons in the Grid, you can use the following CSS code:
+
+```css
+.e-grid .e-icon-gdownarrow::before{
+    content:'\e7c9'
+    }
+.e-grid .e-icon-grightarrow::before{
+    content:'\e80f'
+}
+```
+
+In this example, the **.e-icon-gdownarrow** and **.e-icon-grightarrow** classes target the expand and collapse icons, respectively. You can modify the `content` property to change the icon displayed. You can use the available Syncfusion icons based on your theme.
+
+![Group expand or collapse icons](../images/style-and-appearance/group-expand-or-collapse-icons.png)
+
+## Customizing the group caption row
+
+To customize the appearance of the group caption row and the icons indicating record expansion or collapse, you can use the following CSS code:
+
+```css
+.e-grid .e-groupcaption {
+    background-color: #deecf9;
+}
+
+.e-grid .e-recordplusexpand,
+.e-grid .e-recordpluscollapse {
+    background-color: #deecf9;
+}
+```
+
+In this example, the **.e-groupcaption** class targets the group caption row element, and the **.e-recordplusexpand** and **.e-recordpluscollapse** classes target the icons indicating record expansion or collapse. You can modify the `background-color` property to change the color of these elements.
+
+![Group caption row](../images/style-and-appearance/group-caption-row.png)
+
+## Customizing the grouping indent cell
+
+To customize the appearance of the grouping indent cell element, you can use the following CSS code:
+
+```css
+.e-grid .e-indentcell {
+    background-color: #deecf9;
+}
+```
+
+In this example, the **.e-indentcell** class targets the grouping indent cell element. You can modify the `background-color` property to change the color of the indent cell.
+
+![Grouping indent cell](../images/style-and-appearance/indent-cell.png)