web-dev-qa-db-fra.com

Changer la valeur sélectionnée de kendo ui dropdownlist

J'ai un liste déroulante kendo ui à mon avis:

$("#Instrument").kendoDropDownList({
    dataTextField: "symbol",
    dataValueField: "symbol",
    dataSource: data,
    index: 0
});

Comment puis-je changer la valeur sélectionnée avec jQuery? J'ai essayé:

$("#Instrument").val(symbol);

Mais cela ne fonctionne pas comme prévu.

javascriptjqueryasp.net-mvckendo-uitelerik
41
anilca

Vous devez utiliser la méthode DropDownList select de Kendo UI (documentation in here ).

Fondamentalement, vous devriez:

// get a reference to the dropdown list
var dropdownlist = $("#Instrument").data("kendoDropDownList");

Si vous connaissez l'index, vous pouvez utiliser:

// selects by index
dropdownlist.select(1);

Si non, utilisez:

// selects item if its text is equal to "test" using predicate function
dropdownlist.select(function(dataItem) {
    return dataItem.symbol === "test";
});

Exemple JSFiddle ici

69
OnaBai

La manière la plus simple de faire ceci est:

$("#Instrument").data('kendoDropDownList').value("A value");

Voici le exemple de JSFiddle .

28
Gang

Il semble y avoir un moyen plus simple, du moins dans Kendo UI v2015.2.624:

$('#myDropDownSelector').data('kendoDropDownList').search('Text value to find');

S'il n'y a pas de correspondance dans la liste déroulante, Kendo apparaît pour définir la liste déroulante sur une valeur non sélectionnée, ce qui est logique.

Je ne pouvais pas obtenir la réponse de @ Gang au travail, mais si vous échangez son value avec search, comme ci-dessus, nous sommes en or.

5
ruffin

Comme il s’agit de l’un des meilleurs résultats de recherche pour les questions connexes, j’ai pensé qu’il était utile de préciser comment vous pouvez faire en sorte que cela fonctionne avec Kendo (). DropDownListFor ().

Tout est identique à celui de l'article d'OnaBai, à l'exception de la manière dont vous sélectionnez l'élément en fonction de son texte et de votre sélecteur.

Pour ce faire, vous devez échanger dataItem.symbol pour dataItem. [DataTextFieldName]. Quel que soit le champ de modèle que vous avez utilisé pour .DataTextField (), comparez-le.

@(Html.Kendo().DropDownListFor(model => model.Status.StatusId)
    .Name("Status.StatusId")
    .DataTextField("StatusName")
    .DataValueField("StatusId")
    .BindTo(...)
)

//So that your ViewModel gets bound properly on the post, naming is a bit 
//different and as such you need to replace the periods with underscores
var ddl = $('#Status_StatusId').data('kendoDropDownList');    

ddl.select(function(dataItem) {
    return dataItem.StatusName === "Active";
});
5
user2958958

Il est possible de sélectionner "nativement" par valeur:

dropdownlist.select(1);
2
HSM