Skip to content

Commit 02e470b

Browse files
author
User Jenkins
committed
Sync with Kendo UI Professional
1 parent b248812 commit 02e470b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1117
-381
lines changed

‎docs-aspnet/html-helpers/data-management/filter/custom-editor.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: Custom Editor
3+
page_title: Custom Editor
4+
description: "Learn how to use a specific editor for the Telerik UI Filter HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_filter_aspnetcore_custom_editor
6+
position: 4
7+
---
8+
9+
# Custom Editor
10+
11+
The Filter provides the possibility to use custom editors for scenarios requiring the use of specific editor for certain types of data.
12+
13+
## Implementing Custom Editors
14+
15+
To implement a custom editor you need to specify the [`.EditorTemplateHandler()`](/api/Kendo.Mvc.UI.Fluent/FilterFieldBuilder#editortemplatehandlersystemstring), [`.EditorTemplateId()`](/api/Kendo.Mvc.UI.Fluent/FilterFieldBuilder#editortemplateidsystemstring) or [`.EditorTemplate()`](/api/Kendo.Mvc.UI.Fluent/FilterFieldBuilder#editortemplatesystemstring) options of the Filter's Field configuration. The value of this field will point to the editor template that will be used by the {{ site.product }} Filter to render the editor.
16+
17+
The following example demonstrates how to create a custom editor using the [`.EditorTemplateHandler()`](/api/Kendo.Mvc.UI.Fluent/FilterFieldBuilder#editortemplatehandlersystemstring) configuration option:
18+
19+
```Razor
20+
@(Html.Kendo().Filter<Kendo.Mvc.Examples.Models.ProductViewModel>()
21+
.Name("filter")
22+
.ApplyButton(true)
23+
.DataSource("dataSource1")
24+
.Fields(f =>
25+
{
26+
f.Add(p=>p.ProductName).Label("Product Name");
27+
f.Add(p=>p.CategoryID).Label("Category").DefaultValue(1).EditorTemplateHandler("categoryDropDownEditor");
28+
})
29+
)
30+
```
31+
```JavaScript
32+
<script>
33+
function categoryDropDownEditor(container, options) {
34+
$('<input data-bind="value: value" name="' + options.field + '"/>')
35+
.appendTo(container)
36+
.kendoDropDownList({
37+
dataTextField: "CategoryName",
38+
dataValueField: "CategoryID",
39+
dataSource: {
40+
type: "odata",
41+
transport: {
42+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
43+
}
44+
}
45+
});
46+
}
47+
</script>
48+
```
49+
50+
## See Also
51+
52+
* [Custom Editors for the Filter HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/filter/custom-editors)
53+
* [Server-Side API](/api/filter)

‎docs-aspnet/html-helpers/editors/datepicker/globalization/localization.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Localization
3+
page_title: Localization
4+
description: "Get started with the Telerik UI DatePicker for {{ site.framework }} and translate its messages for different culture locales."
5+
slug: localization_datepicker_aspnetcore
6+
position: 2
7+
---
8+
9+
# Localization
10+
11+
The DatePicker provides options for localizing its user interface by utilizing its [`Culture`](/api/Kendo.Mvc.UI.Fluent/DatePickerBuilder#culturesystemstring) property.
12+
13+
To apply the desired culture, add a reference to the script file before the DateRangePicker is initialized and include the desired culture in the settings of the helper.
14+
15+
```
16+
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/cultures/kendo.culture.de-DE.min.js"></script>
17+
18+
@(Html.Kendo().DatePicker()
19+
.Name("datepicker")
20+
.Culture("de-DE")
21+
)
22+
```
23+
24+
## See Also
25+
26+
* [Server-Side API](/api/datepicker)

‎docs-aspnet/html-helpers/editors/datepicker/globalization/overview.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: Overview
3+
page_title: Globalization
4+
description: "Get started with the Telerik UI DatePicker for {{ site.framework }} and learn about the globalization options it supports."
5+
slug: globalization_datepicker_aspnetcore
6+
position: 1
7+
---
8+
9+
# DatePicker Globalization
10+
11+
The globalization process combines the translation of component messages (localization) with adapting them to specific cultures (internationalization and right-to-left support).
12+
13+
The globalization functionality of the DatePicker is enabled through:
14+
* [Localization of messages]({% slug localization_datepicker_aspnetcore %})
15+
* [Right-to-left support]({% slug rtl_datepicker_aspnetcore %})
16+
17+
## See Also
18+
19+
* [Server-Side API](/api/datepicker)

‎docs-aspnet/html-helpers/editors/datepicker/globalization/rtl-support.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: RTL Support
3+
page_title: DatePicker Right-to-Left Support
4+
description: "Get started with the jQuery DatePicker by Kendo UI and learn about the RTL supports it provides."
5+
slug: rtl_datepicker_aspnetcore
6+
position: 3
7+
---
8+
9+
# Right-to-Left Support
10+
11+
Right-to-left (RTL) support reflects the ability of a widget to render its content in a right-to-left direction for right-to-left languages, such as Arabic, Hebrew, Chinese, or Japanese.
12+
13+
For more information, refer to:
14+
* [RTL support by the {{ site.framework }} DatePicker (demo)](https://demos.telerik.com/{{ site.platform }}/datepicker/right-to-left-support)
15+
* [RTL support in {{ site.product }}]({% slug overview_rtlsupport_core %})
16+
17+
## See Also
18+
19+
* [RTL support by the {{ site.framework }} DatePicker (demo)](https://demos.telerik.com/{{ site.platform }}/datepicker/right-to-left-support)
20+
* [Globalization in {{ site.product }}]({% slug overview_globalization_core %})
21+
* [RTL support in {{ site.product }}]({% slug overview_rtlsupport_core %})

‎docs-aspnet/html-helpers/editors/multiselect/filtering.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
---
2+
title: Filtering
3+
page_title: Filtering
4+
description: "Learn how to filter data on the server for the Telerik UI MultiSelect HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_multiselect_filtering_aspnetcore
6+
position: 5
7+
---
8+
9+
# Filtering Overview
10+
11+
The {{ site.framework }} MultiSelect provides options for filtering its data and displaying only a subset of the data.
12+
13+
## Server Filtering
14+
15+
When using Server Filtering a reduced portion of the whole dataset is returned from the server. Displaying a subset of the whole data is useful when working with large datasets containing thousands of records. In such cases, you can improve the performance and loading times by defining a minimum filter length by using the [MinLength](/api/Kendo.Mvc.UI.Fluent/MultiSelectBuilder#minlengthsystemdouble) option. For example, if you set MinLength to 3, the {{ site.product_short }} MultiSelect will not send a request to the remote endpoint and start the filtering process until the user enters at least three characters.
16+
17+
> When you apply server filtering, only the source of the MultiSelect is filtered. To page and filter the dataset, use the [virtualization]({% slug htmlhelpers_multiselect_virtualization_aspnetcore %}) feature.
18+
19+
To configure the {{ site.product_short }} MultiSelect for Server Filtering:
20+
21+
1. Set the `ServerFiltering` option of the DataSource component to `true`.
22+
1. Set the [`Filter`](/api/Kendo.Mvc.UI.Fluent/MultiSelectBuilder#filterkendomvcuifiltertype) property of the MultiSelect.
23+
24+
The following example demonstrates how to configure MultiSelect for Server Filtering.
25+
26+
```Razor
27+
@(Html.Kendo().MultiSelect()
28+
.Name("products")
29+
.DataTextField("ProductName")
30+
.DataValueField("ProductID")
31+
.Filter(FilterType.Contains)
32+
.DataSource(source =>
33+
{
34+
source.Read(read =>
35+
{
36+
read.Action("ServerFiltering_GetProducts", "MultiSelect");
37+
})
38+
.ServerFiltering(true);
39+
})
40+
)
41+
```
42+
```Controller
43+
public JsonResult ServerFiltering_GetProducts(string text)
44+
{
45+
using (var northwind = GetContext())
46+
{
47+
var products = northwind.Products.Select(product => new ProductViewModel
48+
{
49+
ProductID = product.ProductID,
50+
ProductName = product.ProductName,
51+
UnitPrice = product.UnitPrice.Value,
52+
UnitsInStock = product.UnitsInStock.Value,
53+
UnitsOnOrder = product.UnitsOnOrder.Value,
54+
Discontinued = product.Discontinued
55+
});
56+
57+
if (!string.IsNullOrEmpty(text))
58+
{
59+
products = products.Where(p => p.ProductName.Contains(text));
60+
}
61+
62+
return Json(products.ToList());
63+
}
64+
}
65+
```
66+
67+
## Client Filtering
68+
69+
For smaller sets of data, the {{ site.product_short }} MultiSelect also supports Client Filtering. To configure it, set the ServerFiltering property to false. This way the MultiSelect dataset will be filtered on the client without sending additional requests to remote endpoint.
70+
71+
```Razor
72+
@(Html.Kendo().MultiSelect()
73+
.Name("products")
74+
.DataTextField("ProductName")
75+
.DataValueField("ProductID")
76+
.Filter(FilterType.Contains)
77+
.DataSource(source =>
78+
{
79+
source.Read(read =>
80+
{
81+
read.Action("ServerFiltering_GetProducts", "MultiSelect");
82+
})
83+
.ServerFiltering(false);
84+
})
85+
)
86+
```
87+
```Controller
88+
public JsonResult ServerFiltering_GetProducts()
89+
{с
90+
using (var northwind = GetContext())
91+
{
92+
var products = northwind.Products.Select(product => new ProductViewModel
93+
{
94+
ProductID = product.ProductID,
95+
ProductName = product.ProductName,
96+
UnitPrice = product.UnitPrice.Value,
97+
UnitsInStock = product.UnitsInStock.Value,
98+
UnitsOnOrder = product.UnitsOnOrder.Value,
99+
Discontinued = product.Discontinued
100+
});
101+
102+
return Json(products.ToList());
103+
}
104+
}
105+
```
106+
107+
## See Also
108+
109+
* [Server Filtering by the MultiSelect HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/multiselect/serverfiltering)
110+
* [client Filtering by the MultiSelect HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/multiselect/serverfiltering)
111+
* [Server-Side API](/api/multiselect)

‎docs-aspnet/html-helpers/editors/multiselect/tag-mode.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Summary-Tag Mode
3+
page_title: Summary-Tag Mode
4+
description: "Learn how to display single or multiple tags for the selected items for the Telerik UI MultiSelect HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_multiselect_tagmode_aspnetcore
6+
position: 5
7+
---
8+
9+
# Summary-Tag Mode
10+
11+
The Telerik UI MultiSelect HtmlHelper for {{ site.framework }} provides options for displaying the items as individual (multiple) tags and as a single, summary tag.
12+
13+
To display single or multiple tags for the selected items set the [`TagMode()`](/api/Kendo.Mvc.UI.Fluent/MultiSelectBuilder#tagmodekendomvcuimultiselecttagmode) configuration option:
14+
15+
```Razor
16+
@(Html.Kendo().MultiSelect()
17+
.Name("products")
18+
.TagMode(MultiSelectTagMode.Single)
19+
.DataTextField("ProductName")
20+
.DataValueField("ProductID")
21+
.Filter(FilterType.Contains)
22+
.DataSource(source =>
23+
{
24+
source.Read(read =>
25+
{
26+
read.Action("ServerFiltering_GetProducts", "MultiSelect");
27+
})
28+
.ServerFiltering(true);
29+
})
30+
)
31+
```
32+
33+
## See Also
34+
35+
* [Set the TagMode for the MultiSelect HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/multiselect/tag-mode)

‎docs-aspnet/html-helpers/editors/upload/directory-upload.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
title: Directory Upload
3+
page_title: Directory Upload
4+
description: "Learn how to enable the Directry upload feature of the Telerik UI Upload HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_upload_directory_aspnetcore
6+
position: 9
7+
---
8+
9+
# Directory Upload
10+
11+
The Telerik UI Upload for {{ site.framework }} has an option to enable users to upload whole directories of files through dragging and dropping them over the Upload.
12+
13+
When the Telerik UI Upload for {{ site.framework }} is configured for directory upload the user is allowed to select only folders for upload. Files cannot be selected. In browsers that do not support the directory feature, the behavior falls back to the default file selection. The directory upload feature is only supported by browsers that support [HTML5 directory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) and [DataTransferItem](https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem) features.
14+
15+
The following example demonstrates how you can enable the `Directory` upload feature for the Telerik UI Upload for {{ site.framework }} :
16+
17+
```View
18+
@(Html.Kendo().Upload()
19+
.Name("files")
20+
.Async(a => a
21+
.Save("Directory_Upload", "Upload")
22+
.Remove("Directory_Remove", "Upload")
23+
.AutoUpload(false)
24+
)
25+
.Directory(true)
26+
.DirectoryDrop(true)
27+
)
28+
```
29+
```Controller
30+
public class UploadController : Controller
31+
{
32+
public IWebHostEnvironment WebHostEnvironment { get; set; }
33+
34+
public UploadController(IWebHostEnvironment webHostEnvironment)
35+
{
36+
WebHostEnvironment = webHostEnvironment;
37+
}
38+
39+
public async Task<ActionResult> Directory_Upload(IEnumerable<IFormFile> files)
40+
{
41+
// The Name of the Upload component is "files"
42+
if (files != null)
43+
{
44+
foreach (var file in files)
45+
{
46+
var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);
47+
48+
// Some browsers send file names with full path.
49+
// We are only interested in the file name.
50+
var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
51+
var physicalPath = Path.Combine(WebHostEnvironment.WebRootPath, "Files", fileName);
52+
53+
// The files are not actually saved in this demo
54+
//using (var fileStream = new FileStream(physicalPath, FileMode.Create))
55+
//{
56+
// await file.CopyToAsync(fileStream);
57+
//}
58+
}
59+
}
60+
61+
// Return an empty string to signify success
62+
return Content("");
63+
}
64+
65+
public ActionResult Directory_Remove(string[] fileNames)
66+
{
67+
// The parameter of the Remove action must be called "fileNames"
68+
69+
if (fileNames != null)
70+
{
71+
foreach (var fullName in fileNames)
72+
{
73+
var fileName = Path.GetFileName(fullName);
74+
var physicalPath = Path.Combine(WebHostEnvironment.WebRootPath, "Files", fileName);
75+
76+
// TODO: Verify user permissions
77+
78+
if (System.IO.File.Exists(physicalPath))
79+
{
80+
// The files are not actually removed in this demo
81+
//System.IO.File.Delete(physicalPath);
82+
}
83+
}
84+
}
85+
86+
// Return an empty string to signify success
87+
return Content("");
88+
}
89+
}
90+
```
91+
92+
## See Also
93+
* [Directory Upload by the Upload HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/upload/directoryupload)
94+
* [Server-Side API](/api/upload)

0 commit comments

Comments
 (0)