Skip to content

Commit 7c1fcdf

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 994c894 commit 7c1fcdf

File tree

3 files changed

+396
-4
lines changed

3 files changed

+396
-4
lines changed

‎docs-aspnet/knowledge-base/grid-foreign-key-enum-field.md‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
---
2+
title: Filtering and Editing a ForeignKey Column Bound to an Enum Field in Grid
3+
description: Learn how to filter and edit a foreign key column that binds to an enumeration type in a {{ site.product }} Grid.
4+
type: how-to
5+
page_title: Filtering and Editing a ForeignKey Column Bound to an Enum Field in Grid
6+
slug: grid-foreign-key-enum-field
7+
tags: grid, foreign, key, enum, field, filter, edit, dropdownlist, telerik, core, mvc
8+
res_type: kb
9+
component: grid
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>{{ site.product }} Grid</td>
18+
</tr>
19+
<tr>
20+
<td>Product Version</td>
21+
<td>2024.4.1112</td>
22+
</tr>
23+
</table>
24+
25+
## Description
26+
27+
How can I bind a Grid to a ForeignKey column and ensure that the names of enum members are displayed in the column's filter menu? Also, how to use a DropDownList editor for the enum field when the Grid enters edit mode?
28+
29+
## Solution
30+
31+
When binding a ForeignKey column to an enum Model property, convert the enum members to a <a href="https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.mvc.rendering.selectlistitem?view=aspnetcore-9.0" target="_blank">`SelectListItem`</a> data collection.
32+
33+
* Binding the ForeignKey column to a local collection:
34+
35+
```HtmlHelper
36+
@(Html.Kendo().Grid<GridModel>()
37+
.Name("grid")
38+
.Columns(columns =>
39+
{
40+
columns.ForeignKey(p => p.Status, (System.Collections.IEnumerable)ViewData["statuses"], "Value", "Text")
41+
.Filterable(x => x.Extra(false).Operators(operators => operators.ForEnums(str => str.Clear().IsEqualTo("Equals"))));
42+
})
43+
...// Additional configuration.
44+
)
45+
```
46+
{% if site.core %}
47+
```TagHelper
48+
@addTagHelper *, Kendo.Mvc
49+
50+
<kendo-grid name="grid">
51+
<columns>
52+
<foreign-key-column field="Status" values='(System.Collections.IEnumerable)ViewData["statuses"]'
53+
value-field="Value"
54+
text-field="Text">
55+
<filterable enabled="true" extra="false">
56+
<operators>
57+
<enums eq="Equals"/>
58+
</operators>
59+
</filterable>
60+
</foreign-key-column>
61+
</columns>
62+
<!-- Additional configuration -->
63+
</kendo-grid>
64+
```
65+
```Controller
66+
public IActionResult GridPage() // The Action method that returns the View with the Grid.
67+
{
68+
var enumList = EnumToSelectList(typeof(ShipmentStatus)); // Parse the enum members to List<SelectListItem>.
69+
ViewData["statuses"] = enumList;
70+
return View();
71+
}
72+
73+
public static List<SelectListItem> EnumToSelectList(Type enumType)
74+
{
75+
return Enum
76+
.GetValues(enumType)
77+
.Cast<int>()
78+
.Select(i => new SelectListItem
79+
{
80+
Value = i.ToString(),
81+
Text = Enum.GetName(enumType, i),
82+
}
83+
)
84+
.ToList();
85+
}
86+
```
87+
{% else %}
88+
```Controller
89+
public ActionResult GridPage() // The Action method that returns the View with the Grid.
90+
{
91+
var enumList = EnumToSelectList(typeof(ShipmentStatus)); // Parse the enum members to List<SelectListItem>.
92+
ViewData["statuses"] = enumList;
93+
return View();
94+
}
95+
96+
public static List<SelectListItem> EnumToSelectList(Type enumType)
97+
{
98+
return Enum
99+
.GetValues(enumType)
100+
.Cast<int>()
101+
.Select(i => new SelectListItem
102+
{
103+
Value = i.ToString(),
104+
Text = Enum.GetName(enumType, i),
105+
}
106+
)
107+
.ToList();
108+
}
109+
```
110+
{% endif %}
111+
```Model
112+
public class GridModel
113+
{
114+
public ShipmentStatus Status { get; set; }
115+
}
116+
117+
public enum ShipmentStatus
118+
{
119+
[Display(Name = "In Process")]
120+
InProcess = 1,
121+
[Display(Name = "In Transit")]
122+
InTransit = 2,
123+
[Display(Name = "Received")]
124+
Received = 3,
125+
[Display(Name = "Lost In Shipment")]
126+
LostInShipment = 4
127+
}
128+
```
129+
130+
* Binding the ForeignKey column to remote data:
131+
132+
```HtmlHelper
133+
@(Html.Kendo().Grid<GridModel>()
134+
.Name("grid")
135+
.Columns(columns =>
136+
{
137+
columns.ForeignKey(p => p.Status, ds => ds.Read(r => r.Action("ReadStatuses", "Home")), "Value", "Text")
138+
.Filterable(x => x.Extra(false).Operators(operators => operators.ForEnums(str => str.Clear().IsEqualTo("Equals"))));
139+
})
140+
...// Additional configuration.
141+
)
142+
```
143+
{% if site.core %}
144+
```TagHelper
145+
@addTagHelper *, Kendo.Mvc
146+
147+
<kendo-grid name="grid">
148+
<columns>
149+
<foreign-key-column field="Status"
150+
value-field="Value"
151+
text-field="Text">
152+
<datasource>
153+
<transport>
154+
<read url="@Url.Action("ReadStatuses", "Home")"/>
155+
</transport>
156+
</datasource>
157+
<filterable enabled="true" extra="false">
158+
<operators>
159+
<enums eq="Equals"/>
160+
</operators>
161+
</filterable>
162+
</foreign-key-column>
163+
</columns>
164+
<!-- Additional configuration -->
165+
</kendo-grid>
166+
```
167+
{% endif %}
168+
```Controller
169+
public ActionResult ReadStatuses()
170+
{
171+
var enumList = EnumToSelectList(typeof(ShipmentStatus));
172+
return Json(enumList);
173+
}
174+
175+
public static List<SelectListItem> EnumToSelectList(Type enumType)
176+
{
177+
return Enum
178+
.GetValues(enumType)
179+
.Cast<int>()
180+
.Select(i => new SelectListItem
181+
{
182+
Value = i.ToString(),
183+
Text = Enum.GetName(enumType, i),
184+
}
185+
)
186+
.ToList();
187+
}
188+
```
189+
```Model
190+
public class GridModel
191+
{
192+
public ShipmentStatus Status { get; set; }
193+
}
194+
195+
public enum ShipmentStatus
196+
{
197+
[Display(Name = "In Process")]
198+
InProcess = 1,
199+
[Display(Name = "In Transit")]
200+
InTransit = 2,
201+
[Display(Name = "Received")]
202+
Received = 3,
203+
[Display(Name = "Lost In Shipment")]
204+
LostInShipment = 4
205+
}
206+
```
207+
208+
When the Grid is [InCell]({% slug batchediting_grid_aspnetcore %}) or [InLine]({% slug inlineediting_grid_aspnetcore %}) editable, the Grid will look for the default `GridForeignKey.cshtml` editor template in the **~Views\Shared\EditorTemplates** folder, and populate it with the passed data collection through the column declaration:
209+
210+
```C#
211+
@model object
212+
@(Html.Kendo().DropDownListFor(m => m)
213+
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("")+ "_Data"])
214+
)
215+
```
216+
217+
When the Grid is configured for [Popup editng]({% slug popupediting_grid_aspnetcore %}), decorate the Model property with the [`UIHint` attribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.uihintattribute.uihint?view=net-9.0) and add a DropDownList editor to the **~Views\Shared\EditorTemplates** folder.
218+
219+
```Model
220+
using System.ComponentModel.DataAnnotations;
221+
222+
public class GridModel
223+
{
224+
[UIHint("EnumEditor")]
225+
public ShipmentStatus Status { get; set; }
226+
}
227+
```
228+
```EnumEditor.cshtml
229+
// ~Views\Shared\EditorTemplates\EnumEditor.cshtml
230+
231+
@model ShipmentStatus
232+
233+
@(Html.Kendo().DropDownListFor(m => m)
234+
.BindTo(EnumToSelectList(typeof(ShipmentStatus)))
235+
)
236+
```
237+
238+
## More {{ site.framework }} Grid Resources
239+
240+
* [{{ site.framework }} Grid Documentation]({%slug htmlhelpers_grid_aspnetcore_overview%})
241+
242+
* [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index)
243+
244+
{% if site.core %}
245+
* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-core-ui/grid)
246+
247+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
248+
249+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
250+
251+
{% else %}
252+
* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)
253+
254+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
255+
256+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
257+
{% endif %}
258+
259+
## See Also
260+
261+
* [Client-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
262+
* [Server-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/grid)
263+
{% if site.core %}
264+
* [TagHelper API Reference of the Grid for {{ site.framework}}](https://docs.telerik.com/aspnet-core/api/taghelpers/grid)
265+
{% endif %}
266+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2024%})
267+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

