Unable to validate dropdownlist outside grid from kendogrid toolbar button

4 posts, 0 answers
  1. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 21 May 2020 Link to this post

    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 

  2. Nikolay
    Admin
    Nikolay  avatar
    328 posts

    Posted 25 May 2020 Link to this post

    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

    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.
  3. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 27 May 2020 in reply to Nikolay Link to this post

    Thank you It Worked!!!!
  4. Nikolay
    Admin
    Nikolay  avatar
    328 posts

    Posted 29 May 2020 Link to this post

    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

    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.
Back to Top