Skip to content

Commit 9e78384

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 72ce9ec commit 9e78384

File tree

6 files changed

+571
-139
lines changed

6 files changed

+571
-139
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -871,6 +871,7 @@ To enable batch editing capabilities in an ASP.NET MVC Environment:
871871

872872
* [OData-v4 Binding by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/odata-v4)
873873
{% if site.core %}
874+
* [GitHub Example](https://github.com/telerik/ui-for-aspnet-core-examples/commit/1a513aae311b339349d61e65d4f12fe954e2afc8)
874875
* [Official Microsoft Documentation on Getting Started with {{ site.framework }} OData-v4](https://learn.microsoft.com/en-us/odata/webapi-8/getting-started?tabs=net60%2Cvisual-studio-2022%2Cvisual-studio)
875876
{% else %}
876877
* [Official Microsoft Documentation on Getting Started with {{ site.framework }} OData-v4](https://learn.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/odata-v4/create-an-odata-v4-endpoint)

‎docs-aspnet/html-helpers/data-management/grid/columns/foreignkey-column.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,22 @@ Binding the column to a local collection of items can be done by passing a valid
3232
</foreign-key-column>
3333
```
3434
{% endif %}
35+
```Controller
36+
public class GridController : Controller
37+
{
38+
public ActionResult Index()
39+
{
40+
ViewData["categories"] = GetCategories();
41+
return View();
42+
}
43+
}
44+
```
45+
```ForeignKeyModel
46+
public class CategoryViewModel{
47+
public int CategoryID { get; set; }
48+
public string CategoryName { get; set; }
49+
}
50+
```
3551

3652
## Binding to a Remote Collection
3753

@@ -51,7 +67,55 @@ In order to bind the column to a remote collection of items, supply a URL Action
5167
</datasource>
5268
</foreign-key-column>
5369
```
70+
```Controller
71+
public class GridController : Controller
72+
{
73+
public ActionResult Categories()
74+
{
75+
IEnumerable<CategoryViewModel> categories;
76+
using (var dataContext = new SampleEntitiesDataContext())
77+
{
78+
categories = dataContext.Categories
79+
.Select(c => new CategoryViewModel
80+
{
81+
CategoryID = c.CategoryID,
82+
CategoryName = c.CategoryName
83+
})
84+
.OrderBy(e => e.CategoryName).ToList();
85+
}
86+
return Json(categories);
87+
}
88+
}
89+
```
90+
{% else %}
91+
```Controller
92+
public class GridController : Controller
93+
{
94+
public ActionResult Categories()
95+
{
96+
IEnumerable<CategoryViewModel> categories;
97+
using (var dataContext = new SampleEntitiesDataContext())
98+
{
99+
categories = dataContext.Categories
100+
.Select(c => new CategoryViewModel
101+
{
102+
CategoryID = c.CategoryID,
103+
CategoryName = c.CategoryName
104+
})
105+
.OrderBy(e => e.CategoryName).ToList();
106+
}
107+
return Json(categories, JsonRequestBehavior.AllowGet);
108+
}
109+
}
110+
```
54111
{% endif %}
112+
113+
```ForeignKeyModel
114+
public class CategoryViewModel{
115+
public int CategoryID { get; set; }
116+
public string CategoryName { get; set; }
117+
}
118+
```
55119
## See Also
56120

57121
* [Foreign Key Column Local Binding (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/foreignkeycolumn)

‎docs-aspnet/html-helpers/data-management/grid/columns/responsive-columns.md‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
---
2+
title: Responsive Columns
3+
page_title: Responsive Columns
4+
description: "Learn how to make the Telerik UI for {{ site.framework}} Grid columns responsive for different viewport dimensions."
5+
slug: responsive_columns_grid
6+
position: 12
7+
---
8+
9+
# Responsive Columns
10+
11+
The {{ site.product }} Grid provides the built-in functionality to conditionally make a column visible based on the width of the viewport.
12+
13+
For a runnable example, refer to the [demo on Responsive Columns for the Grid component](https://demos.telerik.com/{{ site.platform }}/grid/responsive-columns).
14+
15+
> * The [`Hidden()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/gridboundcolumnbuilder#hiddensystemboolean) configuration method takes precedence over the `Media()` configuration.
16+
> * The [`Media()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/gridboundcolumnbuilder#mediasystemstring) configuration method cannot be used with the [`MinScreenWidth()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/gridboundcolumnbuilder#minscreenwidthsystemint32) option simultaneously.
17+
18+
## Configuration
19+
20+
Set the [`Media()`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/gridboundcolumnbuilder#mediasystemstring) configuration method of the column to a [valid string](#accepted-values). When set, the column will predominantly remain visible if the specified condition is satisfied.
21+
22+
```HtmlHelper
23+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Customer>()
24+
.Name("grid")
25+
.Columns(columns =>
26+
{
27+
columns.Bound(c => c.ContactName).Media("(min-width: 450px)");
28+
columns.Bound(c => c.ContactTitle).Width(250).Media("(min-width: 850px)");
29+
columns.Bound(c => c.CompanyName).Width(250).Media("(min-width: 850px)");
30+
columns.Bound(c => c.Country).Media("(min-width: 450px)");
31+
})
32+
.HtmlAttributes(new { style = "height: 550px;" })
33+
.Scrollable()
34+
.Groupable()
35+
.Sortable()
36+
.Pageable(pageable => pageable
37+
.Refresh(true)
38+
.PageSizes(true)
39+
.ButtonCount(5))
40+
.DataSource(dataSource => dataSource
41+
.Ajax()
42+
.Read(read => read.Action("Responsive_Columns_Customers_Read", "Grid"))
43+
.PageSize(20)
44+
)
45+
)
46+
```
47+
{% if site.core %}
48+
```TagHelper
49+
<kendo-grid name="grid" style="height:550px;" resizable="true">
50+
<columns>
51+
<column field="ContactName" media="(min-width: 450px)">
52+
</column>
53+
<column field="ContactTitle" width="250" media="(min-width: 850px)">
54+
</column>
55+
<column field="CompanyName" width="250" media="(min-width: 850px)">
56+
</column>
57+
<column field="Country" media="(min-width: 450px)">
58+
</column>
59+
</columns>
60+
<sortable enabled="true" />
61+
<scrollable enabled="true" />
62+
<reorderable enabled="true" />
63+
<column-menu enabled="true" />
64+
<filterable enabled="true" mode="row" />
65+
<pageable enabled="true" refresh="true" page-sizes-enabled="true" button-count="5" />
66+
<datasource page="0" type="DataSourceTagHelperType.Ajax" page-size="20">
67+
<schema data="Data" total="Total" errors="Errors">
68+
</schema>
69+
<transport>
70+
<read url="@Url.Action("Responsive_Columns_Customers_Read","Grid")" />
71+
</transport>
72+
</datasource>
73+
</kendo-grid>
74+
```
75+
{% endif %}
76+
77+
## Accepted Values
78+
79+
1. The property accepts valid strings for the [`matchMedia browser API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) (assuming the property is supported by the browser) and toggles the visibility of the columns based on the media queries.
80+
81+
1. The property accepts the device identifiers that are available in [Bootstrap 5](https://getbootstrap.com/docs/5.0/layout/grid/#grid-options):
82+
83+
- **xs** is equivalent to "(max-width: 576px)"
84+
- **sm** is equivalent to "(min-width: 576px)"
85+
- **md** is equivalent to "(min-width: 768px)"
86+
- **lg** is equivalent to "(min-width: 992px)"
87+
- **xl** is equivalent to "(min-width: 1200px)"
88+
89+
## Column Template
90+
91+
The Responsive Column functionality works in strong symbiosis with the Column Template functionality. The column template is used for melding all columns into an autonomous container by using the [Kendo UI Template](https://docs.telerik.com/kendo-ui/framework/templates/overview) conventions.
92+
93+
The content within the column `Template()` method will be displayed when the condition specified in the `Media()` is met (for example, the viewport is not wider than 450px). This functionality is useful, as it allows you to alter the existing column structure based on the current viewport dimensions.
94+
95+
```HtmlHelper
96+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Customer>()
97+
.Name("grid")
98+
.Columns(columns =>
99+
{
100+
columns.Bound(c => c.ContactName).Media("(min-width: 450px)");
101+
columns.Bound(c => c.ContactTitle).Width(250).Media("(min-width: 850px)");
102+
columns.Bound(c => c.CompanyName).Width(250).Media("(min-width: 850px)");
103+
columns.Bound(c => c.Country).Media("(min-width: 450px)");
104+
columns.Template("#=resColTemplate(data)#").Title("Items").Media("(max-width: 450px)");
105+
})
106+
.HtmlAttributes(new { style = "height: 550px;" })
107+
.Scrollable()
108+
.Groupable()
109+
.Sortable()
110+
.Pageable(pageable => pageable
111+
.Refresh(true)
112+
.PageSizes(true)
113+
.ButtonCount(5))
114+
.DataSource(dataSource => dataSource
115+
.Ajax()
116+
.Read(read => read.Action("Responsive_Columns_Customers_Read", "Grid"))
117+
.PageSize(20)
118+
)
119+
)
120+
```
121+
{% if site.core %}
122+
```TagHelper
123+
<kendo-grid name="grid" style="height:550px;" resizable="true">
124+
<columns>
125+
<column field="ContactName" media="(min-width: 450px)">
126+
</column>
127+
<column field="ContactTitle" width="250" media="(min-width: 850px)">
128+
</column>
129+
<column field="CompanyName" width="250" media="(min-width: 850px)">
130+
</column>
131+
<column field="Country" media="(min-width: 450px)">
132+
</column>
133+
<column template="#=resColTemplate(data)#" title="Items" media="(min-width: 450px)">
134+
</column>
135+
</columns>
136+
<sortable enabled="true" />
137+
<scrollable enabled="true" />
138+
<reorderable enabled="true" />
139+
<column-menu enabled="true" />
140+
<filterable enabled="true" mode="row" />
141+
<pageable enabled="true" refresh="true" page-sizes-enabled="true" button-count="5" />
142+
<datasource page="0" type="DataSourceTagHelperType.Ajax" page-size="20">
143+
<schema data="Data" total="Total" errors="Errors">
144+
</schema>
145+
<transport>
146+
<read url="@Url.Action("Responsive_Columns_Customers_Read","Grid")" />
147+
</transport>
148+
</datasource>
149+
</kendo-grid>
150+
```
151+
{% endif %}
152+
```Script
153+
<script>
154+
var resColTemplate;
155+
156+
$(document).ready( function () {
157+
// Extract the template content from script tag with id "responsive-column-template" and compile a template.
158+
resColTemplate = kendo.template($("#responsive-column-template").html());
159+
});
160+
</script>
161+
```
162+
```Template
163+
<script id="responsive-column-template" type="text/x-kendo-template">
164+
<strong>Contact Name</strong>
165+
<p class="col-template-val">#=data.ContactName#</p>
166+
167+
<strong>Contact Title</strong>
168+
<p class="col-template-val">#=data.ContactTitle#</p>
169+
170+
<strong>Company Name</strong>
171+
<p class="col-template-val">#=data.CompanyName#</p>
172+
173+
<strong>Country</strong>
174+
<p class="col-template-val">#=data.Country#</p>
175+
</script>
176+
```
177+
178+
## See Also
179+
180+
* [Responsive Columns for the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/responsive-columns)
181+
* [Server-Side API](/api/grid)

0 commit comments

Comments
 (0)