web-dev-qa-db-fra.com

Comment obtenir les valeurs sélectionnées de Kendo Multi Select?

J'utilise Kendo multi select comme suit mais je ne peux pas obtenir les valeurs sélectionnées

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
for (var itm in items)
{
   selectedData.Push(itm);
}

mais le tableau selectedData renvoie les indices des éléments dans la sélection multiple et non les valeurs.

javascriptc#jqueryasp.net-mvctelerik
8
Omar Seleim

Vous pouvez également affecter le tableau, renvoyé par la méthode value (), directement à la variable, par exemple:

var ms = $("#multiselect").kendoMultiSelect({
  value: ["1", "2"]
}).data('kendoMultiSelect');

var selectedItems = ms.value();
console.log(selectedItems); // ["1", "2"]
2
topalkata

Utilisez cet autre retourne des indices.

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
for (var i=0;i<items.length;i++)
{
   selectedData.Push(items[i]);
}
2
volvox

Votre code d'origine ne semble pas faux. Êtes-vous sûr de n'obtenir que des indices? Vous devriez peut-être également publier votre code MultiSelect. J'ai trouvé cette question parce que j'avais le même problème et utilisé les autres réponses pour référence, mais je les ai trouvées trop compliquées. Alors laissez-moi répondre d'une autre manière compliquée :)

Voici ce que j'ai. Je sais que c'est plus de code que vous n'en avez besoin, mais je pense qu'il est important de voir l'image complète ici. Permettez-moi d'abord de mettre cela en place. Il y a un problème avec la propriété Kendo (). MultiSelect.Name ("SomeName") si vous l'utilisez plusieurs fois. "Nom" définit non seulement le nom html, mais aussi l'identifiant, et vous ne voulez jamais deux identifiants avec le même identifiant. Donc, dans mon code, j'ajoute un identifiant unique à ma propriété MultiSelect.Name pour garantir un identifiant unique. Je place le MultiSelect dans chaque ligne d'un tableau de personnes. Je le montre pour vous assurer que vous utilisez la propriété DataValueField afin que vous puissiez obtenir les valeurs sélectionnées (pas le texte que vous voyez dans l'interface utilisateur). Si vous affichez simplement une liste de valeurs de texte sans identifiant derrière elles, c'est peut-être pourquoi vous obtenez des données erronées?

@foreach (var cm in Model.CaseMembers)
{
<tr>
<td>
    @(Html.Kendo().MultiSelect()
      .Name("IsDelegateFor" + cm.CaseMemberId)                              
      .Placeholder("is a delegate for..")
      .DataTextField("FullName")
      .DataValueField("CaseMemberId")
      .BindTo(Model.Attorneys)
    )
</td>
</tr>
}

puis, plus tard, dans ma jQuery où j'essaie d'extraire le DataValueField (CaseMemberId), qui est le tableau des valeurs sélectionnées du MultiSelect ...

var sRows = [];
$('#cmGrid tr').each(function () {
    // 'this' is a tr
    $tr = $(this);
    // create an object that will hold my array of selected values (and other stuff)
    var rec = {};   
    rec.IsADelegateFor = [];        
    // loop over all tds in current row
    $('td', $tr).each(function (colIndex, col) {
        if (colIndex === 3) {
            // make sure our MultiSelect exists in this td
            if ($(this).find("#IsDelegateFor" + rec.CaseMemberId).length) {                        
                // it exists, so grab the array of selected ids and assign to our record array
                rec.IsADelegateFor = $(this).find("#IsDelegateFor" + rec.CaseMemberId).data("kendoMultiSelect").value();                        
            }
        }
    }
    // add this tr to the collection
    sRows.Push(rec);
}

c'est donc une façon super verbeuse de dire que cette seule ligne, comme les autres personnes mentionnées, fonctionne parfaitement pour saisir les identifiants. Il n'est pas nécessaire d'itérer sur le tableau .value () et de pousser le contenu vers un autre tableau!

rec.IsADelegateFor = $(this).find("#IsDelegateFor" + rec.CaseMemberId).data("kendoMultiSelect").value();

Donc, dans votre code d'origine, il n'y a aucune raison pour que les éléments suivants ne fonctionnent pas,

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData = [];
selectedData = multiselect.value();
console.log(selectedData);

sauf si

  • vous n'avez pas configuré votre MultiSelect correctement en C # avec DataValueField
  • vous avez plusieurs MultiSelects sur la page avec le même identifiant exact et il lit à partir d'un autre que vous ne le pensez.
  • Vous n'avez même pas de champs de valeur, juste une liste de texte.
1
redwards510

La solution donnée par volvox fonctionne.

Ci-dessous est la version jquery,

var multiselect = $("#SelectRoles").data("kendoMultiSelect");
var selectedData= [];
var items = multiselect.value();
$.each(items ,function(i,v){
  selectedData.Push(v);
});
0
Dashang G. Makwana