Skip to content

Commit b615f64

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 23184c7 commit b615f64

File tree

7 files changed

+638
-293
lines changed

7 files changed

+638
-293
lines changed

‎docs-aspnet/installation/installation-options/nuget-install.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,9 @@ To [use a local NuGet feed](https://learn.microsoft.com/en-us/nuget/hosting-pack
204204
* [Telerik.SvgIcons](https://www.nuget.org/packages/Telerik.SvgIcons)
205205
* [Telerik.FontIcons](https://www.nuget.org/packages/Telerik.FontIcons)
206206

207+
{% if site.mvc %}
207208
>As of the R3 2022 release, NuGet packages for MVC 3 and MVC 4 are no longer provided for Telerik UI for ASP.NET MVC.
209+
{% endif %}
208210

209211
## Telerik NuGet Packages Installation
210212

‎docs-aspnet/knowledge-base/autocomplete-editor-for-grid.md‎

Lines changed: 107 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -31,71 +31,119 @@ How can I use the {{ site.framework }} AutoComplete component as an editor in an
3131
The AutoComplete editor will provide a convenient list of options to hint the user of the available options. You can achieve this implementation through the following key steps:
3232

3333
1. [Define an InCell editable Grid]({% slug batchediting_grid_aspnetcore %}) and bind its column to the complex Model property **Person**.
34-
```Razor
35-
@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridEditingAutoCompleteNewItem.Models.GridViewModel>()
36-
.Name("grid")
37-
.HtmlAttributes(new { style = "width: 800px; margin: 100px 0 0 200px" })
38-
.Columns(columns =>
39-
{
40-
columns.Bound(p => p.Person).ClientTemplate("#= data.Person ? Person.Name : '' # ").Title("AUTOCOMPLETE").Width(200);
41-
columns.Bound(p => p.Text).Width(200).Title("Text");
42-
})
43-
.ToolBar(commands =>
44-
{
45-
commands.Create().Text("New");
46-
commands.Save();
47-
})
48-
.Editable(editing => editing.Mode(GridEditMode.InCell))
49-
.DataSource(dataSource => dataSource
50-
.Ajax()
51-
.Model(model =>
34+
35+
```HtmlHelper
36+
@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridEditingAutoCompleteNewItem.Models.GridViewModel>()
37+
.Name("grid")
38+
.Columns(columns =>
39+
{
40+
columns.Bound(p => p.Person).ClientTemplate("#= data.Person ? Person.Name : '' # ").Title("AUTOCOMPLETE");
41+
columns.Bound(p => p.Text).Title("Text");
42+
})
43+
.ToolBar(commands =>
5244
{
53-
model.Id(p => p.ID);
45+
commands.Create().Text("New");
46+
commands.Save();
5447
})
55-
.Update("Update", "Home", new { Area = "GridEditingAutoCompleteNewItem" })
56-
.Read("Read", "Home", new { Area = "GridEditingAutoCompleteNewItem" })
57-
.ServerOperation(false)
58-
.Events(e => e.Change("onChange"))
48+
.Scrollable()
49+
.HtmlAttributes(new { style = "height: 430px;" })
50+
.Editable(editing => editing.Mode(GridEditMode.InCell))
51+
.DataSource(dataSource => dataSource
52+
.Ajax()
53+
.ServerOperation(false)
54+
.Model(model =>
55+
{
56+
model.Id(p => p.ID);
57+
})
58+
.Update("Update", "Home")
59+
.Read("Read", "Home")
60+
.Events(e => e.Change("onChange"))
61+
)
5962
)
60-
)
61-
```
62-
63-
64-
2. Create a [custom editor template for the column]({% slug customediting_grid_aspnetcore %}) that contains an AutoComplete editor, which binds to remote data.
65-
3. Configure the AutoComplete for [server-side filtering]({% slug htmlhelpers_autocomplete_filtering_aspnetcore %}).
66-
4. Handle the [`Change` event](/api/kendo.mvc.ui.fluent/datasourceeventbuilder#changesystemstring) of the Grid's DataSource and update the **Person** field of the respective record when its current value is changed through the AutoComplete editor. Then, trigger the [`closeCell()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/closecell) method of the Grid to exit edit mode.
67-
68-
```PersonFieldEditor.cshtml
69-
@(Html.Kendo().AutoComplete()
70-
.Name("Person")
71-
.DataTextField("Name")
72-
.DataSource(dataSource => dataSource.Read(read => read.Action("GetAutocomplete", "Home", new { Area = "GridEditingAutoCompleteNewItem" }).Data("onAdditionalData")).ServerFiltering(true))
73-
.Delay(500)
74-
.HighlightFirst(true)
75-
)
76-
```
77-
```js
78-
<script type="text/javascript">
79-
// handle the Grid's DataSource Change event
80-
function onChange(e) {
81-
// the Change event provides the action argument to show the type of the operation
82-
if (e.action == "itemchange") {
83-
if (e.field == "Person") {
84-
if (typeof (e.items[0].Person) == "string") {
85-
e.items[0].set("Person", { ID: "0", Name: e.items[0].Person });
86-
$("#grid").data("kendoGrid").closeCell($("[data-role=autocomplete]").closest("td"));
63+
```
64+
{% if site.core %}
65+
```TagHelper
66+
@addTagHelper *, Kendo.Mvc
67+
68+
<kendo-grid name="grid" height="430">
69+
<columns>
70+
<column field="Person" template="#= data.Person ? Person.Name : '' #" title="AUTOCOMPLETE"></column>
71+
<column field="Text" title="Text"></column>
72+
</columns>
73+
<toolbar>
74+
<toolbar-button name="create" text="New"></toolbar-button>
75+
<toolbar-button name="save"></toolbar-button>
76+
</toolbar>
77+
<editable mode="incell"/>
78+
<scrollable enabled="true"/>
79+
<datasource type="DataSourceTagHelperType.Ajax" server-operation="false" on-change="onChange">
80+
<schema>
81+
<model id="ID"></model>
82+
</schema>
83+
<transport>
84+
<read url="@Url.Action("Read", "Home")" />
85+
<update url="@Url.Action("Update", "Home")" />
86+
</transport>
87+
</datasource>
88+
</kendo-grid>
89+
```
90+
{% endif %}
91+
92+
1. Create a [custom editor template for the column]({% slug customediting_grid_aspnetcore %}) that contains an AutoComplete editor, which binds to remote data.
93+
1. Configure the AutoComplete for [server-side filtering]({% slug htmlhelpers_autocomplete_filtering_aspnetcore %}).
94+
95+
```HtmlHelper
96+
@model ResultEntryViewModel
97+
98+
@(Html.Kendo().AutoCompleteFor(m => m.ID)
99+
.DataTextField("Name")
100+
.DataSource(dataSource =>
101+
dataSource.Read(read => read.Action("GetAutocomplete", "Home").Data("onAdditionalData"))
102+
.ServerFiltering(true))
103+
.Delay(500)
104+
.HighlightFirst(true)
105+
)
106+
```
107+
{% if site.core %}
108+
```TagHelper
109+
@addTagHelper *, Kendo.Mvc
110+
@model ResultEntryViewModel
111+
112+
<kendo-autocomplete for="ID" highlight-first="true" delay="500"
113+
dataTextField="Name">
114+
<datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
115+
<transport>
116+
<read url="@Url.Action("GetAutocomplete", "Home")" data="onAdditionalData" />
117+
</transport>
118+
</datasource>
119+
</kendo-autocomplete>
120+
```
121+
{% endif %}
122+
123+
1. Handle the [`Change`](/api/kendo.mvc.ui.fluent/datasourceeventbuilder#changesystemstring) event of the Grid's DataSource and update the **Person** field of the respective record when its current value is changed through the AutoComplete editor. Then, trigger the [`closeCell()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/closecell) method of the Grid to exit edit mode.
124+
125+
```JS
126+
<script type="text/javascript">
127+
// Handle the Grid's DataSource Change event.
128+
function onChange(e) {
129+
// The Change event provides the action argument for the type of the operation.
130+
if (e.action == "itemchange") {
131+
if (e.field == "Person") {
132+
if (typeof (e.items[0].Person) == "string") {
133+
e.items[0].set("Person", { ID: "0", Name: e.items[0].Person });
134+
$("#grid").data("kendoGrid").closeCell($("[data-role=autocomplete]").closest("td"));
135+
}
87136
}
88137
}
89138
}
90-
}
91-
92-
function onAdditionalData() {
93-
return {
94-
text: $("#Person").val()
95-
};
96-
}
97-
</script>
98-
```
139+
140+
function onAdditionalData() {
141+
return {
142+
text: $("#Person").val()
143+
};
144+
}
145+
</script>
146+
```
99147
100148
To see the complete example, refer to the ASP.NET MVC project on how to [add a new value to the Grid records](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridEditingAutoCompleteNewItem) when the Grid uses the Telerik UI AutoComplete as an editor. {% if site.core %}You can use this as a starting point to configure the same behavior in an ASP.NET Core project.{% endif %}
101149

‎docs-aspnet/knowledge-base/date-picker-masked-grid.md‎

Lines changed: 69 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -29,75 +29,78 @@ How can I add a mask to the Telerik UI DatePicker?
2929
> The DatePicker does not officially support the suggested approach and its implementation might lead to undesired side-effects. Starting with version R2 2017, the DatePicker supports the [`DateInput`](/api/kendo.mvc.ui.fluent/datepickerbuilder#dateinput) property, which provides a built-in mask.
3030
3131
## Solution
32-
Include the following script before the DatePicker declaration.
33-
```html
34-
<script>
35-
//maskedDatePicker.js
36-
(function ($) {
37-
var kendo = window.kendo,
38-
ui = kendo.ui,
39-
Widget = ui.Widget,
40-
proxy = $.proxy,
41-
CHANGE = "change",
42-
PROGRESS = "progress",
43-
ERROR = "error",
44-
NS = ".generalInfo";
45-
46-
var MaskedDatePicker = Widget.extend({
47-
init: function (element, options) {
48-
var that = this;
49-
Widget.fn.init.call(this, element, options);
50-
51-
$(element).kendoMaskedTextBox({ mask: that.options.dateOptions.mask || "00/00/0000" })
52-
.kendoDatePicker({
53-
format: that.options.dateOptions.format || "MM/dd/yyyy",
54-
parseFormats: that.options.dateOptions.parseFormats || ["MM/dd/yyyy", "MM/dd/yy"]
55-
})
56-
.closest(".k-datepicker")
57-
.add(element)
58-
.removeClass("k-textbox");
59-
60-
that.element.data("kendoDatePicker").bind("change", function() {
61-
that.trigger(CHANGE);
62-
});
63-
},
64-
options: {
65-
name: "MaskedDatePicker",
66-
dateOptions: {}
67-
},
68-
events: [
69-
CHANGE
70-
],
71-
destroy: function () {
72-
var that = this;
73-
Widget.fn.destroy.call(that);
74-
75-
kendo.destroy(that.element);
76-
},
77-
value: function(value) {
78-
var datepicker = this.element.data("kendoDatePicker");
79-
80-
if (value === undefined) {
81-
return datepicker.value();
82-
}
83-
84-
datepicker.value(value);
85-
}
86-
});
87-
88-
ui.plugin(MaskedDatePicker);
8932

90-
})(window.kendo.jQuery);
91-
</script>
33+
Include the following script before the DatePicker declaration.
9234

93-
<div id="example">
94-
<input id="maskedDatePicker" />
95-
<script>
96-
$(document).ready(function() {
97-
$('#maskedDatePicker').kendoMaskedDatePicker();
35+
```JS
36+
<script>
37+
//maskedDatePicker.js
38+
(function ($) {
39+
var kendo = window.kendo,
40+
ui = kendo.ui,
41+
Widget = ui.Widget,
42+
proxy = $.proxy,
43+
CHANGE = "change",
44+
PROGRESS = "progress",
45+
ERROR = "error",
46+
NS = ".generalInfo";
47+
48+
var MaskedDatePicker = Widget.extend({
49+
init: function (element, options) {
50+
var that = this;
51+
Widget.fn.init.call(this, element, options);
52+
53+
$(element).kendoMaskedTextBox({ mask: that.options.dateOptions.mask || "00/00/0000" })
54+
.kendoDatePicker({
55+
format: that.options.dateOptions.format || "MM/dd/yyyy",
56+
parseFormats: that.options.dateOptions.parseFormats || ["MM/dd/yyyy", "MM/dd/yy"]
57+
})
58+
.closest(".k-datepicker")
59+
.add(element)
60+
.removeClass("k-textbox");
61+
62+
that.element.data("kendoDatePicker").bind("change", function() {
63+
that.trigger(CHANGE);
9864
});
99-
</script>
100-
</div>
65+
},
66+
options: {
67+
name: "MaskedDatePicker",
68+
dateOptions: {}
69+
},
70+
events: [
71+
CHANGE
72+
],
73+
destroy: function () {
74+
var that = this;
75+
Widget.fn.destroy.call(that);
76+
77+
kendo.destroy(that.element);
78+
},
79+
value: function(value) {
80+
var datepicker = this.element.data("kendoDatePicker");
81+
82+
if (value === undefined) {
83+
return datepicker.value();
84+
}
85+
86+
datepicker.value(value);
87+
}
88+
});
89+
90+
ui.plugin(MaskedDatePicker);
91+
92+
})(window.kendo.jQuery);
93+
</script>
94+
```
95+
```HTML
96+
<div id="example">
97+
<input id="maskedDatePicker" />
98+
<script>
99+
$(document).ready(function() {
100+
$('#maskedDatePicker').kendoMaskedDatePicker();
101+
});
102+
</script>
103+
</div>
101104
```
102105

103106
## More {{ site.framework }} DatePicker Resources

0 commit comments

Comments
 (0)