Skip to content

Commit cbb7500

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 36a72f9 commit cbb7500

36 files changed

+1591
-2044
lines changed

‎docs-aspnet/troubleshoot/troubleshooting.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,10 @@ If an older version of `Kendo.Mvc.dll` is referenced and it uses a version of `S
8888
1. [Upgrade ASP.NET MVC 5](https://www.nuget.org/packages/Microsoft.AspNet.Mvc/) which is used in the application to the newest version ASP.NET MVC 5 Nuget.
8989
1. Update the binding redirect for `System.Web.Mvc` in the `web.config` file.
9090

91-
92-
93-
<dependentAssembly>
94-
<assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
95-
<bindingRedirect oldVersion="0.0.0.0-<latest ASP.NET MVC 5 version>" newVersion="<latest ASP.NET MVC 5 version>" />
96-
</dependentAssembly>
91+
<dependentAssembly>
92+
<assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
93+
<bindingRedirect oldVersion="0.0.0.0-<latest ASP.NET MVC 5 version>" newVersion="<latest ASP.NET MVC 5 version>" />
94+
</dependentAssembly>
9795

9896
### Live Method Is Unavailable, Undefined or Unsupported
9997

‎docs/controls/layout/form/accessibility/overview.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: Overview
3+
page_title: Kendo UI for jQuery Form Documentation | Form Accessibility | Kendo UI
4+
description: "Get started with the Kendo UI for jQuery Form and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: accessibility_kendoui_form_widget
6+
position: 1
7+
---
8+
9+
# Form Accessibility
10+
11+
The Form is accessible by screen readers and provides WAI-ARIA, Section 508, and WCAG 2.1 support.
12+
13+
For more information, refer to:
14+
15+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})
16+
17+
## WAI-ARIA
18+
19+
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in Kendo UI for jQuery]({% slug wai_aria_accessibility_support %}).
20+
21+
## Section 508
22+
23+
The Form is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Kendo UI for jQuery]({% slug section508_accessibility_support %}).
24+
25+
## WCAG 2.1
26+
27+
The Form supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.1 compliance in Kendo UI for jQuery]({% slug section508_wcag20_accessibility_support %})
28+
29+
## See Also
30+
31+
* [Accessibility in Kendo UI for jQuery]({% slug overview_accessibility_support_kendoui %})

‎docs/controls/layout/form/groups.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Groups
3+
page_title: Kendo UI for jQuery Form Documentation | Groups | Kendo UI
4+
description: "Get started with the Kendo UI for jQuery Form and learn how to set up groups."
5+
slug: groups_form_widget
6+
position: 5
7+
---
8+
9+
# Groups
10+
11+
12+
## See Also
13+
14+
* [JavaScript API Reference of the Form](/api/javascript/ui/from)

‎docs/controls/layout/form/items.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Items
3+
page_title: Kendo UI for jQuery Form Documentation | Items | Kendo UI
4+
description: "Get started with the Kendo UI for jQuery Form and learn how to configure items."
5+
slug: items_form_widget
6+
position: 2
7+
---
8+
9+
# Items
10+
11+
12+
## See Also
13+
14+
* [JavaScript API Reference of the Form](/api/javascript/ui/from)

‎docs/controls/layout/form/layout.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Layout
3+
page_title: Kendo UI for jQuery Form Documentation | Layout | Kendo UI
4+
description: "Get started with the Kendo UI for jQuery Form and learn about the layouts it supports."
5+
slug: layout_form_widget
6+
position: 4
7+
---
8+
9+
# Layout
10+
11+
12+
## See Also
13+
14+
* [JavaScript API Reference of the Form](/api/javascript/ui/from)

‎docs/controls/layout/form/orientation.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Orientation
3+
page_title: Kendo UI for jQuery Form Documentation | Orientation | Kendo UI
4+
description: "Get started with the Kendo UI for jQuery Form and learn about its orientation options."
5+
slug: orientation_form_widget
6+
position: 6
7+
---
8+
9+
# Orientation
10+
11+
12+
## See Also
13+
14+
* [JavaScript API Reference of the Form](/api/javascript/ui/from)

‎docs/controls/layout/form/overview.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Overview
3+
page_title: Kendo UI for jQuery Form Documentation | Form Overview | Kendo UI
4+
description: "Get started with the Kendo UI for jQuery Form and learn about its features and how to initialize the widget."
5+
slug: overview_kendoui_form_widget
6+
position: 1
7+
---
8+
9+
# Form Overview
10+
11+
The Kendo UI Form widget allows you to generate and manage forms. Through a variety of configuration options, it makes creating and customizing forms a seamless experience. Achieve the desired form appearance by using default or custom editors, choose layout and orientation, display the editors in groups and columns, and configure validation.
12+
13+
* [Demo page for the Form](https://demos.telerik.com/kendo-ui/form/index)
14+
15+
## Initializing the Form
16+
17+
To initialize the Form, use the `<form>` tag.
18+
19+
The following example demonstrates how to initialize the Form from an existing `<form>` element. The `items` option is set, and it allows configuring Kendo UI widgets as form field editors.
20+
21+
```dojo
22+
<form id="form"></form>
23+
24+
<script>
25+
$(document).ready(function () {
26+
$("#form").kendoForm({
27+
validatable: { validationSummary: true },
28+
orientation: "vertical",
29+
formData: {
30+
TextBox: "John Doe",
31+
NumericTextBox: 2,
32+
MaskedTextBox: 21313,
33+
DatePicker: new Date(),
34+
DateTimePicker: new Date(),
35+
Switch: true,
36+
DropDownList: 1
37+
},
38+
items: [
39+
{
40+
field: "TextBox",
41+
label: "TextBox",
42+
validation: { required: true }
43+
},
44+
{
45+
field: "NumericTextBox",
46+
editor: "NumericTextBox",
47+
label: "NumericTextBox",
48+
validation: { required: true }
49+
},
50+
{
51+
field: "MaskedTextBox",
52+
editor: "MaskedTextBox",
53+
label: "MaskedTextBox",
54+
validation: { required: true }
55+
},
56+
{
57+
field: "DatePicker",
58+
editor: "DatePicker",
59+
label: "Date Picker:",
60+
validation: { required: true }
61+
},
62+
{
63+
field: "DateTimePicker",
64+
editor: "DateTimePicker",
65+
label: "Date Time Picker:",
66+
validation: { required: true }
67+
},
68+
{
69+
field: "Switch",
70+
editor: "Switch",
71+
label: "Switch",
72+
validation: { required: true }
73+
},
74+
{
75+
field: "DropDownList", editor: "DropDownList", label: "DropDownList", validation: { required: true }, editorOptions: {
76+
optionLabel: "Select item...",
77+
dataSource: [
78+
{ Name: "Item1", Id: 1 },
79+
{ Name: "Item2", Id: 2 }
80+
],
81+
dataTextField: "Name",
82+
dataValueField: "Id"
83+
}
84+
}
85+
]
86+
});
87+
});
88+
</script>
89+
```
90+
91+
## Referencing Existing Instances
92+
93+
To get a reference to an existing Form instance:
94+
95+
1. Use the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) method.
96+
1. Once a reference is established, use the [Form API](/api/javascript/ui/form) to control its behavior.
97+
98+
var form = $("#form").data("kendoForm");
99+
100+
## Functionality and Features
101+
102+
* [Items]({% slug items_form_widget %})
103+
* [Layout]({% slug layout_form_widget %})
104+
* [Groups]({% slug groups_form_widget %})
105+
* [Orientation]({% slug orientation_form_widget %})
106+
* [Validation]({% slug validation_form_widget %})
107+
* [Accessibility]({% slug accessibility_kendoui_form_widget %})
108+
109+
## See Also
110+
111+
* [Basic Usage of the Form (Demo)](https://demos.telerik.com/kendo-ui/form/index)
112+
* [JavaScript API Reference of the Form](/api/javascript/ui/form)

‎docs/controls/layout/form/validation.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Validation
3+
page_title: Kendo UI for jQuery Form Documentation | Validation | Kendo UI
4+
description: "Get started with the Kendo UI for jQuery Form and learn about its validation configuration."
5+
slug: validation_form_widget
6+
position: 7
7+
---
8+
9+
# Validation
10+
11+
12+
## See Also
13+
14+
* [JavaScript API Reference of the Form](/api/javascript/ui/from)

‎docs/knowledge-base/filter-by-date-via-search-panel.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
title: Filter columns by date via Search Panel
3+
description: An example of how to filter columns by date via Search Panel in Kendo UI Grid for jQuery
4+
type: how-to
5+
page_title: Filter columns by date via Search Panel | Kendo UI Grid for jQuery
6+
slug: grid-filter-columns-by-date-via-search-panel
7+
tags: grid, search, panel, filter, date, format, columns
8+
ticketid: 1459985
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product Version</td>
18+
<td>2020.1.114</td>
19+
</tr>
20+
<tr>
21+
<td>Product</td>
22+
<td>Grid for Progress® Kendo UI®</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
28+
## Description
29+
30+
How can I achieve a global search by date columns via the Search Panel?
31+
32+
## Solution
33+
34+
Search Panel works with strings, whereas the date type is an object.
35+
To accomplish date type searching:
36+
37+
1. Add an additional field within the [`model`](/api/javascript/data/datasource/configuration/schema#schemamodel), that will represent a formatted date.
38+
2. Use the newly created field in [`search.fields`](/api/javascript/ui/grid/configuration/search.fields) configuration.
39+
40+
```dojo
41+
42+
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>
43+
44+
<div id="example">
45+
<div id="grid"></div>
46+
47+
<script>
48+
$(document).ready(function () {
49+
$("#grid").kendoGrid({
50+
dataSource: {
51+
data: createRandomData(50),
52+
schema: {
53+
model: {
54+
fields: {
55+
City: { type: "string" },
56+
Title: { type: "string" },
57+
BirthDate: { type: "date" },
58+
BirthDateFormatted: { type: "string" }
59+
}
60+
},
61+
parse: function (response) {
62+
for (var i = 0; i < response.length; i++) {
63+
response[i].BirthDateFormatted = kendo.format("{0:MM/dd/yyyy}", response[i].BirthDate);
64+
}
65+
return response;
66+
}
67+
},
68+
pageSize: 15
69+
},
70+
height: 550,
71+
pageable: true,
72+
filterable: true,
73+
search: {
74+
fields: ["City", "Title", "BirthDateFormatted", "FirstName", "LastName"]
75+
},
76+
toolbar: ["search"],
77+
columns: [
78+
{
79+
title: "Name",
80+
width: 190,
81+
filterable: false,
82+
template: "#=FirstName# #=LastName#"
83+
},
84+
{
85+
field: "City",
86+
width: 160,
87+
},
88+
{
89+
field: "Title",
90+
width: 250,
91+
},
92+
{
93+
field: "BirthDate",
94+
title: "Birth Date",
95+
format: "{0:MM/dd/yyyy}"
96+
}
97+
]
98+
});
99+
});
100+
</script>
101+
</div>
102+
```

‎docs/knowledge-base/grid-remove-columns-from-columnMenu.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ ticketid: 1131816
99
res_type: kb
1010
---
1111

12+
> **Deprecated** The functionality is available from the API. Check [`column.menu`](/api/javascript/ui/grid/configuration/columns.menu) configuration of the Grid.
13+
1214
## Environment
1315

1416
<table>
@@ -25,7 +27,7 @@ How can I remove specific columns from the columnMenu of the Grid?
2527

2628
## Solution
2729

28-
Manipulate the columnMenu within the `columnMenuInit` event of the Grid&mdah;with this approach, the specific elements cannot be found based on the field name that is bound to the column, and removed from the DOM.
30+
Manipulate the columnMenu within the `columnMenuInit` event of the Grid. With this approach, the specific elements cannot be found based on the field name that is bound to the column, and removed from the DOM.
2931

3032
````dojo
3133
<div id="example">
@@ -36,15 +38,15 @@ Manipulate the columnMenu within the `columnMenuInit` event of the Grid&mdah;wit
3638
var mylist = eventArg.container.find(".k-columns-item>ul li");
3739
var listitems = mylist.children('li').get();
3840
columns.forEach(function(col){
39-
mylist.find("[data-field="+ col +"]").closest("li").remove();
41+
mylist.find("[data-field="+ col +"]").closest("li").addClass("hidden");
4042
})
4143
}
4244
4345
$(document).ready(function () {
4446
$("#grid").kendoGrid({
4547
columnMenuInit: function (e) {
46-
//here we pass an array with field names that we want removed from the columnMenu
47-
removeColumnsFromColumnMenu(["OrderID", "ShipCountry"], e);
48+
//here we pass an array with field names that we want removed from the columnMenu
49+
removeColumnsFromColumnMenu(["OrderID", "ShipCountry"], e);
4850
},
4951
dataSource: {
5052
type: "odata",
@@ -83,12 +85,18 @@ Manipulate the columnMenu within the `columnMenuInit` event of the Grid&mdah;wit
8385
title: "Ship Name"
8486
}, {
8587
field: "ShipAddress",
86-
title: "Ship Address",
88+
title: "Ship Address",
8789
filterable: false
8890
}
8991
]
9092
});
9193
});
9294
</script>
95+
96+
<style>
97+
.hidden {
98+
display: none !important;
99+
}
100+
</style>
93101
</div>
94102
````

0 commit comments

Comments
 (0)