You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Paging customization in Blazor DataGrid | Syncfusion
4
-
description: Learn here all about paging in Syncfusion Blazor DataGrid and more.
3
+
title: Pager styling and customization in Blazor DataGrid | Syncfusion
4
+
description: Learn how to style the Syncfusion Blazor DataGrid pager using CSS—customize container, buttons, numeric items, and page indicator.
5
5
platform: Blazor
6
6
control: DataGrid
7
7
documentation: ug
8
8
---
9
9
10
-
# Paging in Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid
10
+
# Paging customization in Syncfusion Blazor DataGrid
11
11
12
-
You can customize the appearance of the paging elements in the Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid using CSS. Here are examples of how to customize the pager root element, pager container element, pager navigation elements, pager page numeric link elements, and pager current page numeric element.
12
+
The appearance of paging elements in the Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the pager interface:
13
13
14
-
## Customizing the Blazor DataGrid pager root element
14
+
-**Root container:** The outermost wrapper that holds all pager content.
15
+
-**Pager container:** The inner layout that positions the controls.
16
+
-**Navigation buttons:** Commands for first, previous, next, and last page navigation.
17
+
-**Numeric page indicators:** Indicators that jump directly to specific pages.
18
+
-**Current page indicator:** The highlight that marks the active numeric page button.
15
19
16
-
To customize the appearance of the Grid pager root element, you can use the following CSS code:
20
+
## Customize the pager root element
21
+
22
+
The **.e-gridpager** class styles the pager root element in the Blazor DataGrid. Use CSS to adjust its appearance:
17
23
18
24
```css
19
25
.e-grid.e-gridpager {
20
26
font-family: cursive;
21
27
background-color: #deecf9;
22
28
}
23
29
```
24
-
In this example, the **.e-gridpager** class targets the pager root element. You can modify the `font-family` to change the font family and `background-color` property to change the background color of the pager.
## Customizing the Blazor DataGrid pager container element
35
+
## Customize the pager container element
29
36
30
-
To customize the appearance of the Grid pager container element, you can use the following CSS code:
37
+
The **.e-pagercontainer** class styles the pager container in the Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid. Apply CSS to modify its look:
31
38
32
39
```css
33
40
.e-grid.e-pagercontainer {
@@ -36,13 +43,13 @@ To customize the appearance of the Grid pager container element, you can use the
36
43
}
37
44
```
38
45
39
-
In this example, the **.e-pagercontainer** class targets the pager container element. You can modify the `border` property and `font-family` property to change the border color and font family of the pager container.
46
+
Properties such as **font-family**, **background-color**, and spacing-related styles can be adjusted to align with the grid design.
## Customizing the Blazor DataGrid pager navigation elements
50
+
## Customize the pager navigation elements
44
51
45
-
To customize the appearance of the Grid pager navigation elements, you can use the following CSS code:
52
+
The **.e-prevpagedisabled**, **.e-prevpage**, **.e-nextpage**, **.e-nextpagedisabled**, **.e-lastpagedisabled**, **.e-lastpage**, **.e-firstpage**, and **.e-firstpagedisabled** classes define the appearance of the pager navigation buttons in the Blazor DataGrid. Apply CSS to customize their styling:
46
53
47
54
```css
48
55
.e-grid.e-gridpager.e-prevpagedisabled,
@@ -57,34 +64,34 @@ To customize the appearance of the Grid pager navigation elements, you can use t
57
64
}
58
65
```
59
66
60
-
In this example, the classes **.e-prevpagedisabled, .e-prevpage, .e-nextpage, .e-nextpagedisabled, .e-lastpagedisabled, .e-lastpage, .e-firstpage,**and **.e-firstpagedisabled** target the various pager navigation elements. You can modify the `background-color` property to change the background color of these elements.
67
+
Adjust properties like **background-color**to match the design, while keeping clear focus styles for accessibility.
## Customizing the Blazor DataGrid pager page numeric link elements
71
+
## Customize the pager numeric button elements
65
72
66
-
To customize the appearance of the Grid pager current page numeric link elements, you can use the following CSS code:
73
+
The **.e-numericitem** class styles the numeric page buttons in the Blazor DataGrid. Apply CSS to change their appearance:
67
74
68
75
```css
69
76
.e-grid.e-gridpager.e-numericitem {
70
77
background-color: #5290cb;
71
78
color: #ffffff;
72
79
cursor: pointer;
73
-
}
74
-
80
+
}
81
+
75
82
.e-grid.e-gridpager.e-numericitem:hover {
76
83
background-color: white;
77
-
color: #007bff;
84
+
color: #007bff;
78
85
}
79
86
```
80
87
81
-
In this example, the**.e-numericitem** class targets the page numeric link elements. You can modify the `background-color`, `color` properties to change the background color and text color of these elements.
88
+
Modify properties such as**background-color**, **color**, and **hover** effects to improve clarity and interaction.
82
89
83
-
## Customizing the Blazor DataGrid pager current page numeric element
92
+
## Customize the current page numeric element
86
93
87
-
To customize the appearance of the Grid pager current page numeric element, you can use the following CSS code:
94
+
The **.e-currentitem** class styles the current page indicator in the Blazor DataGrid pager. Use CSS to adjust it:
88
95
89
96
```css
90
97
.e-grid.e-gridpager.e-currentitem {
@@ -93,9 +100,9 @@ To customize the appearance of the Grid pager current page numeric element, you
93
100
}
94
101
```
95
102
96
-
In this example, the **.e-currentitem**class targets the current page numeric item. You can modify the `background-color` property to change the background color of this element and `color` property to change the text color.
103
+
Change properties like **background-color** and **color**to highlight the active page.
97
104
98
-
0 commit comments