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
Copy file name to clipboardExpand all lines: docs-aspnet/html-helpers/data-management/grid/toolbar.md
+89-88Lines changed: 89 additions & 88 deletions
Original file line number
Diff line number
Diff line change
@@ -94,9 +94,95 @@ The following example demonstrates how to add a custom command to the Toolbar:
94
94
```
95
95
{% endif %}
96
96
97
-
As of {{site.product}} R3 2023 SP1 you can use the [Template component]({% slug htmlhelpers_overview_template %}) to define custom ToolBar commands, alongside the default ToolBar commands.
98
97
99
-
The following example demonstrates how you can add a Button and DropDownList components to the Grid's Toolbar, along with a default `Excel` command:
98
+
## Toolbar Template
99
+
100
+
The {{site.product}} Grid also supports using a template for the Toolbar. You can define a template by using the [`ClientTemplate()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#clienttemplatesystemstring) or the [`ClientTemplateid()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#clienttemplateidsystemstring) configuration options.{% if site.core %} For TagHelper Grid configuration use the `client-template` or `client-template-id` properties.
When you use a Toolbar Template, and you also want to use a built-in command, then add the markup for the desired command. The following example demonstrates how to add the `Pdf` and `Search` commands to the Toolbar Template.
As of {{site.product}} `R3 2023 SP1` release you can use the [Template component]({% slug htmlhelpers_overview_template %}) to define custom ToolBar commands, alongside the default ToolBar commands.
184
+
185
+
The following example demonstrates how you can add a Button and DropDownList components to the Grid's Toolbar, along with a default `Excel` command demonstrated in the [{{site.product}} Grid Toolbar Template Demo](https://demos.telerik.com/{{site.platform}}/grid/toolbar-template).
@@ -186,95 +272,10 @@ The following example demonstrates how you can add a Button and DropDownList com
186
272
</script>
187
273
```
188
274
189
-
## Toolbar Template
190
-
191
-
The {{site.product}} Grid also supports using a template for the Toolbar. You can define a template by using the [`ClientTemplate()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#clienttemplatesystemstring) or the [`ClientTemplateid()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#clienttemplateidsystemstring) configuration options.{% if site.core %} For TagHelper Grid configuration use the `client-template` or `client-template-id` properties.
When you use a Toolbar Template, and you also want to use a built-in command, then add the markup for the desired command. The following example demonstrates how to add the `Pdf` and `Search` commands to the Toolbar Template demonstrated in the [{{site.product}} Grid Toolbar Template Demo](https://demos.telerik.com/{{site.platform}}/grid/toolbar-template).
Rendering of the Toolbar on the server is supported via the [`.Template()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#templatesystemaction) configuration. The following example demonstrates how to define a server-side ToolBar Template:
278
+
Rendering of the Toolbar on the server is supported by using the [`.Template()`](/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#templatesystemaction) configuration. The following example demonstrates how to define a server-side ToolBar Template.
I would like to customize the pagination drop-down in the {{ site.product }} Grid Grid footer to load all pages by default. How can I achieve this?
19
+
20
+
## Solution
21
+
To customize the pagination drop-down in the {{ site.product }} Grid Grid footer to load all pages by default, follow these steps:
22
+
23
+
1. Hide the default pager by adding the following CSS code:
24
+
25
+
```css
26
+
.k-grid-pager {
27
+
display: none;
28
+
}
29
+
```
30
+
31
+
2. Implement a custom div element that will serve as the custom pager. For example:
32
+
33
+
```html
34
+
<divid="customPager"></div>
35
+
```
36
+
37
+
3. In the [`document.ready`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/datasource) scope, retrieve the [`dataSource`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/datasource) instance of the {{ site.product }} Grid Grid.
38
+
39
+
4. Handle the [`dataBound`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound) Event of the Grid.
40
+
41
+
5. In the Event handler, Use the [`totalPages`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/totalpages) method of the `dataSource` to get the page count of the Grid.
42
+
43
+
6. Implement a DropDownList using the custom div element from step 2, with items ranging from 1 to the page count obtained in step 4.
44
+
45
+
7. Attach a [`change`](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/change) event handler to the DropDownList.
46
+
47
+
8. In the event handler, retrieve the current value of the DropDownList and set it as the current page of the Grid using the [`page`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page) method of the `dataSource`.
48
+
49
+
Here is an example implementation:
50
+
51
+
```html
52
+
<!-- Custom div element for our pager and hiding the default one -->
53
+
<divid="customPager"></div>
54
+
55
+
<style>
56
+
.k-grid-pager {
57
+
display: none;
58
+
}
59
+
</style>
60
+
61
+
<script>
62
+
$(document).ready(function () {
63
+
var grid =$("#grid").data("kendoGrid");
64
+
65
+
// Attach an event handler to the dataBound event
66
+
grid.bind("dataBound", function(e) {
67
+
var pages =e.sender.dataSource.totalPages();
68
+
var ddlData = [];
69
+
70
+
for (var i =1; i <= pages; i++) {
71
+
ddlData.push(i);
72
+
}
73
+
74
+
// Check if the dropdown is already initialized to avoid re-initializing
75
+
var customPager =$("#customPager").data("kendoDropDownList");
0 commit comments