Unable to validate dropdownlist outside grid from kendogrid toolbar button

[Mohammed]

Hi ,

I have a kendo dropdownlist outside grid and toolbar button inside grid, I need to validate the dropdownlist selection  when toolbar button inside grid is clicked , is there any way to validate the dropdowlist when no records selected from toolbar click, Help will be appreciated!!!

 

Regards

Mohmmed 

[Nikolay]

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:

//The Grid's toolbar    
.ToolBar(x =>
        {
            x.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span>Validate DDL</a>");
        })
..
//The button click handler
        function customCommand() {
            var validator = $("#myForm").kendoValidator().data('kendoValidator');
            validator.validate();

            if (validator.validate()) {
            $("#result").text("");
        } else {
            $("#result").text("Choose a value from the list");
        }
        }
...
//The DropDownList declaration
<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

[Mohammed]

Thank you It Worked!!!!

[Nikolay]

Hi Mohammed,

I am happy to hear my suggestion is helping you move forward with the project.

This thread will be closed now. For new inquiries please submit new tickets.

Regards,
Nikolay
Progress Telerik