web-dev-qa-db-fra.com

Désactiver les options de la liste déroulante KendoUI

Comment désactiver une option d'une liste déroulante de kendoiu?
Je ne trouvais pas comment faire cela dans leur documentation ...

htmlkendo-ui
11
CoffeeCode

Essayez l’approche suivante ( ici et ici il existe des démos): utilisez un modèle template pour vos éléments, qui ajoute conditionnellement une classe aux éléments à désactiver. Les informations sur les éléments à désactiver proviennent des objets de données sous-jacents.

HTML:

<script id="template" type="text/x-kendo-tmpl">
    #
    if (data.disabled != null) {# 
    <span class="tbd" > ${data.text} - is disabled </span> 
    # } else { #
    <span>${data.text}</span > #
    }#
</script>
<input id="color" value="1" />

jQuery et Kendo UI (notez ici la propriété supplémentaire disabled pour le Orange et l'utilisation de l'événement dataBound ):

var data = [{
    text: "Black",
    value: "1"
}, {
    text: "Orange",
    value: "2",
    disabled: "disabled"
}, {
    text: "Grey",
    value: "3"
}];

$("#color").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0,
    template: kendo.template($("#template").html()),
    dataBound: function (e) {
        $(".tbd").parent().click(false);
    }
});

CSS pour le grisonnement:

.tbd{
   color:#777777
}
16
Alex Filipovici

Alors que la réponse acceptée empêchera un clic sur l'élément, elle permet toujours la navigation au clavier (et semble assez féroce).

Utiliser les DataItems pour identifier quel élément doit être désactivé est la solution, mais au lieu de supprimer le gestionnaire de clics, il est plus simple de mettre en œuvre un gestionnaire Select qui stoppe la chaîne. Cette méthode est supportée et documentée par Kendo:

Déclenché lorsqu'un élément de la fenêtre contextuelle est sélectionné par l'utilisateur avec la souris/touche Ou avec la navigation au clavier.

...

fonction e.preventDefault 

Si appelé, empêche l'action select. Le widget conservera l'élément Précédent sélectionné.

Il ne reste plus qu'à détecter si nous voulons annuler la sélection ou non, ce qui est trivial si votre élément de données conserve une propriété qui identifie si elle est disponible ou non:

function Select(e) {
    if (e.sender.dataItem(e.item).disabled) {
        e.preventDefault();
    }
}

L'utilisation d'un modèle pour injecter une classe spécifique n'est pas nécessaire, mais je le recommanderais toujours, ne serait-ce que pour permettre un style approprié.

5
Jonathan M

Sur la base de la question ici , vous pouvez accéder à l’article concerné et modifier les attributs de la manière suivante:

var ds = $('#YourCombo').data().kendoComboBox.dataSource;

//someIndex is the index of the item in the dataSource
ds.data()[someIndex].set("enabled","False");
3
Nick

Kendo ne supporte pas cette fonctionnalité, mais c’est le hack le plus simple que j’ai trouvé pour désactiver une option dans Kendo Dropdown. 

$("#" + id + "_listbox .k-item")[index].disabled = true;

où id -> ID de votre liste déroulante
index -> position de l'élément dans le menu déroulant que vous souhaitez désactiver.

J'espère que ça aide. Prendre plaisir :)

2
DinoMyte

Vous pouvez essayer quelque chose comme ça:

 var dropDown = $("#yourDropdown").data("kendoDropDownList");
 dropDown.enable(false);
1
Parthiv Pandya