Skip to content

Commit 4809577

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent b086ed8 commit 4809577

File tree

15 files changed

+493
-731
lines changed

15 files changed

+493
-731
lines changed

‎docs-aspnet/accessibility/accessibility-compliance-table.html‎

Lines changed: 0 additions & 630 deletions
This file was deleted.

‎docs-aspnet/accessibility/accessibility-compliance.md‎

Lines changed: 106 additions & 1 deletion
Large diffs are not rendered by default.

‎docs-aspnet/docs-builder-mvc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ excluded-files:
168168
- "**/html-helpers/data-management/listview/binding/razor-page.md"
169169
- "**/html-helpers/media/mediaplayer/razor-page.md"
170170
- "**/html-helpers/overview-taghelpers.md"
171+
- "**/html-helpers/chartwizard/binding/razor-page.md"
171172

172173
meta:
173174
"*/accessibility":

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -984,6 +984,7 @@ The following example demonstrates the basic configuration for the Spreadsheet c
984984
| [Disabled Cells]({% slug htmlhelpers_spreadsheet_disabled_cells_aspnetcore %}) | You can control the enabled and disabled state of the cells. |
985985
| [Validation]({% slug htmlhelpers_spreadsheet_validation_aspnetcore %}) | The Spreadsheet allows you to validate if the user-provided input meets the expected requirements. |
986986
| [Custom Cell Editors]({% slug htmlhelpers_spreadsheet_custom_cell_editors_aspnetcore %}) | The component supports custom cell editors that aids users enter correct values with ease. |
987+
| [Toolbar]({% slug spreadsheet_toolbar_aspnetcore %}) | The Spreadsheet component provides the means to customize its toolbar. |
987988

