Skip to content

Commit 026eb32

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent c9c89ac commit 026eb32

File tree

7 files changed

+400
-2
lines changed

7 files changed

+400
-2
lines changed

‎docs-aspnet/html-helpers/data-management/grid/toolbar.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,52 @@ In the 2025 Q2 release an alternative way to configure the tools has been implem
8080
| Spacer | Moves the tools that are declared after it to the right side of the ToolBar.| |
8181
| Separator | Acts as a delimiter between the ToolBar commands.| |
8282

83+
### Overflow
84+
85+
The built-in Toolbar provides properties for customizing its overflow behavior and appearance.
86+
87+
The following example demonstrates how to modify the default overflow settings of the Toolbar through the `Oveflow()` configuration.
88+
89+
```Razor
90+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
91+
.Name("grid")
92+
.ToolBar(t => t.Items(item =>
93+
{
94+
item.Pdf();
95+
item.Excel();
96+
item.Custom().Text("Custom Button 1");
97+
item.Custom().Text("Custom Button 2");
98+
item.Custom().Text("Custom Button 3");
99+
item.Search();
100+
})
101+
.Overflow(o => o
102+
.Mode(ToolBarOverflowMode.Scroll)
103+
.ScrollButtons(ScrollButtonsType.Auto)
104+
.ScrollButtonsPosition(ScrollButtonsPositionType.Start)
105+
.ScrollDistance(50))
106+
)
107+
... // Additional configuration.
108+
)
109+
```
110+
{% if site.core %}
111+
```TagHelper
112+
<kendo-grid name="grid">
113+
<toolbar>
114+
<toolbar-button name="pdf"></toolbar-button>
115+
<toolbar-button name="excel"></toolbar-button>
116+
<toolbar-button name="custom" text="Custom Button 1"></toolbar-button>
117+
<toolbar-button name="custom" text="Custom Button 2"></toolbar-button>
118+
<toolbar-button name="custom" text="Custom Button 3"></toolbar-button>
119+
<toolbar-button name="Search"></toolbar-button>
120+
<overflow mode="ToolBarOverflowMode.Scroll" scroll-buttons="ScrollButtonsType.Auto" scroll-buttons-position="ScrollButtonsPositionType.Start" scroll-distance="50" />
121+
</toolbar>
122+
<!-- Additional configuration. -->
123+
</kendo-grid>
124+
```
125+
{% endif %}
126+
127+
For more information on the available overflow options, refer to the [Appearance documentation of the ToolBar component]({% slug toolbar_appearance %}).
128+
83129
## Disable Inactive Tools
84130

85131
Starting with 2025 Q2 release the Grid component provides the possibility to disable or hide the inactive tools when editing. By default the inactive tools will be hidden. When the `ToolBar.ShowInactiveTools` option is enabled the inactive tools will be displayed as disabled.

