Skip to content

Commit 166bd12

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent b30077c commit 166bd12

File tree

19 files changed

+1054
-24
lines changed

19 files changed

+1054
-24
lines changed

‎docs-aspnet/html-helpers/data-management/grid/binding/custom-datasource.md

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: Grid Custom DataSource
3+
page_title: Custom DataSource of the Grid Component
4+
description: "Get started with Telerik UI for ASP.NET MVC and use the CustomDataSource builder for the Grid component."
5+
slug: grid_customdatasource_aspnetmvc
6+
position: 4
7+
---
8+
9+
# Custom DataSource
10+
11+
Telerik UI for ASP.NET MVC enables you to use the CustomDataSource builder that is available to helpers that support Data Binding.
12+
13+
The CustomDataSource builder class allows full control over the [DataSource client-side API options](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource), through Razor syntax. The CustomDataSource builder facilitates the usage of the Telerik UI helpers—for example, the helpers generate validation attributes, editors, and so on, while they utilize the flexibility of JavaScript. The CustomDataSource builder can also be used in more advanced scenarios where the regular DataSource builders prevent you from fully customizing the options of the DataSource.
14+
15+
## DataSource and Custom DataSource
16+
17+
The regular DataSource builders have many settings that are configured by default. The CustomDataSource builder removes these predefined settings, so when you declare a DataSource as custom, configure these additional settings.
18+
19+
The following two examples demonstrate a regular Grid AjaxDataSourceBuilder and a CustomDataSource builder.
20+
21+
```HtmlHelper
22+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
23+
.Name("grid")
24+
.Columns(columns => {
25+
columns.Bound(p => p.OrderID).Filterable(false).Width(100);
26+
columns.Bound(p => p.Freight).Width(100);
27+
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
28+
columns.Bound(p => p.ShipName);
29+
columns.Bound(p => p.ShipCity).Width(150);
30+
})
31+
.HtmlAttributes(new { style = "height:430px;" })
32+
.DataSource(dataSource => dataSource
33+
.Ajax()
34+
.PageSize(20)
35+
.Read(read => read.Action("Orders_Read", "Grid"))
36+
)
37+
)
38+
```
39+
{% if site.core %}
40+
```TagHelper
41+
@addTagHelper *, Kendo.Mvc
42+
43+
<kendo-grid name="grid" height="430">
44+
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
45+
<schema>
46+
<model id="OrderID">
47+
<fields>
48+
<field name="OrderID" type="number"></field>
49+
<field name="Freight" type="number"></field>
50+
<field name="OrderDate" type="date"></field>
51+
<field name="ShipName" type="string"></field>
52+
<field name="ShipCity" type="string"></field>
53+
</fields>
54+
</model>
55+
</schema>
56+
<transport>
57+
<read url="@Url.Action("Orders_Read","Grid")"/>
58+
</transport>
59+
</datasource>
60+
<columns>
61+
<column field="OrderID" width="100">
62+
<filterable enabled="false"/>
63+
</column>
64+
<column field="Freight" width="100"/>
65+
<column field="OrderDate" width="140" format="{0:MM/dd/yyyy}"/>
66+
<column field="ShipName"/>
67+
<column field="ShipCity" width="150"/>
68+
</columns>
69+
</kendo-grid>
70+
```
71+
{% endif %}
72+
73+
The following example demonstrates a CustomDataSourceBuilder definition.
74+
75+
```HtmlHelper
76+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
77+
.Name("Grid")
78+
.Columns(columns => {
79+
columns.Bound(p => p.ProductName);
80+
columns.Bound(p => p.UnitPrice).Width(140);
81+
columns.Bound(p => p.UnitsInStock).Width(140);
82+
columns.Bound(p => p.Discontinued).Width(100);
83+
})
84+
.DataSource(dataSource => dataSource
85+
.Custom()
86+
.PageSize(20)
87+
.Schema(schema => schema.Model(m => m.Id(p => p.ProductID)))
88+
.Transport(transport =>
89+
{
90+
transport.Read(read => read.Action("Orders_Read", "Grid"));
91+
})
92+
)
93+
)
94+
```
95+
{% if site.core %}
96+
```TagHelper
97+
@addTagHelper *, Kendo.Mvc
98+
99+
<kendo-grid name="Grid" navigatable="true">
100+
<datasource type="DataSourceTagHelperType.Custom" page-size="20">
101+
<schema>
102+
<model id="ProductID">
103+
<fields>
104+
<field name="ProductID" type="number" editable="false"></field>
105+
<field name="ProductName" type="string"></field>
106+
<field name="UnitPrice" type="number"></field>
107+
<field name="UnitsInStock" type="number"></field>
108+
<field name="Discontinued" type="boolean"></field>
109+
</fields>
110+
</model>
111+
</schema>
112+
<transport>
113+
<read url="@Url.Action("Products_Read","Grid")"/>
114+
</transport>
115+
</datasource>
116+
<columns>
117+
<column field="ProductName"/>
118+
<column field="UnitPrice" width="140"/>
119+
<column field="UnitsInStock" width="140"/>
120+
<column field="Discontinued" width="100"/>
121+
</columns>
122+
</kendo-grid>
123+
```
124+
{% endif %}
125+
126+
## See Also
127+
128+
* [Custom DataSource for {{ site.framework }} (https://docs.telerik.com/{{ site.platform }}/html-helpers/datasource/custom-datasource)
129+
* [Server-Side API](/api/grid)
130+
* [Custom DataSource in Grid for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/custom-datasource)
131+
{% endif %}

‎docs-aspnet/html-helpers/data-management/listview/binding/custom-datasource.md

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
title: ListView Custom DataSource
3+
page_title: Custom DataSource of the ListView Component
4+
description: "Get started with Telerik UI for ASP.NET MVC and use the CustomDataSource builder for the ListView component."
5+
slug: listview_customdatasource_aspnetmvc
6+
position: 4
7+
---
8+
9+
# Custom DataSource
10+
11+
Telerik UI for ASP.NET MVC enables you to use the CustomDataSource builder that is available to helpers that support Data Binding.
12+
13+
The CustomDataSource builder class allows full control over the [DataSource client-side API options](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource), through Razor syntax. The CustomDataSource builder facilitates the usage of the Telerik UI helpers&mdash;for example, the helpers generate validation attributes, editors, and so on, while they utilize the flexibility of JavaScript. The CustomDataSource builder can also be used in more advanced scenarios where the regular DataSource builders prevent you from fully customizing the options of the DataSource.
14+
15+
## DataSource and Custom DataSource
16+
17+
The regular DataSource builders have many settings that are configured by default. The CustomDataSource builder removes these predefined settings, so when you declare a DataSource as custom, configure these additional settings.
18+
19+
The following two examples demonstrate a regular ListView AjaxDataSourceBuilder and a CustomDataSource builder.
20+
21+
```HtmlHelper
22+
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
23+
.Name("listView")
24+
.TagName("div")
25+
.ClientTemplateId("template")
26+
.DataSource(dataSource => dataSource
27+
.Ajax()
28+
.Read(read => read.Action("Products_Read", "ListView"))
29+
.PageSize(21)
30+
)
31+
.Pageable()
32+
)
33+
```
34+
{% if site.core %}
35+
```TagHelper
36+
@addTagHelper *, Kendo.Mvc
37+
38+
<kendo-listview name="listView"
39+
tag-name="div"
40+
template-id="template">
41+
<datasource type="DataSourceTagHelperType.Ajax" page-size="21">
42+
<transport>
43+
<read url="@Url.Action("Products_Read", "ListView")" />
44+
</transport>
45+
</datasource>
46+
<pageable enabled="true" />
47+
</kendo-listview>
48+
```
49+
{% endif %}
50+
51+
The following example demonstrates a CustomDataSourceBuilder definition.
52+
53+
```HtmlHelper
54+
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
55+
.Name("listView")
56+
.TagName("div")
57+
.ClientTemplateId("template")
58+
.DataSource(dataSource => dataSource
59+
.Custom()
60+
.Schema(schema => schema
61+
.Model(model => model.Id("ProductID")))
62+
.PageSize(4)
63+
.Transport(transport => transport
64+
.Read(read => read.Action("Products_Read", "ListView"))
65+
)
66+
)
67+
.Pageable()
68+
)
69+
```
70+
{% if site.core %}
71+
```TagHelper
72+
@addTagHelper *, Kendo.Mvc
73+
74+
<kendo-listview name="listView"
75+
tag-name="div"
76+
template-id="template">
77+
<datasource type="DataSourceTagHelperType.Custom" page-size="4">
78+
<transport>
79+
<read url="@Url.Action("Products_Read", "ListView")" />
80+
</transport>
81+
<schema>
82+
<model id="ProductID">
83+
<fields>
84+
<field name="ProductName"></field>
85+
<field name="UnitPrice"></field>
86+
<field name="UnitsInStock"></field>
87+
<field name="Discontinued"></field>
88+
</fields>
89+
</model>
90+
</schema>
91+
</datasource>
92+
<pageable enabled="true" />
93+
</kendo-listview>
94+
```
95+
{% endif %}
96+
97+
## See Also
98+
99+
* [Custom DataSource for {{ site.framework }} (https://docs.telerik.com/{{ site.platform }}/html-helpers/datasource/custom-datasource)
100+
* [Server-Side API](/api/listview)
101+
* [Custom DataSource in ListView for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/listview/custom-datasource)
102+
{% endif %}

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

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,93 @@ position: 6
99

1010
# Filtering
1111

12+
The Telerik UI MultiColumnComboBox for {{ site.framework }} allows you to filter the available options by their text to find the respective option quickly.
13+
14+
To enable the MultiColumnComboBox filtering, set the desired filter operator through the [`Filter()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/multicomboboxbuilder#filtersystemstring) method. The supported options are `contains`, `startswith`, and `endswith`. When the filtering feature is enabled, you can specify where the filter operation must be performed:
15+
16+
* [Client Filtering](#client-filtering)
17+
* [Server Filtering](#server-filtering)
18+
19+
## Client Filtering
20+
21+
By design, when the `Filter()` option is defined, the MultiColumnComboBox filters the data client-side. The filter data operation is performed directly on the client, and no requests are sent to the server.
22+
23+
## Server Filtering
24+
25+
To enable the server filtering, set the `ServerFiltering` option of the DataSource to `true`. In doing so, the filtering will be performed on the server. The component triggers an AJAX request and sends the search entry and the respective filter operator to the server. As a result, the MultiColumnComboBox data is filtered server-side, and the ready-to-use subset is returned to the client.
26+
27+
```HtmlHelper
28+
@(Html.Kendo().MultiColumnComboBox()
29+
.Name("products")
30+
.Placeholder("Select product")
31+
.DataTextField("ProductName")
32+
.DataValueField("ProductID")
33+
.Columns(columns =>
34+
{
35+
columns.Add().Field("ProductName").Title("Name");
36+
columns.Add().Field("ProductID").Title("ID");
37+
})
38+
.HtmlAttributes(new { style = "width:100%;" })
39+
.Filter(FilterType.Contains)
40+
.AutoBind(false)
41+
.MinLength(3)
42+
.DataSource(source =>
43+
{
44+
source.Read(read =>
45+
{
46+
read.Action("ServerFiltering_GetProducts", "MultiColumnComboBox");
47+
})
48+
.ServerFiltering(true);
49+
})
50+
)
51+
```
52+
{% if site.core %}
53+
```TagHelper
54+
<kendo-multicolumncombobox auto-bind="false" datatextfield="ProductName" datavaluefield="ProductID" min-length="3" placeholder="Select product" filter="FilterType.Contains" name="products" style="width:100%;">
55+
<multicolumncombobox-columns>
56+
<column field="ProductName" title="Name">
57+
</column>
58+
<column field="ProductID" title="ID">
59+
</column>
60+
</multicolumncombobox-columns>
61+
<datasource server-filtering="true">
62+
<transport>
63+
<read url="@Url.Action("ServerFiltering_GetProducts", "MultiColumnComboBox")" />
64+
</transport>
65+
</datasource>
66+
</kendo-multicolumncombobox>
67+
```
68+
{% endif %}
69+
```C#
70+
public JsonResult ServerFiltering_GetProducts(string text)
71+
{
72+
using (var northwind = GetContext())
73+
{
74+
var products = northwind.Products.Select(product => new ProductViewModel
75+
{
76+
ProductID = product.ProductID,
77+
ProductName = product.ProductName,
78+
UnitPrice = product.UnitPrice.Value,
79+
UnitsInStock = product.UnitsInStock.Value,
80+
UnitsOnOrder = product.UnitsOnOrder.Value,
81+
Discontinued = product.Discontinued
82+
});
83+
84+
if (!string.IsNullOrEmpty(text))
85+
{
86+
products = products.Where(p => p.ProductName.Contains(text));
87+
}
88+
89+
return Json(products.ToList());
90+
}
91+
}
92+
```
93+
94+
## Multicolumn Filtering
95+
1296
Apart from the standard filter options, the MultiColumnComboBox allows you to set fields against which the data will be filtered.
1397

14-
The option accepts an array of strings.
98+
The `FilterFields()` option accepts the names of the fields as an array of strings.
1599

16100
```HtmlHelper
17101
@(Html.Kendo().MultiColumnComboBox()

‎docs-aspnet/html-helpers/editors/multicolumncombobox/overview.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,8 @@ The following example demonstrates the basic configuration of the MultiColumnCom
209209
| [Prefix and Suffix]({% slug prefix_suffix_multicolumncombobox %})| Enhance the component look and feel by adding prefix and suffix adornments.|
210210
| [Events]({% slug events_multicolumncombobox_aspnetcore %})| Handle the component events and implement any custom functionality.|
211211
| [Accessibility]({% slug accessibility_aspnetcore_multicolumncombobox %})|The MultiColumnComboBox is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.|
212+
| [Cascading]({% slug htmlhelpers_multicolumncombobox_cascading %})|The cascading MultiColumnComboBox is a series of two or more MultiColumnComboBoxes in which each MultiColumnComboBox is filtered according to the selected options that are based on the DataValueField in the previous MultiColumnComboBox.|
213+
| [Templates](https://docs.telerik.com/{{ site.platform }}/html-helpers/editors/multicolumncombobox/templates)|The MultiColumnComboBox provides capability to fully customize the content presented to the user.|
212214

213215
## Next Steps
214216

0 commit comments

Comments
 (0)