988989
## Next Steps
989990

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

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
---
2+
title: Toolbar
3+
page_title: Toolbar
4+
description: "Learn how to configure the Toolbar of the Telerik UI Spreadsheet component for {{ site.framework }}."
5+
slug: spreadsheet_toolbar_aspnetcore
6+
position: 13
7+
---
8+
9+
# Toolbar
10+
11+
The Telerik {{ site.product_short }} Spreadsheet component supports a variety of options for customizing its Toolbar.
12+
In this article, you will find information about the available options and the tools that you can configure in the Toolbar of the Spreadsheet component.
13+
14+
## Options
15+
16+
The Toolbar of the Spreadsheet supports the following options:
17+
18+
* [`File`](#file)—Configures the tools displayed in the `File` tab.
19+
* [`Home`](#home)—Configures the `Home` tab of the toolbar in the component.
20+
* [`Insert`](#home)—Configures the `Insert` tab of the toolbar in the component.
21+
* [`Format`](#format)—Configures the `Format` tab of the toolbar in the component.
22+
* [`Data`](#data)—Configures the `Data` tab of the toolbar in the component.
23+
* [`View`](#view)—Configures the `View` tab of the toolbar in the component.
24+
25+
You can enable or disable each Toolbar's tab by setting its option to a boolean value.
26+
27+
### File
28+
29+
The `File` option accepts a boolean or a configuration of tools that will be available in the `File` tab in the Toolbar.
30+
31+
You can configure any of the following options in the `File` configuration:
32+
33+
* `Open`—Opens an existing spreadsheet file.
34+
* `ExportAs`—Exports the spreadsheet content in various formats.
35+
36+
The following example demonstrates how to set the `File` option in the Toolbar declaration of the Spreadsheet:
37+
38+
```HtmlHelper
39+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
40+
41+
@(Html.Kendo().Spreadsheet()
42+
.Name("spreadsheet")
43+
.Toolbar(t => t.File(f => f.Open()))
44+
)
45+
```
46+
{% if site.core %}
47+
```TagHelper
48+
@addTagHelper *, Kendo.Mvc
49+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
50+
51+
<kendo-spreadsheet name="spreadsheet">
52+
<toolbar>
53+
<file><tool name="open"></tool></file>
54+
</toolbar>
55+
</kendo-spreadsheet>
56+
```
57+
{% endif %}
58+
59+
### Home
60+
61+
The `Home` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.
62+
63+
You can configure any of the following options in the `Home` configuration:
64+
65+
* `Cut`&mdash;Cuts the selected content.
66+
* `Copy`&mdash;Copies the selected content.
67+
* `Paste`&mdash;Pastes copied content.
68+
* `Bold`&mdash;Makes text bold.
69+
* `Italic`&mdash;Makes text italic.
70+
* `Underline`&mdash;Underlines text.
71+
* `BackgroundColor`&mdash;Changes the background color of selected cells.
72+
* `TextColor`&mdash;Changes the text color.
73+
* `Borders`&mdash;Applies borders to cells.
74+
* `FontSize`&mdash;Changes the font size.
75+
* `FontFamily`&mdash;Changes the font family.
76+
* `Alignment`&mdash;Aligns cell content.
77+
* `TextWrap`&mdash;Wraps text within a cell.
78+
79+
The following example demonstrates how to set the Home option in the toolbar declaration of the Spreadsheet:
80+
81+
```HtmlHelper
82+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
83+
84+
@(Html.Kendo().Spreadsheet()
85+
.Name("spreadsheet")
86+
.Toolbar(t => t.Home(h => h.Italic()))
87+
)
88+
```
89+
{% if site.core %}
90+
```TagHelper
91+
@addTagHelper *, Kendo.Mvc
92+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
93+
94+
<kendo-spreadsheet name="spreadsheet">
95+
<toolbar>
96+
<home><tool name="italic"></tool></home>
97+
</toolbar>
98+
</kendo-spreadsheet>
99+
```
100+
{% endif %}
101+
102+
### Insert
103+
104+
The `Insert` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.
105+
106+
You can configure any of the following options in the `Insert` configuration:
107+
108+
* `InsertComment`&mdash;Adds a comment to a cell.
109+
* `Hyperlink`&mdash;Inserts a hyperlink.
110+
* `InsertImage`&mdash;Inserts an image.
111+
* `AddColumnLeft`&mdash;Adds a column to the left of the selected column.
112+
* `AddColumnRight`&mdash;Adds a column to the right of the selected column.
113+
* `AddRowBelow`&mdash;Adds a row below the selected row.
114+
* `AddRowAbove`&mdash;Adds a row above the selected row.
115+
* `DeleteColumn`&mdash;Deletes the selected column.
116+
* `DeleteRow`&mdash;Deletes the selected row.
117+
118+
The following example demonstrates how to set the Insert option in the toolbar declaration of the Spreadsheet:
119+
120+
```HtmlHelper
121+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
122+
123+
@(Html.Kendo().Spreadsheet()
124+
.Name("spreadsheet")
125+
.Toolbar(t => t.Insert(i => i.DeleteRow()))
126+
)
127+
```
128+
{% if site.core %}
129+
```TagHelper
130+
@addTagHelper *, Kendo.Mvc
131+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
132+
133+
<kendo-spreadsheet name="spreadsheet">
134+
<toolbar>
135+
<insert><tool name="deleteRow"></tool></insert>
136+
</toolbar>
137+
</kendo-spreadsheet>
138+
```
139+
{% endif %}
140+
141+
### Format
142+
143+
The `Format` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.
144+
145+
You can configure any of the following options in the `Format` configuration:
146+
147+
* `Format`&mdash;Applies a predefined number format.
148+
* `FormatDecreaseDecimal`&mdash;Decreases the number of decimal places.
149+
* `FormatIncreaseDecimal`&mdash;Increases the number of decimal places.
150+
151+
The following example demonstrates how to set the Format option in the toolbar declaration of the Spreadsheet:
152+
153+
```HtmlHelper
154+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
155+
156+
@(Html.Kendo().Spreadsheet()
157+
.Name("spreadsheet")
158+
.Toolbar(t => t.Format(f => f.Format()))
159+
)
160+
```
161+
{% if site.core %}
162+
```TagHelper
163+
@addTagHelper *, Kendo.Mvc
164+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
165+
166+
<kendo-spreadsheet name="spreadsheet">
167+
<toolbar>
168+
<format><tool name="format"></tool></format>
169+
</toolbar>
170+
</kendo-spreadsheet>
171+
```
172+
{% endif %}
173+
174+
### Data
175+
176+
The `Data` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.
177+
178+
You can configure any of the following options in the `Data` configuration:
179+
180+
* `Sort`&mdash;Sorts the selected data.
181+
* `Filter`&mdash;Applies a filter to the data.
182+
* `Validation`&mdash;Defines data validation rules.
183+
184+
The following example demonstrates how to set the Data option in the toolbar declaration of the Spreadsheet:
185+
186+
```HtmlHelper
187+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
188+
189+
@(Html.Kendo().Spreadsheet()
190+
.Name("spreadsheet")
191+
.Toolbar(t => t.Data(d => d.Sort()))
192+
)
193+
```
194+
{% if site.core %}
195+
```TagHelper
196+
@addTagHelper *, Kendo.Mvc
197+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
198+
199+
<kendo-spreadsheet name="spreadsheet">
200+
<toolbar>
201+
<data><tool name="sort"></tool></data>
202+
</toolbar>
203+
</kendo-spreadsheet>
204+
```
205+
{% endif %}
206+
207+
### View
208+
209+
The `View` option receives a boolean or a configuration of tools that will be available in the Spreadsheet for this option.
210+
211+
You can configure any of the following options in the `View` configuration:
212+
213+
* `Freeze`&mdash;Freezes rows or columns to keep them visible while scrolling.
214+
* `Merge`&mdash;Merges selected cells.
215+
* `ToggleGridlines`&mdash;Shows or hides gridlines.
216+
217+
The following example demonstrates how to set the View option in the toolbar declaration of the Spreadsheet:
218+
219+
```HtmlHelper
220+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
221+
222+
@(Html.Kendo().Spreadsheet()
223+
.Name("spreadsheet")
224+
.Toolbar(t => t.View(v => v.Merge()))
225+
)
226+
```
227+
{% if site.core %}
228+
```TagHelper
229+
@addTagHelper *, Kendo.Mvc
230+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
231+
232+
<kendo-spreadsheet name="spreadsheet">
233+
<toolbar>
234+
<view><tool name="merge"></tool></view>
235+
</toolbar>
236+
</kendo-spreadsheet>
237+
```
238+
{% endif %}
239+
240+
### Grouping
241+
242+
Every option of the ToolBar can implement the configurations as a group. The following example demonstrates how to set a group of configurations for an option:
243+
244+
```HtmlHelper
245+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
246+
247+
@(Html.Kendo().Spreadsheet()
248+
.Name("spreadsheet")
249+
.Toolbar(toolbar => toolbar
250+
.Insert(home => home
251+
.Group(group =>
252+
{
253+
group.Bold();
254+
group.Italic();
255+
group.Underline();
256+
})
257+
)
258+
)
259+
)
260+
```
261+
{% if site.core %}
262+
```TagHelper
263+
@addTagHelper *, Kendo.Mvc
264+
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
265+
266+
<kendo-spreadsheet name="spreadsheet">
267+
<toolbar>
268+
<insert enabled="true">
269+
<group>
270+
<tool name="bold" />
271+
<tool name="italic" />
272+
<tool name="underline" />
273+
</group>
274+
</insert>
275+
</toolbar>
276+
</kendo-spreadsheet>
277+
```
278+
{% endif %}
279+
280+
281+
## See Also
282+
283+
* [Basic Usage of the Spreadsheet HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/spreadsheet/index)
284+
* [API Reference of the Spreadsheet HtmlHelper for {{ site.framework }}](/api/spreadsheet)
285+
{% if site.core %}
286+
* [API Reference of the Spreadsheet TagHelper for {{ site.framework }}](/api/taghelpers/spreadsheet)
287+
{% endif %}
288+
289+
290+
291+
292+
293+

‎docs-aspnet/html-helpers/editors/otpinput/adaptiveness.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ The following example demonstrates how to configure the most appropriate on-scre
3030
@addTagHelper *, Kendo.Mvc
3131
3232
<kendo-otpinput name="otp"
33-
items="5"
34-
input-mode="text">
33+
items="5"
34+
input-mode="text">
3535
</kendo-otpinput>
3636
```
3737
{% endif %}

0 commit comments

Comments
 (0)