Skip to content

Commit 8124547

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 62ec91c commit 8124547

File tree

4 files changed

+498
-4
lines changed

4 files changed

+498
-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/grid-show-popup-on-change-before-leave-page.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
title: Show Confirmation Popup When User Leaves the Page with Unsaved Grid Changes
3+
description: Learn how to detect changes in an InLine editable Telerik UI for {{ site.framework }} Grid and prompt the user before leaving unsaved changes.
4+
type: how-to
5+
page_title: Show Confirmation Popup When User Leaves the Page with Unsaved Grid Changes
6+
slug: grid-show-popup-on-change-before-leave-page
7+
tags: grid, inline, editing, detect, unsaved, change, popup, dialog, prompt, user, confirmation, core, mvc, telerik
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>Progress {{ site.product }} version</td>
21+
<td>2024.4.1112</td>
22+
</tr>
23+
</table>
24+
25+
## Description
26+
27+
How can I detect changes in an InLine editable Grid when the user tries to leave the page and prompt the user with a warning message about the unsaved changes?
28+
29+
## Solution
30+
31+
To detect the changes in the Grid when the user attempts to navigate away from the page with the Grid, you can check whether there has been a change in the Grid's DataSource. If at least one change occurs, show the prompt.
32+
33+
1. Handle the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event" target="_blank">`beforeunload` event</a> of the current window.
34+
1. Get a reference to the Grid and access its DataSource.
35+
1. Check the `dirty` flag of the data items, which indicates that the data item has been changed.
36+
1. Show the popup if at least one change occurs.
37+
38+
```HtmlHelper
39+
@(Html.Kendo().Grid<ProductViewModel>()
40+
.Name("grid")
41+
.Editable(editable => editable.Mode(GridEditMode.InLine))
42+
...// Additional configuration.
43+
)
44+
```
45+
{% if site.core %}
46+
```TagHelper
47+
@addTagHelper *, Kendo.Mvc
48+
<kendo-grid name="grid">
49+
<editable mode="inline"/>
50+
<!-- Additional configuration-->
51+
</kendo-grid>
52+
```
53+
{% endif %}
54+
```Script
55+
$(document).ready(function () {
56+
$(window).bind("beforeunload", function (event) {
57+
var gridDS = $('#grid').getKendoGrid().dataSource; // Access the Grid's DataSource.
58+
if (dataSourceHasChanges(gridDS)) {
59+
return "You have unsaved changes. Are you sure you want to leave this page?"; // Show the popup.
60+
}
61+
});
62+
});
63+
64+
function dataSourceHasChanges(ds) { // Check the Grid's DataSource for changes.
65+
var dirty = false;
66+
$.each(ds.data(), function () {
67+
if (this.dirty == true) {
68+
dirty = true;
69+
}
70+
});
71+
return dirty;
72+
}
73+
```
74+
75+
## More {{ site.framework }} Grid Resources
76+
77+
* [{{ site.framework }} Grid Documentation]({%slug htmlhelpers_grid_aspnetcore_overview%})
78+
79+
* [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index)
80+
81+
{% if site.core %}
82+
* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-core-ui/grid)
83+
84+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
85+
86+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
87+
88+
{% else %}
89+
* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)
90+
91+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
92+
93+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
94+
{% endif %}
95+
96+
## See Also
97+
98+
* [Client-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
99+
* [Server-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/grid)
100+
* [Server-Side TagHelper API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/aspnet-core/api/taghelpers/grid)
101+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2024%})
102+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

0 commit comments

Comments
 (0)