Skip to content

Commit 61b47e0

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent be6b133 commit 61b47e0

File tree

9 files changed

+185
-56
lines changed

9 files changed

+185
-56
lines changed

‎docs-aspnet/_config.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -611,10 +611,10 @@ navigation:
611611
baseurl: /aspnet-core
612612

613613
## The Kendo UI version used
614-
cdnVersion: "2020.3.1118"
614+
cdnVersion: "2021.1.119"
615615

616616
## The MVC Core version used
617-
mvcCoreVersion: "2020.3.1118"
617+
mvcCoreVersion: "2021.1.119"
618618

619619
ff-sheet-id: 1mottKpkbJFxkUq6rS3CsPrT8JQOE2JlUtsJBR622cxs
620620

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,12 @@
128128
<td>AAA</td>
129129
<td><a href="https://demos.telerik.com/aspnet-core/filemanager/keyboard-navigation">Yes</a></td>
130130
</tr>
131+
<tr>
132+
<td>FloatingActionButton</td>
133+
<td>Yes</td>
134+
<td>AAA</td>
135+
<td><a href="https://demos.telerik.com/aspnet-core/floatingactionbutton/keyboard-navigation">Yes</a></td>
136+
</tr>
131137
<tr>
132138
<td>Form</td>
133139
<td>Yes</td>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,12 @@
134134
<td>AAA</td>
135135
<td><a href="https://demos.telerik.com/aspnet-mvc/filemanager/keyboard-navigation">Yes</a></td>
136136
</tr>
137+
<tr>
138+
<td>FloatingActionButton</td>
139+
<td>Yes</td>
140+
<td>AAA</td>
141+
<td><a href="https://demos.telerik.com/aspnet-mvc/floatingactionbutton/keyboard-navigation">Yes</a></td>
142+
</tr>
137143
<tr>
138144
<td>Form</td>
139145
<td>Yes</td>

‎docs-aspnet/html-helpers/layout/form/razor-page.md‎

Lines changed: 162 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,84 +10,196 @@ position: 7
1010

1111
This article describes how to configure the Telerik UI Form HtmlHelper for {{ site.framework }} in a RazorPage scenario.
1212

13-
When a complex model is used, which is the case with the Razor Page scenario, the Form needs to have the FormData configuration set. As the Form makes a POST request antiforgery token needs to be added. This can be achieved, for example, by setting the request headers in the ajax beforeSend configuration option.
13+
When a complex model is used, which is the case with the Razor Page scenario, the Form needs to have the FormData configuration set. As the Form makes a POST request antiforgery token needs to be added. This can be achieved, for example, by appending a hidden input to the Form.
14+
15+
## Standard Form Submit
16+
17+
By default, when the View containing the Form is loaded, clicking on the Submit button will fire the client-side validation of the Form component. Once all of the Form fields are filled and the user clicks on the Submit button the form will be submitted and the page will reload to display the server validation messages from the page model, if any.
1418

1519
See the implementation details in the example below, and for the full project with RazorPages examples, visit our [GitHub repository](https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Telerik.Examples.RazorPages).
1620

