Hello Mohammed,
I would suggest as a possible solution here is to set the DropDownList required or not depending on a condition in the DataBound event handler of the component:
.Events(e => e.DataBound("setRequiredAttr"))
...
function setRequiredAttr(e) {
if (e.sender.value()) {
e.sender.element.removeAttr("required");
}
else {
e.sender.element.attr("required", "required");
}
}
In the custom toolbar button handler, validate the form:
.ToolBar(x =>
{
x.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span>Validate DDL</a>");
})
..
function customCommand() {
var validator = $("#myForm").kendoValidator().data('kendoValidator');
validator.validate();
if (validator.validate()) {
$("#result").text("");
} else {
$("#result").text("Choose a value from the list");
}
}
...
<form id="myForm" action="someAction" method="post">
@(Html.Kendo().DropDownList()
.Name("color")
.OptionLabel("Select item")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Black",
Value = "1"
},
new SelectListItem() {
Text = "Orange",
Value = "2"
}
})
.Events(e => e.DataBound("setRequiredAttr"))
.HtmlAttributes(new { style = "width: 15%" })
)
</form>
<div id="result"></div>
More information on DropDownLists validation please find at the link below:
https://docs.telerik.com/kendo-ui/knowledge-base/dropdownlist-required-only-when-data-exists
For you convenience, I have prepared and attached to this reply a small MVC project demonstrating the above. Please examine it and let me know if you have any questions.
Regards,
Nikolay
Progress Telerik
Progress is here for your business, like always.
Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.