Skip to content

Commit 08a5982

Browse files
committed
Sync with Kendo UI Professional
1 parent b9826f7 commit 08a5982

File tree

9 files changed

+147
-3
lines changed

9 files changed

+147
-3
lines changed
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Formatting Marks
3+
page_title: Formatting Marks
4+
description: "Learn about the Formatting Marks functionality of the Telerik UI Editor component for {{ site.framework }}."
5+
slug: htmlhelpers_editor_formattingmarks_aspnetcore
6+
position: 13
7+
---
8+
9+
# Formatting Marks
10+
11+
As of the `2024 Q2 Release` you can enable the **Formatting Marks** tool.
12+
13+
Formatting marks enable you to show characters that represent non-printing elements in the Editor for the following formatting functions: `Line Ending`, `Paragraph Ending`, and `Space Marks`.
14+
15+
![Telerik UI for {{ site.framework }} Editor Formatting Marks Tool](./images/formatting-marks.png)
16+
17+
## Line Ending
18+
19+
The Line Ending mark `` represents a line break within a paragraph. It allows you to break a line without starting a new paragraph. When formatting marks are visible, the line break mark is displayed as a bent arrow pointing downward.
20+
21+
## Paragraph Ending
22+
23+
The Paragraph Ending mark `` represents a paragraph break in a document. It indicates where one paragraph ends, and another begins.
24+
25+
## Space Marks
26+
27+
The Space mark `` is represented by a small raised dot. This ensures the users to not have space characters where they are not needed.
28+
29+
## Formatting Marks Refresh Delay
30+
31+
The Editor exposes a [`FormattingMarksRefreshDelay`](/api/kendo.mvc.ui.fluent/editorbuilder#formattingmarksrefreshdelaysystemdouble) configuration option allowing you to specify the delay for refreshing the formatting marks. This functionality prevents refreshing the Formatting marks on every key press and improves the Editor performance. The visual effect from this configuration is that the marks will briefly disappear while the user is typing.
32+
33+
The `FormattingMarksRefreshDelay` accepts a `boolean` value for enabling or disabling the functionality or a `number` value for a specific delay in milliseconds before the formatting marks are refreshed. You can set the value to `false` to fully turn off this behavior.
34+
35+
This feature is useful for performance optimization as the formatting marks are re-rendered any time the user presses a key. When the user is typing very fast or holding down a key, the delay will prevent the re-rendering from being executed multiple times.
36+
37+
## See Also
38+
39+
* [All Tools of the Editor HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/editor/all-tools)
40+
* [Custom Tools by the Editor HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/editor/custom-tools)
41+
* [Server-Side API](/api/editor)

docs-aspnet/html-helpers/editors/editor/globalization.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Globalization
33
page_title: Globalization
44
description: "Learn about the globalization options of the Telerik UI Editor component for {{ site.framework }}."
55
slug: htmlhelpers_editor_globalization_aspnetcore
6-
position: 14
6+
position: 15
77
---
88

99
# Globalization
9.76 KB
Loading
4.67 KB
Loading
13.1 KB
Loading
8.34 KB
Loading
144 KB
Loading

docs-aspnet/html-helpers/editors/editor/table-editing.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,19 +75,25 @@ To insert a new table by using the Table Wizard dialog:
7575
1. Click the **Create Table** tool.
7676
1. To open the dialog, click the **Table Wizard** button.
7777
1. Configure the table you want to insert.
78-
1. Click the **OK** button.
78+
1. Click the **Confirm** button.
79+
80+
![Telerik UI for {{ site.framework }} Editor Table Wizard](./images/table-wizard.png)
7981

8082
To quickly create a plain table, click the **Create Table** tool and choose the row and column dimensions.
8183

84+
![Telerik UI for {{ site.framework }} Editor Create Table Tool](./images/table-wizard-open.png)
85+
8286
## Editing a Table
8387

8488
To modify an existing table or a table cell:
8589

8690
1. Select the table or the table cell to edit.
87-
1. Click the Table Wizard tool in the toolbar.
91+
1. Click the **Table Properties** or **Cell Properties** tool in the toolbar.
8892

8993
> You can resize the table rows and columns by dragging the cell border with the mouse and without using the Table Wizard dialog.
9094
95+
![Telerik UI for {{ site.framework }} Editor Table Editing](./images/table-wizard-edit.png)
96+
9197
The table and cell options that are available in the **Table Wizard** are displayed in the following three tabs:
9298

9399
* [**Table**](#table-tab)—The available options for the table element.
@@ -108,6 +114,8 @@ The **Table** tab provides the following options:
108114
* **Rows**—Defines the rows of the table.
109115
* **Cell Spacing**—Specifies the space between the cells ([`cellspacing` attribute](http://www.w3schools.com/tags/att_table_cellspacing.asp)).
110116
* **Cell Padding**—Specifies the padding in the cells ([`cellpadding` attribute](http://www.w3schools.com/tags/att_table_cellpadding.asp)).
117+
* **Independent Cell Paddings** (available as of the `2024 Q2` release)—Specifies individual padding in the cells for `top`, `right`, `bottom` and `left`.
118+
![Independent Table Paddings](./images/cell-paddings.png)
111119
* **Alignment**—Specifies the text alignment in the cells.
112120
* **Background**—Specifies the background color of the table.
113121
* **CSS Class**—Defines the class names for the table element (white space-separated).
@@ -125,6 +133,8 @@ The **Cell** tab provides the following options:
125133
* **Height**—Changes the height of the cell or cells (in pixels, em, or percent).
126134
* **Cell Margin**—Defines the margin of the cell or cells.
127135
* **Cell Padding**—Defines the padding of the cell or cells.
136+
* **Independent Cell Paddings** (available as of the `2024 Q2` release)—Specifies individual padding in the cells for `top`, `right`, `bottom` and `left`.
137+
![Independent Table Paddings](./images/cell-paddings.png)
128138
* **Alignment**—Specifies the text alignment of the cell or cells.
129139
* **Background**—Specifies the background color of the cell or cells.
130140
* **CSS Class**—Defines class names for the cells (white space-separated).
Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
title: Making the Wizard Stepper Stick to the Top of the Page
3+
description: Learn how to make the stepper in the Wizard component stick to the top of the page when scrolling.
4+
type: how-to
5+
page_title: Making the Wizard Stepper Stick to the Top of the Page
6+
slug: making-wizard-stepper-stick-top-page
7+
tags: wizard, stepper, stick, top, scrolling
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
| Property | Value |
13+
| --- | --- |
14+
| Product | Wizard for {{ site.framework }} |
15+
| Version | 2023.3.1114 |
16+
17+
## Description
18+
I want to make the stepper in the Wizard for {{ site.framework }} component stick to the top of the page when scrolling, as some forms can be quite long.
19+
20+
## Solution
21+
To achieve this, follow these steps:
22+
23+
1. Add an empty `<span>` element with a unique ID above the Wizard component:
24+
25+
```html
26+
<span id="customWrapper"></span>
27+
```
28+
29+
2. In the JavaScript code, detach the stepper element and append it to the empty `<span>` element:
30+
31+
```javascript
32+
$(document).ready(function () {
33+
var stepper = $('.k-stepper').detach();
34+
$("#customWrapper").append(stepper);
35+
$('.k-stepper').data("kendoStepper").setOptions({});
36+
});
37+
```
38+
39+
3. Apply CSS to make the custom `<span>` element sticky and visible at the top:
40+
41+
```css
42+
#customWrapper {
43+
position: sticky;
44+
top: 0;
45+
z-index: 100;
46+
}
47+
```
48+
49+
4. (Optional) If you want to add a background color to the stepper, use the `.k-stepper` CSS class selector:
50+
51+
```css
52+
.k-stepper {
53+
background-color: green;
54+
}
55+
```
56+
57+
## More {{ site.framework }} TextBox Resources
58+
59+
* [REPL example for the approach above with HtmlHelper](https://netcorerepl.telerik.com/QeYovAFb10D2Gvrm14)
60+
{% if site.core %}
61+
* [REPL example for the approach above with TagHelper](https://netcorerepl.telerik.com/GSkyvKbv51mek2L729)
62+
{% endif %}
63+
64+
* [{{ site.framework }} Wizard Documentation]({%slug htmlhelpers_wizard_aspnetcore_overview%})
65+
66+
* [{{ site.framework }} Wizard Demos](https://demos.telerik.com/{{ site.platform }}/wizard)
67+
68+
{% if site.core %}
69+
* [{{ site.framework }} Wizard Product Page](https://www.telerik.com/aspnet-core-ui/wizard)
70+
71+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
72+
73+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
74+
75+
{% else %}
76+
* [{{ site.framework }} Wizard Product Page](https://www.telerik.com/aspnet-mvc/wizard)
77+
78+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
79+
80+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
81+
{% endif %}
82+
83+
## See Also
84+
85+
* [Client-Side API Reference of the Wizard for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/wizard)
86+
* [Server-Side API Reference of the Wizard for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/wizard)
87+
{% if site.core %}
88+
* [Server-Side API TagHelper Reference of the Wizard for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/wizard)
89+
{% endif %}
90+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
91+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)
92+
93+

0 commit comments

Comments
 (0)