‎docs-aspnet/html-helpers/data-management/propertygrid/overview.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,105 @@ The PropertyGrid provides a variety of options for the items configuration, tool
191191
}
192192
```
193193

194+
## Toolbar
195+
196+
The [`Toolbar()`](/api/kendo.mvc.ui.fluent/propertygridtoolbarfactory) configuration option of the PropertyGrid allows you to add command buttons and allow the user to invoke built-in PropertyGrid functionalities. You can also define custom commands or use templates to customize the Toolbar of the {{ site.product }} PropertyGrid.
197+
198+
### Built-In Commands
199+
200+
You can configure the Toolbar and include any of the built-in commands:
201+
202+
```HtmlHelper
203+
.Toolbar(t =>
204+
{
205+
t.Group();
206+
t.Separator();
207+
t.Details();
208+
t.Search();
209+
t.Spacer();
210+
t.Sort();
211+
})
212+
```
213+
{% if site.core %}
214+
```TagHelper
215+
<toolbar>
216+
<property-grid-toolbar-button name="group"></property-grid-toolbar-button>
217+
<property-grid-toolbar-button name="details"></property-grid-toolbar-button>
218+
<property-grid-toolbar-button name="search"></property-grid-toolbar-button>
219+
<property-grid-toolbar-button name="sort"></property-grid-toolbar-button>
220+
<property-grid-toolbar-button name="seperator" type="separator"></property-grid-toolbar-button>
221+
<property-grid-toolbar-button name="spacer" type="spacer"></property-grid-toolbar-button>
222+
</toolbar>
223+
```
224+
{% endif %}
225+
226+
Starting with version 2025 Q2, an alternative way to configure the tools of the PropertyGrid{% if site.core %} HtmlHelper{% endif %} is to use the `Items()` configuration of the Toolbar:
227+
228+
```HtmlHelper
229+
.Toolbar(toolbar =>toolbar
230+
.Items(item=>{
231+
item.Group();
232+
item.Separator();
233+
item.Details();
234+
item.Search();
235+
item.Spacer();
236+
item.Sort();
237+
})
238+
.Overflow(overflow => overflow
239+
.Mode(ToolBarOverflowMode.Scroll)
240+
.ScrollButtons(ScrollButtonsType.Visible)
241+
.ScrollButtonsPosition(ScrollButtonsPositionType.Split)
242+
)
243+
)
244+
```
245+
246+
| Command | Description |
247+
|---|---|
248+
| Group | Adds a toggle button to show the items in Groups or a List.|
249+
| Details | Adds an info button for additional details.|
250+
| Sort | Adds a DropDownList to control the order of the items.|
251+
| Search | Adds a built-in Search input for the PropertyGrid.|
252+
| Spacer | Moves the tools that are declared after it to the right side of the Toolbar.|
253+
| Separator | Acts as a delimiter between the Toolbar commands.|
254+
255+
#### Overview
256+
257+
The built-in Toolbar provides properties for customizing its overflow behavior and appearance.
258+
259+
The following example demonstrates how to modify the default overflow settings of the Toolbar through the `Oveflow()` configuration.
260+
261+
```Razor
262+
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
263+
.Name("propertyGrid")
264+
.Toolbar(t => t.Items(item =>
265+
{
266+
item.Spacer();
267+
item.Search();
268+
})
269+
.Overflow(o => o
270+
.Mode(ToolBarOverflowMode.Scroll)
271+
.ScrollButtons(ScrollButtonsType.Auto)
272+
.ScrollButtonsPosition(ScrollButtonsPositionType.Start)
273+
.ScrollDistance(50))
274+
)
275+
... // Additional configuration.
276+
)
277+
```
278+
{% if site.core %}
279+
```TagHelper
280+
<kendo-propertygrid name="propertyGrid">
281+
<toolbar>
282+
<property-grid-toolbar-button name="spacer" type="spacer"></property-grid-toolbar-button>
283+
<property-grid-toolbar-button name="search"></property-grid-toolbar-button>
284+
<overflow mode="ToolBarOverflowMode.Scroll" scroll-buttons="ScrollButtonsType.Auto" scroll-buttons-position="ScrollButtonsPositionType.Start" scroll-distance="50" />
285+
</toolbar>
286+
<!-- Additional configuration. -->
287+
</kendo-propertygrid>
288+
```
289+
{% endif %}
290+
291+
For more information on the available overflow options, refer to the [Appearance documentation of the ToolBar component]({% slug toolbar_appearance %}).
292+
194293
## Functionality and Features
195294

196295
* [Columns]({% slug htmlhelpers_columns_propertygrid %})&mdash;The PropertyGrid displays fields and values in columns.

‎docs-aspnet/html-helpers/data-management/taskboard/toolbar.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,63 @@ position: 9
1010

1111
By default, the toolbar of the TaskBoard displays the `addColumn` and the `search` tools. Default tools can be excluded, or custom tools can be added through the `Toolbar` configuration.
1212

13+
## Built-In Tools
14+
15+
You can control the number and type of the rendered tools by adding only the desired tools in the [`Items()`](/api/kendo.mvc.ui.fluent/taskboardtoolbarsettingsbuilder#itemssystemaction) configuration of the `Toolbar`.
16+
17+
The toolbar of the TaskBaord supports the following built-in tools:
18+
19+
```Razor
20+
.Toolbar(t => t.Items(items =>
21+
{
22+
items.Add().Name("addColumn");
23+
items.Add().Name("spacer").Type("spacer");
24+
items.Add().Name("search");
25+
}))
26+
```
27+
{% if site.core %}
28+
```TagHelper
29+
<toolbar>
30+
<items>
31+
<item name="addColumn"></item>
32+
<item name="spacer" type="spacer"></item>
33+
<item name="search"></item>
34+
</items>
35+
</toolbar>
36+
```
37+
{% endif %}
38+
39+
### Overflow
40+
41+
The built-in Toolbar provides properties for customizing its overflow behavior and appearance.
42+
43+
The following example demonstrates how to modify the default overflow settings of the Toolbar through the `Oveflow()` configuration.
44+
45+
```Razor
46+
@(Html.Kendo().TaskBoard()
47+
.Name("taskBoard")
48+
.Toolbar(t => t.Overflow(o => o
49+
.Mode(ToolBarOverflowMode.Scroll)
50+
.ScrollButtons(ScrollButtonsType.Auto)
51+
.ScrollButtonsPosition(ScrollButtonsPositionType.Start)
52+
.ScrollDistance(50))
53+
)
54+
... // Additional configuration.
55+
)
56+
```
57+
{% if site.core %}
58+
```TagHelper
59+
<kendo-taskboard name="taskBoard">
60+
<toolbar>
61+
<overflow mode="ToolBarOverflowMode.Scroll" scroll-buttons="ScrollButtonsType.Auto" scroll-buttons-position="ScrollButtonsPositionType.Start" scroll-distance="50" />
62+
</toolbar>
63+
<!-- Additional configuration. -->
64+
</kendo-taskboard>
65+
```
66+
{% endif %}
67+
68+
For more information on the available overflow options, refer to the [Appearance documentation of the ToolBar component]({% slug toolbar_appearance %}).
69+
1370
## Custom Tools
1471

1572
The `Toolbar Items` configuration allows you to set the desired tools that will be rendered in the toolbar of the TaskBoard.
@@ -86,6 +143,37 @@ The following example demonstrates how to add a custom tool to the toolbar.
86143
</script>
87144
```
88145