‎docs-aspnet/knowledge-base/slider-reverse-scale.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
title: Reversing the Slider Labels to be Displayed from Maximum to Minimum
3+
description: An example on how to reverse the scale of the Slider for {{ site.framework }}.
4+
type: how-to
5+
page_title: Reversing the Slider Labels to be Displayed from Maximum to Minimum
6+
slug: slider-reverse-scale
7+
tags: slider, reverse, scale, decrement, steps
8+
ticketid: 1672392
9+
res_type: kb
10+
component: slider
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tr>
17+
<td>Product</td>
18+
<td>{{ site.product }} Slider</td>
19+
</tr>
20+
<tr>
21+
<td>Product Version</td>
22+
<td>2024.4.1112</td>
23+
</tr>
24+
</table>
25+
26+
## Description
27+
28+
By design, the Slider values are positioned from the minimum value to the maximum value (left to right).
29+
How can I reverse the minimum and maximum values of the Slider so the maximum value is displayed on the left and the minimum on the right?
30+
31+
## Solution
32+
33+
1. Set the `Min()` option to **-10** and the `Max()` value to **-1**.
34+
1. Set the initial value to **-10**.
35+
1. Update the default Tooltip template to show the absolute value (for example, **10** instead of **-10**).
36+
1. Update the Slider labels to show the absolute values when the page with the Slider is loaded.
37+
38+
```HtmlHelper
39+
@(Html.Kendo().Slider()
40+
.Name("reversedSlider")
41+
.Min(-10)
42+
.Max(-1)
43+
.LargeStep(1)
44+
.Value(-10)
45+
.Tooltip(x => x.Template("#= Math.abs(value)#"))
46+
)
47+
```
48+
{% if site.core %}
49+
```TagHelper
50+
@addTagHelper *, Kendo.Mvc
51+
52+
<kendo-slider name="reversedSlider"
53+
large-step="1"
54+
max="-1"
55+
min="-10"
56+
value="-10">
57+
<slider-tooltip template="#= Math.abs(value)#"/>
58+
</kendo-slider>
59+
```
60+
{% endif %}
61+
```Scripts
62+
<script>
63+
$(document).ready(function(){
64+
var list = $('.k-slider ul.k-slider-items');
65+
var listItems = list.children('li'); // Select the Slider label element.
66+
$.each(listItems, function(){ // Loop through them.
67+
let title = parseInt($(this).attr("title")); // Get the respective value.
68+
let updatedTitle = Math.abs(title); // Get its absolute value.
69+
$(this).attr("title", updatedTitle); // Update the "title" attribute.
70+
$(this).find(".k-label").text(updatedTitle); // Update the label text.
71+
});
72+
});
73+
</script>
74+
```
75+
76+
When you need to get the Slider's value, use its absolute value:
77+
78+
```Scripts
79+
<script>
80+
var slider = $("#reversedSlider").data("kendoSlider");
81+
var sliderValue = Math.abs(slider.value());
82+
</script>
83+
```
84+
85+
{% if site.core %}
86+
For a runnable example based on the code above, refer to the following REPL samples:
87+
88+
* [Sample code with the Slider HtmlHelper](https://netcorerepl.telerik.com/mePcYfPK06mnizlY50)
89+
* [Sample code with the Slider TagHelper](https://netcorerepl.telerik.com/GIbQOzPU0819vLLs50)
90+
{% else %}
91+
For a runnable example based on the code above, refer to the [REPL example on displaying the Slider scale from maximum to minimum](https://netcorerepl.telerik.com/mePcYfPK06mnizlY50).
92+
{% endif %}
93+
94+
## More {{ site.framework }} Slider Resources
95+
96+
* [{{ site.framework }} Slider Documentation]({%slug overview_sliderhelper_aspnetcore%})
97+
98+
* [{{ site.framework }} Slider Demos](https://demos.telerik.com/{{ site.platform }}/slider)
99+
100+
{% if site.core %}
101+
* [{{ site.framework }} Slider Product Page](https://www.telerik.com/aspnet-core-ui/slider)
102+
103+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
104+
105+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
106+
107+
{% else %}
108+
* [{{ site.framework }} Slider Product Page](https://www.telerik.com/aspnet-mvc/slider)
109+
110+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
111+
112+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
113+
{% endif %}
114+
115+
## See Also
116+
117+
* [Client-Side API Reference of the Slider for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/slider)
118+
* [Server-Side API Reference of the Slider for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/slider)
119+
{% if site.core %}
120+
* [Server-Side TagHelper API Reference of the Slider for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/slider)
121+
{% endif %}
122+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2024%})
123+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

0 commit comments

Comments
 (0)