1721
```tab-RazorPage(csthml)
1822
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
19-
@Html.AntiForgeryToken()
23+
@{
24+
var token = Xsrf.GetAndStoreTokens(HttpContext).RequestToken;
25+
}
2026
2127
@(Html.Kendo().Form<OrderViewModel>()
22-
.Name("formExample")
23-
.FormData(Model.Order)
24-
.Layout("grid")
25-
.Grid(g => g.Cols(2).Gutter(20))
26-
.HtmlAttributes(new { url = @Url.Page("FormIndex", "Submit"), method = "POST" })
27-
.Validatable(v =>
28-
{
29-
v.ValidateOnBlur(true);
30-
})
31-
.Items(items =>
32-
{
33-
items.Add()
34-
.Field(f => f.ShipName)
35-
.Label(l => l.Text("Ship Name:"));
36-
items.Add()
37-
.Field(f => f.ShipCity)
38-
.Label(l => l.Text("Ship City"));
39-
items.Add()
40-
.Field(f => f.OrderDate)
41-
.Editor(e => e.DatePicker())
42-
.Label(l => l.Text("Order Date:"));
43-
items.Add()
44-
.Field(f => f.Freight)
45-
.Editor(e => e.NumericTextBox())
46-
.Label(l => l.Text("Freight:"));
47-
})
48-
.Events(ev => ev.Submit("onFormSubmit"))
49-
)
28+
.Name("formExample")
29+
.FormData(Model.Order)
30+
.Layout("grid")
31+
.Grid(g => g.Cols(2).Gutter(20))
32+
.HtmlAttributes(new { method = "POST" })
33+
.Validatable(v =>
34+
{
35+
v.ValidateOnBlur(false);
36+
v.ValidationSummary(true);
37+
v.ErrorTemplate("<span style='color: red'>#:message#</span>");
38+
})
39+
.Items(items =>
40+
{
41+
items.Add()
42+
.Field(f => f.ShipName)
43+
.Label(l => l.Text("Ship Name:"));
44+
items.Add()
45+
.Field(f => f.ShipCity)
46+
.Label(l => l.Text("Ship City"));
47+
items.Add()
48+
.Field(f => f.OrderDate)
49+
.Editor(e => e.DatePicker())
50+
.Label(l => l.Text("Order Date:"));
51+
items.Add()
52+
.Field(f => f.Freight)
53+
.Editor(e => e.NumericTextBox())
54+
.Label(l => l.Text("Freight:"));
55+
})
56+
)
5057
5158
<script>
52-
function forgeryToken() {
53-
return kendo.antiForgeryTokens();
59+
$("#formExample").append($("<input type='hidden' name='__RequestVerificationToken' value='@token' data-stop='true' />"))
60+
</script>
61+
```
62+
```tab-PageModel(cshtml.cs)
63+
public IActionResult OnPost()
64+
{
65+
var model = Request.Form;
66+
67+
if (!ModelState.IsValid)
68+
{
69+
return Page();
70+
}
71+
72+
return RedirectToPage("Success");
73+
5474
}
75+
```
5576