146+
## Overflow
147+
148+
The built-in Toolbar provides properties for customizing its overflow behavior and appearance.
149+
150+
The following example demonstrates how to modify the default overflow settings of the Toolbar through the `Oveflow()` configuration.
151+
152+
```Razor
153+
@(Html.Kendo().TaskBoard()
154+
.Name("taskBoard")
155+
.Toolbar(t => t.Overflow(o => o
156+
.Mode(ToolBarOverflowMode.Scroll)
157+
.ScrollButtons(ScrollButtonsType.Auto)
158+
.ScrollButtonsPosition(ScrollButtonsPositionType.Start)
159+
.ScrollDistance(50))
160+
)
161+
... // Additional configuration.
162+
)
163+
```
164+
{% if site.core %}
165+
```TagHelper
166+
<kendo-taskboard name="taskBoard">
167+
<toolbar>
168+
<overflow mode="ToolBarOverflowMode.Scroll" scroll-buttons="ScrollButtonsType.Auto" scroll-buttons-position="ScrollButtonsPositionType.Start" scroll-distance="50" />
169+
</toolbar>
170+
<!-- Additional configuration. -->
171+
</kendo-taskboard>
172+
```
173+
{% endif %}
174+
175+
For more information on the available overflow options, refer to the [Appearance documentation of the ToolBar component]({% slug toolbar_appearance %}).
176+
89177
## See Also
90178

