access MultiSelect Control value of Grid EditItemTemplate in Grid Page

2 posts, 0 answers
  1. Ramu
    Ramu avatar
    6 posts
    Member since:
    May 2020

    Posted 23 Jun 2020 Link to this post

    I am using MultiSelect Control in the EditItemTemplate for a Grid Column. The MultiSelect control was in the Partial view.

    I had 2 issues here.

    1. I am not able to make MultiSelect Column as Required Field. Kendo Validation is not firing when I make changes to this control, and     is working for remaining all edit controls. As the model for this field is ICollection, Required DataAnnotation is not working and when I    wrote custom validation in Model Class and use as Data Annotation, it is showing as Kendo Alert and losing the changes made to the Editor. How can I show it as Required field? (It should display like in the attachment). 

    the below code is not firing for multiselect

    (function ($, kendo) {
            //Extending the build in validator
            $.extend(true, kendo.ui.validator, {
                rules: {

    2. Based on the value of this MultiSelect control I need to Enable/Disable one of the other control(checkbox) in Grid. How can I access the value of detect the MultiSelect value change event? 

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 26 Jun 2020 Link to this post

    Hi, Ramu,

    It appears that the validation is working according to the provided screenshot.

    I created a sample project that also shows that and you may find it attached here. The [Required] attributes in the model are correctly serialized and they take effect as soon as the MultiSelect is left without an option.

    For your second question, there are different ways to accomplish the desired outcome. For example, you can:

    • add an edit event handler and disable/enable the checkbox base on some condition by adding the "k-state-disabled" class to it
       .Events(e=>e.Edit("onEdit"))
      function onEdit(e) {
              if (e.model.Categories.length <= 3) {
                  e.container.find(".k-checkbox").addClass("k-state-disabled");
              } else {
                  e.container.find(".k-checkbox").removeClass("k-state-disabled");
              }
          }
    • add a change event handler to the MultiSelect control that does the same thing

      .Events(e=>e.Change("onChange"))
      function onChange(e) {
                  console.log(this.value())
                  if (this.value().length <= 3) {
                      $(".k-grid-edit-row").find(".k-checkbox").addClass("k-state-disabled");
                  } else {
                      $(".k-grid-edit-row").find(".k-checkbox").removeClass("k-state-disabled");
                  }
              }

    If you face any difficulties, please update the provided project to illustrate them.

    Regards,
    Alex Hajigeorgieva
    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