Skip to content

Commit 994c894

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

File tree

4 files changed

+247
-0
lines changed

4 files changed

+247
-0
lines changed

‎docs-aspnet/knowledge-base/form-fields-validation-dropdownlist-data.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
---
2+
title: Dynamically Adjusting Form Field Validation Based on Available Options in the DropDownList Editor
3+
description: Learn how to make the Form fields required or non-required based on the available options of the DropDownList editors, which are configured for remote data binding.
4+
type: how-to
5+
page_title: Dynamically Adjusting Form Field Validation Based on Available Options in the DropDownList Editor
6+
slug: form-fields-validation-dropdownlist-data
7+
tags: form, fields, required, dropdownlist, remote, data, options, requestend
8+
res_type: kb
9+
ticketid: 1637672
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>{{ site.product }} Form</td>
19+
</tr>
20+
<tr>
21+
<td>Product</td>
22+
<td>{{ site.product }} DropDownList</td>
23+
</tr>
24+
<tr>
25+
<td>Product Version</td>
26+
<td>2024.3.806</td>
27+
</tr>
28+
</tbody>
29+
</table>
30+
31+
## Description
32+
33+
How can I dynamically set the fields in a Form as required or non-required based on the available options in their DropDownList editors?
34+
35+
When using {{ site.product }} Form, which contains {{ site.product }} DropDownList editors that bind to remote data, you can make the fields non-required in cases when no options are received from the server. Otherwise, the users will be forced to select an option to submit the Form.
36+
37+
## Solution
38+
39+
1. Subscribe to the [`RequestEnd`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/datasourceeventbuilder#requestendsystemstring) event of the DataSource of each DropDownList editor using a template delegate.
40+
1. Within the inline event handler, access the event data and pass it to a JavaScript function along with the name of the field to which the DropDownList binds.
41+
1. Within the JavaScript function **validateField**, check if there are available options received from the server and set the attribute `required` to the input element of the respective field with jQuery.
42+
1. Reuse the **validateField** function for all DropDownList editors that loads data from the server.
43+
44+
```HtmlHelper
45+
@(Html.Kendo().Form<FormItems>()
46+
.Name("exampleForm")
47+
.HtmlAttributes(new { action = "Items", method = "POST" })
48+
.Items(i =>
49+
{
50+
i.Add()
51+
.Field(f => f.EquipmentType)
52+
.Label(l => l.Text("Equipment Type"))
53+
.Editor(e =>
54+
{
55+
e.DropDownList()
56+
.DataTextField("ShortName")
57+
.DataValueField("EquipmentTypeID")
58+
.OptionLabel("Select")
59+
.DataSource(source =>
60+
{
61+
source
62+
.Read(read => { read.Action("GetItems","Home"); })
63+
.Events(ev => ev.RequestEnd(@<text> // Subscribe to the event by a template delegate.
64+
function(eventData) { // Access the event data.
65+
return validateField(eventData, "EquipmentType"); // Pass the event data and the name of the field to the custom function.
66+
}
67+
</text>));
68+
});
69+
});
70+
})
71+
)
72+
```
73+
{% if site.core %}
74+
```TagHelper
75+
@addTagHelper *, Kendo.Mvc
76+
@model FormItems
77+
78+
<kendo-form name="exampleForm" form-data="@Model" method="POST" asp-action="Items">
79+
<form-items>
80+
<form-item field="EquipmentType">
81+
<item-label text="Equipment Type:" />
82+
<dropdownlist-editor placeholder="Select" datatextfield="ShortName" datavaluefield="EquipmentTypeID">
83+
<datasource on-request-end="function(eventData) {
84+
return validateField(eventData, 'EquipmentType');
85+
}">
86+
<transport>
87+
<read url="@Url.Action("GetItems", "Home")"/>
88+
</transport>
89+
</datasource>
90+
</dropdownlist-editor>
91+
</form-item>
92+
</form-items>
93+
</kendo-form>
94+
```
95+
{% endif %}
96+
```Scripts
97+
<script>
98+
function validateField(eventData, fieldName) { // Reuse this handler for all editors that loads data from the server.
99+
if (eventData.response.length > 0) {
100+
$("#" + fieldName).attr("required", "required");
101+
} else {
102+
$("#" + fieldName).removeAttr("required");
103+
}
104+
}
105+
</script>
106+
```
107+
108+
## More {{ site.framework }} Form Resources
109+
110+
* [{{ site.framework }} Form Documentation]({%slug htmlhelpers_form_aspnetcore_overview%})
111+
112+
* [{{ site.framework }} Form Demos](https://demos.telerik.com/{{ site.platform }}/form)
113+
114+
{% if site.core %}
115+
* [{{ site.framework }} Form Product Page](https://www.telerik.com/aspnet-core-ui/form)
116+
117+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
118+
119+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
120+
121+
{% else %}
122+
* [{{ site.framework }} Form Product Page](https://www.telerik.com/aspnet-mvc/form)
123+
124+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
125+
126+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
127+
{% endif %}
128+
129+
## See Also
130+
131+
* [Server-Side API Reference of the Form for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/form)
132+
{% if site.core %}
133+
* [Server-Side TagHelper API Reference of the Form for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/form)
134+
{% endif %}
135+
* [Server-Side API Reference of the DropDownList for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/dropdownlist)
136+
{% if site.core %}
137+
* [Server-Side TagHelper API Reference of the DropDownList for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/dropdownlist)
138+
{% endif %}
139+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
140+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

‎docs-aspnet/knowledge-base/images/repl-result.png‎

93.7 KB
Loading

‎docs-aspnet/knowledge-base/images/repl-share.png‎

1.28 KB
Loading

‎docs-aspnet/knowledge-base/repl-isolate-sample.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
title: Isolate Sample in REPL
3+
description: A guide explaining how to isolate a runnable sample in the live REPL tool.
4+
type: how-to
5+
page_title: Isolate Sample in REPL
6+
slug: repl-isolate-sample
7+
tags: aspnet, core, dotnet-core, sample, project, repl
8+
res_type: kb
9+
---
10+
11+
12+
## Description
13+
14+
In many support cases, it is pretty beneficial to isolate the issue in a separate sample to demonstrate the problem at hand. This leads to quick and efficient technical communication within the support thread without going back and forth in circles.
15+
16+
However, creating a new Core or MVC project to demonstrate the issue is not always practical. Is there a way I can expedite the process and make it quicker and more convenient?
17+
18+
## Solution
19+
20+
To tackle this situation, Telerik proudly introduced the unique real-time server compilation tool Telerik REPL:
21+
22+
https://netcorerepl.telerik.com/
23+
24+
Using this tool, you can demonstrate the issue in a live sample with several simple steps. Here is a sample process with a Grid and its Data Binding functionality.
25+
26+
1. Open the tool's web site:
27+
https://netcorerepl.telerik.com/
28+
29+
2. Add a Model class definition:
30+
```C#
31+
@using System.ComponentModel.DataAnnotations;
32+
33+
@functions {
34+
public class OrderViewModel
35+
{
36+
public int OrderID { get; set; }
37+
public decimal? Freight { get; set; }
38+
public DateTime? OrderDate { get; set; }
39+
[Required]
40+
public string ShipName { get; set; }
41+
public string ShipCity { get; set; }
42+
public bool Active { get; set; }
43+
}
44+
}
45+
```
46+
47+
3. Add the logic from your controller action :
48+
```C#
49+
@{
50+
// this part simulates Controller Read Action
51+
var data = Enumerable.Range(0, 50).Select(i => new OrderViewModel
52+
{
53+
OrderID = i,
54+
Freight = i * 10,
55+
OrderDate = new DateTime(2026, 9, 15).AddDays(i % 7),
56+
ShipName = "ShipName " + i,
57+
ShipCity = "ShipCity " + i,
58+
Active = i % 3 == 0
59+
});
60+
}
61+
```
62+
63+
4. Add the Grid definition, but instead of Read, use the BindTo property:
64+
```Razor
65+
@(Html.Kendo().Grid<OrderViewModel>()
66+
.Name("Grid")
67+
.Columns(columns =>
68+
{
69+
columns.Bound(p => p.OrderID).Filterable(false);
70+
columns.Bound(p => p.Freight);
71+
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
72+
columns.Bound(p => p.ShipName);
73+
columns.Bound(p => p.ShipName);
74+
columns.Bound(p => p.Active);
75+
})
76+
.Pageable()
77+
.Sortable()
78+
// replace remote binding with local collection just for
79+
// demonstrating the issue
80+
.BindTo(data)
81+
.Scrollable(scr => scr.Height(430))
82+
.Filterable()
83+
.DataSource(dataSource => dataSource
84+
.Ajax()
85+
.PageSize(15)
86+
.ServerOperation(false)
87+
//.Read(read => read.Action("Orders_Read", "Grid"))
88+
)
89+
)
90+
```
91+
92+
5. Click Run and ensure the sample is working as expected:
93+
94+
![REPL Result](images/repl-result.png)
95+
96+
6. Modify the sample to reproduce the issue you are facing.
97+
98+
7. Click the "Share Snippet" button to generate a new URL of the REPL sample and send it in the ongoing thread:
99+
100+
![REPL Share](images/repl-share.png)
101+
102+
Here is a link with the REPL of the entire sample:
103+
https://netcorerepl.telerik.com/mIPckNvk57VISrJ323
104+
105+
## See Also
106+
107+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

0 commit comments

Comments
 (0)