91179
* [Overview of the TaskBoard (Demo)](https://demos.telerik.com/kendo-ui/taskboard/index)

‎docs-aspnet/html-helpers/data-management/treelist/toolbar.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,44 @@ You can configure the ToolBar and include any of the built-in commands:
5858
| Spacer | Moves the tools that are declared after it to the right side of the ToolBar.| NA|
5959
| Separator | Acts as a delimiter between the ToolBar Commands.| NA|
6060

61+
### Overflow
62+
63+
The built-in toolbar provides properties for customizing its overflow behavior and appearance.
64+
65+
The following example demonstrates how to modify the default overflow settings of the toolbar through the `Oveflow()` configuration.
66+
67+
```Razor
68+
@(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
69+
.Name("treelist")
70+
.Toolbar(t => t.Items(item =>
71+
{
72+
item.Pdf();
73+
item.Search();
74+
})
75+
.Overflow(o => o
76+
.Mode(ToolBarOverflowMode.Scroll)
77+
.ScrollButtons(ScrollButtonsType.Auto)
78+
.ScrollButtonsPosition(ScrollButtonsPositionType.Start)
79+
.ScrollDistance(50))
80+
)
81+
... // Additional configuration.
82+
)
83+
```
84+
{% if site.core %}
85+
```TagHelper
86+
<kendo-treelist name="treelist">
87+
<toolbar>
88+
<treelist-toolbar-button name="pdf" />
89+
<treelist-toolbar-button name="search" />
90+
<overflow mode="ToolBarOverflowMode.Scroll" scroll-buttons="ScrollButtonsType.Auto" scroll-buttons-position="ScrollButtonsPositionType.Start" scroll-distance="50" />
91+
</toolbar>
92+
<!-- Additional configuration. -->
93+
</kendo-treelist>
94+
```
95+
{% endif %}
96+
97+
For more information on the available overflow options, refer to the [Appearance documentation of the ToolBar component]({% slug toolbar_appearance %}).
98+
6199
## Custom Commands
62100

63101
The {{site.product}} TreeList supports adding Custom Commands to its ToolBar. The following example demonstrates how to add a Custom Command to the ToolBar:

‎docs-aspnet/html-helpers/editors/editor/tools.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -430,6 +430,37 @@ To extend the Editor with a custom tool:
430430

431431
> Note that the tool name should correspond with the registered command.
432432

433+
## Toolbar Overflow
434+
435+
When the [`Toolbar()`](/api/kendo.mvc.ui.fluent/editorresizablesettingsbuilder#toolbarsystemboolean) option of the `Resizable()` configuration is enabled, the Editor will detect changes in the viewport's width and hide the overflowing controls in the tool overflow popup. Also, you can use the `Toolbar()` properties to customize the default overflow behavior and appearance.
436+
437+
The following example demonstrates how to modify the default overflow settings of the toolbar through the `Toolbar()` configuration.
438+
439+
440+
```Razor
441+
@(Html.Kendo().Editor()
442+
.Name("editor")
443+
.Resizable(r=> r.Toolbar(t => t
444+
.Mode(ToolBarOverflowMode.Scroll)
445+
.ScrollButtons(ScrollButtonsType.Auto)
446+
.ScrollButtonsPosition(ScrollButtonsPositionType.Start)
447+
.ScrollDistance(50))
448+
)
449+
... // Additional configuration.
450+
)
451+
```
452+
{% if site.core %}
453+
```TagHelper
454+
<kendo-editor name="editor">
455+
<resizable>
456+
<toolbar mode="ToolBarOverflowMode.Scroll" scroll-buttons="ScrollButtonsType.Auto" scroll-buttons-position="ScrollButtonsPositionType.Start" scroll-distance="50" />
457+
</resizable>
458+
</kendo-editor>
459+
```
460+
{% endif %}
461+
462+
For more information on the available overflow options, refer to the [Appearance documentation of the ToolBar component]({% slug toolbar_appearance %}).
463+
433464
## See Also
434465
435466
* [Default Tools by the Editor HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/editor/all-tools)

0 commit comments

Comments
 (0)