56-
function onFormSubmit(e) {
57-
e.preventDefault();
77+
## Submitting the Form with Ajax
78+
79+
When the Form is submitted with ajax, the default submit event of the component is prevented, thus forcing the manual implementation of the submit behavior. In this case, an ajax request is sent to a specific end-point on Submit click, without reloading the page and client-side validation will work as expected. However, for server validation, as the page is not reloaded and the page model data is not changed, the Telerik Validator attached to the Form has no way of knowing what the server response is. For this reason, the ajax request callback can be used to notify the user of the status of the server validation. If the server end-point is returning validation errors related to the Form fields the error callback can be used to iterate over the response errors and create a visual representation in the UI. In a similar way the success callback can be used to notify the user of a succesful Form submission.
80+
81+
See the implementation details in the example below, where the JSON errors are appended to the validation summary and it is toggled it in the ajax success and error callbacks. For the full project with RazorPages examples, visit our [GitHub repository](https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/Telerik.Examples.RazorPages).
82+
83+
```tab-RazorPage(csthml)
84+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
85+
@{
86+
var token = Xsrf.GetAndStoreTokens(HttpContext).RequestToken;
87+
}
88+
<div id="validation-success"></div>
89+
@(Html.Kendo().Form<OrderViewModel>()
90+
.Name("formExample")
91+
.FormData(Model.Order)
92+
.Layout("grid")
93+
.Grid(g => g.Cols(2).Gutter(20))
94+
.HtmlAttributes(new { method = "POST" })
95+
.Validatable(v =>
96+
{
97+
v.ValidateOnBlur(false);
98+
v.ValidationSummary(true);
99+
v.ErrorTemplate("<span style='color: red'>#:message#</span>");
100+
})
101+
.Items(items =>
102+
{
103+
items.Add()
104+
.Field(f => f.ShipName)
105+
.Label(l => l.Text("Ship Name:"))
106+
.Hint("Hint: Entering Ship Name other than \"John Doe\" will cause the server validation to fail");
107+
items.Add()
108+
.Field(f => f.ShipCity)
109+
.Label(l => l.Text("Ship City"));
110+
items.Add()
111+
.Field(f => f.OrderDate)
112+
.Editor(e => e.DatePicker())
113+
.Label(l => l.Text("Order Date:"));
114+
items.Add()
115+
.Field(f => f.Freight)
116+
.Editor(e => e.NumericTextBox())
117+
.Label(l => l.Text("Freight:"));
118+
})
119+
.Events(ev => ev.Submit("onFormSubmit").Clear("onFormClear"))
120+
)
121+
122+
<script>
123+
function onFormClear(e) {
124+
$("#validation-success").html("");
125+
};
126+
127+
function onFormSubmit(ev) {
128+
ev.preventDefault();
129+
130+
var modelData = ev.model;
131+
modelData.OrderDate = modelData.OrderDate.toJSON();
58132
59-
var form = $("#formExample");
60133
$.ajax({
61134
type: 'POST',
62-
url: "@Url.Page("FormIndex","Submit")",
135+
url: "@Url.Page("FormAjaxSubmit","Submit")",
63136
beforeSend: function (xhr) {
64137
xhr.setRequestHeader("RequestVerificationToken",
65138
$('input:hidden[name="__RequestVerificationToken"]').val());
66139
},
67-
data: e.model, // The serialized model bound to the form
68-
dataType: 'json'
69-
});
70-
}
140+
data: modelData,
141+
dataType: 'json',
142+
success: function (data) {
143+
var form = $("#formExample").getKendoForm();
144+
145+
form.validator.validationSummary.find("ul").empty();
146+
form.validator.validationSummary.addClass("k-hidden");
147+
$("#validation-success").html("<div class='k-messagebox k-messagebox-success'>" + data.success + "</div>");
148+
},
149+
error: function (data) {
150+
var response = JSON.parse(data.responseText);
151+
var form = $("#formExample").getKendoForm();
152+
var errorString = "";
153+
154+
$.each(response.errors, function (key, value) {
155+
errorString += '<li>' + value + '</li>';
156+
});
157+
158+
$("#validation-success").html("");
159+
form.validator.validationSummary.find("ul").empty();
160+
form.validator.validationSummary.find("ul").append(errorString);
161+
form.validator.validationSummary.toggleClass("k-hidden");
162+
}
163+
})
164+
};
165+
166+
$("#formExample").append($("<input type='hidden' name='__RequestVerificationToken' value='@token' data-stop='true' />"))
71167
</script>
72168
```
73169
```tab-PageModel(cshtml.cs)
74-
public class FormIndexModel : PageModel
170+
[BindProperty]
171+
public OrderViewModel Order { get; set; }
172+
173+
public void OnGet()
75174
{
76-
public OrderViewModel Order = new OrderViewModel();
77-
78-
public void OnGet()
175+
if (Order == null)
79176
{
177+
Order = new OrderViewModel();
178+
}
179+
}
80180
181+
public IActionResult OnPostSubmit(OrderViewModel model)
182+
{
183+
//handle server validation and add model errors to be returned to the View
184+
if (model.ShipName != "John Doe")
185+
{
186+
ModelState.AddModelError("ShipName", "Ship Name is incorrect");
81187
}
82188
83-
public IActionResult OnPostSubmit(OrderViewModel model)
189+
if (!ModelState.IsValid)
84190
{
85-
if (!ModelState.IsValid)
86-
{
87-
return Page();
88-
}
89-
return new JsonResult(new { success = "Form Posted Successfully" });
191+
var errorList = (from item in ModelState
192+
where item.Value.Errors.Any()
193+
select item).ToDictionary(
194+
kvp => kvp.Key,
195+
kvp => kvp.Value.Errors.Select(e => e.ErrorMessage).FirstOrDefault()
196+
);
197+
198+
Response.StatusCode = 400;
199+
return new JsonResult(new { errors = errorList });
90200
}
201+
return new JsonResult(new { success = "Form Posted Successfully" });
202+
91203
}
92204
```
93205

‎docs-aspnet/list-of-helpers.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,9 @@
281281
<li>
282282
<a href="/{{ site.platform }}/html-helpers/navigation/drawer/overview">Drawer</a>
283283
</li>
284+
<li>
285+
<a href="/{{ site.platform }}/html-helpers/navigation/floatingactionbutton/overview">FloatingActionButton</a>
286+
</li>
284287
<li>
285288
<a href="/{{ site.platform }}/html-helpers/navigation/menu/overview">Menu</a>
286289
</li>

‎docs/_config.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -702,10 +702,10 @@ navigation:
702702
baseurl: /kendo-ui
703703

704704
## The Kendo UI version used
705-
cdnVersion: "2020.3.1118"
705+
cdnVersion: "2021.1.119"
706706

707707
## The MVC Core version used
708-
mvcCoreVersion: "2020.3.1118"
708+
mvcCoreVersion: "2021.1.119"
709709

710710
## Progress NPM Registry
711711
registry_url: 'https://registry.npm.telerik.com/'

‎docs/accessibility/keyboard-support.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ In addition to the `accesskey` attribute support, most Kendo UI widgets also off
4343
- [Editor](https://demos.telerik.com/kendo-ui/editor/keyboard-navigation)
4444
- [ImageEditor](https://demos.telerik.com/kendo-ui/imageeditor/keyboard-navigation)
4545
- [FileManager](https://demos.telerik.com/kendo-ui/filemanager/keyboard-navigation)
46+
- [FloatingActionButton](https://demos.telerik.com/kendo-ui/floatingactionbutton/keyboard-navigation)
4647
- [Gantt](https://demos.telerik.com/kendo-ui/gantt/keyboard-navigation)
4748
- [Grid](https://demos.telerik.com/kendo-ui/grid/keyboard-navigation)
4849
- [ListBox](https://demos.telerik.com/kendo-ui/listbox/keyboard-navigation)

‎docs/accessibility/section-508-wcag.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,11 @@ The following table lists the Section 508 and WCAG 2.1 compliance levels of supp
4545
|DropDownTree |Yes |AA |[Browse](https://demos.telerik.com/kendo-ui/dropdowntree/index)
4646
|Editor |Yes |AA |[Browse](https://demos.telerik.com/kendo-ui/editor/index)
4747
|FileManager |Yes |AAA |[Browse](https://demos.telerik.com/kendo-ui/filemanager/index)
48+
|FloatingActionButton |Yes |AAA |[Browse](https://demos.telerik.com/kendo-ui/floatingactionbutton/index)
4849
|Form |Yes |AAA |[Browse](https://demos.telerik.com/kendo-ui/form/index)
4950
|Gantt |Yes |AA |[Browse](https://demos.telerik.com/kendo-ui/gantt/index)
5051
|Grid |Yes |AAA |[Browse](https://demos.telerik.com/kendo-ui/grid/index)
51-
|ImageEditor |Yes |AА |[Browse](https://demos.telerik.com/kendo-ui/imageeditor/index)
52+
|ImageEditor |Yes |AA |[Browse](https://demos.telerik.com/kendo-ui/imageeditor/index)
5253
|Loader |Yes |AАA |[Browse](https://demos.telerik.com/kendo-ui/loader/index)
5354
|LinearGauge |Yes |AAA |[Browse](https://demos.telerik.com/kendo-ui/linear-gauge/index)
5455
|ListBox |Yes |AAA |[Browse](https://demos.telerik.com/kendo-ui/listbox/index)

‎typescript/kendo.all.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Type definitions for Kendo UI Professional v2020.3.915
1+
// Type definitions for Kendo UI Professional v2021.1.119
22
// Project: http://www.telerik.com/kendo-ui
33
// Definitions by: Telerik <https://github.com/telerik>
44
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

0 commit comments

Comments
 (0)