access MultiSelect Control value of Grid EditItemTemplate in Grid Page

[Ramu]

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? 

 

[Alex Hajigeorgieva]

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