Kendo Grid Inline Edit avec option déroulante désactivée

Question

J'ai une grille de Kendo avec des options d'édition en ligne. J'ai une liste déroulante à partir de laquelle l'utilisateur doit sélectionner des valeurs. Je veux désactiver certains éléments de la liste déroulante de manière dynamique. Je dois dynamiquement activer et désactiver les options de la liste déroulante afin que je stocke les objets désactivés dans un tableau distinct de la source. Here est un exemple.

columns: [{ 
      field: "xxxx", 
      title: "xxxx", 
      template: function (dt) { 
       return dt.xxxx; 
      }, 
      editor: function (container, options) { 
       $('<input name="' + options.field + '"/>') 
        .appendTo(container) 
        .kendoDropDownList({ 
         dataTextField: "textField", 
         dataValueField: "ValueField", 
         dataDisabled:arrayOfObjThatShouldBeDisabled,//Don't work I know 
         dataSource: { 
          data: myDataSource // DYNAMIC SOURCE 
         } 
        }); 
      } 
     }] 

Voici un sample du site Web de Kendo.

Another Example

Answer 1

La question tourne près de this Kendo UI Dojo garder la base je tente d'expliquer ce que le code est et comment il la carte à mon problème. Tout d'abord, nous avons besoin d'une sorte de drapeau pour identifier où l'option doit être désactivée ou non pour que l'indicateur isDeleted avec false, soit mis à jour en conséquence. Ensuite, nous devons ajouter la section suivante en HTML, voici où la magie arrive, il vous donne un modèle qui décidera soit nous devons ajouter k-state-disabled classe à l'option ou non en fonction de la valeur de isDeleted.

<script id="template" type="text/x-kendo-template"> 
    <span class="#: isDeleted ? 'k-state-disabled': ''#"> 
     #: name # 
    </span> 
</script> 

Avec que je dois les modifications mineures au code comme suit et cela a fonctionné

$('<input name="' + options.field + '"/>') 
        .appendTo(container) 
        .kendoDropDownList({ 
         dataSource: { 
         data: myDataSource // DYNAMIC SOURCE 
         }, 
         dataTextField: "textField", 
         dataValueField: "ValueField", 
         select: function (e) { 
          if (e.dataItem.isDeleted) { 
           e.preventDefault(); 
          } 
         }, 
         template: kendo.template($("#template").html()) 
        });