2016-08-18 2 views
0

Je reproduis la fonctionnalité très proche de ce qui est vu ici. https://onabai.wordpress.com/2013/07/17/kendoui-multiselect-in-a-grid-yes-we-can/Kendo Grid Inline MultiSelect - Valeurs affichées

J'ai une grille de Kendo avec un champ éditeur multisélect en ligne. J'ai un événement datasource.sync() lancé sur le changement de ce multiselect. Le problème que j'ai est de savoir comment les données sont disposées dans les variables post. J'utilise FireBug dans FireFox. Je peux définir une fonction pour voir les valeurs dans mon champ multisélect comme ceci à l'événement sync().

console.log(this.value());

Ce serait pour un champ de tableau de chaînes que j'ai appelé « RoleCode ». Quoi qu'il en soit, le journal de la console affiche les valeurs comme ils le devraient, par exemple

A, OU

Cependant, quand je regarde dans l'appel Poste à mon contrôleur et les paramètres, je vois le champ RoleCode est dupliqué, ce qui est pourquoi mon contrôleur ne reconnaît pas la signature de la méthode. Par exemple, voici ce que je vois dans Firebug ...

ID 123 
Field1 TextFromField1 
RoleCode[1][RoleCode] OU 
RoleCode[] A 

Toute idée comment je le mettre en place pour que les paramètres post utilisables?

MISE À JOUR

Pour l'instant je viens modifié la fonction de mise à jour pour envoyer les valeurs MultiSelect comme une chaîne séparées par des virgules. Je peux traiter avec eux dans le contrôleur. Je n'aime pas vraiment cette configuration, mais jusqu'à ce que je trouve comment envoyer les valeurs envoyées correctement, c'est ce que je vais faire.

update: { 
      url: "Home/GridUpdate", 
      type: "POST", 
      dataType: "json", 
      data: function() { 
       //Grid does not post multiselect array correctly, need to convert to a string 
       var rolesString = $("#gridRoleList").data("kendoMultiSelect").value().toString(); 
       return { rolesString: rolesString }; 
      }, 
      complete: function (e) { 
       setTimeout(function() { 
        refreshGrid(); 
       }, 300); 
      }, 
      success: function (result) { 
       // notify the data source that the request succeeded 
       options.success(result); 
      }, 
      error: function (result) { 
       // notify the data source that the request failed 
       options.error(result); 
      } 
     }, 

MISE À JOUR 2

En fait, ce n'est pas une bonne idée parce que si je modifie un autre champ dans la grille, je reçois une erreur de js parce que le multiselect ne se trouve pas.

Répondre

0

Voici comment je l'ai résolu. Sur l'événement de modification de la fonction d'éditeur, j'ai mis à jour la valeur du modèle avec la valeur du multiselect. Ensuite, les données sont correctement affichées comme un tableau de chaînes comme celui-ci.

ID 123 
Field1 TextFromField1 
RoleCode[] A 
RoleCode[] OU 

Ma fonction éditeur de grille

function roleMultiSelectEditor(container, options) { 
    $('<input id = "gridRoleList" name="' + options.field + '"/>') 
     .appendTo(container) 
     .kendoMultiSelect({ 
      dataTextField: "RoleCode", 
      dataValueField: "RoleCode", 
      autoBind: true,  
      change: function (e) { 
       //Applies the value of the multiselect to the model.RoleCode field 
       //Necessary to correctly post values to controller 
       options.model.RoleCode = this.value(); 
       processGridMultiSelectChange(); 
      }, 
      dataSource: { 
       type: "json", 
       transport: { 
        read: { 
         dataType: "json", 
         url: baseUrl + "api/DropDownData/RoleList", 
        }, 
       } 
      }, 
      dataBound: function (e) { 
      } 
     }); 
} 
0

On dirait que votre problème peut être résolu en envoyant les données après sérialisation il

action Lire - en utilisant MVC Wrapper

.Create(create => create.Action("Create", "Home").Data("serialize")) 

JS code

<script type="text/javascript"> 

function serialize(data) { 
    debugger; 
    for (var property in data) { 
     if ($.isArray(data[property])) { 
      serializeArray(property, data[property], data); 
     } 
    } 
} 

function serializeArray(prefix, array, result) { 
    for (var i = 0; i < array.length; i++) { 
     if ($.isPlainObject(array[i])) { 
      for (var property in array[i]) { 
       result[prefix + "[" + i + "]." + property] = array[i][property]; 
      } 
     } 
     else { 
      result[prefix + "[" + i + "]"] = array[i]; 
     } 
    } 
} 


</script> 

Please refer here for complete source code

+0

Merci. Je pense que c'est ce dont j'ai besoin, mais je n'utilise pas les wrappers MVC. Une idée de comment exécuter les données à travers ces fonctions sur l'événement datasource.sync(), ou dans la fonction de mise à jour du transport? – madvora

+0

Vous pouvez utiliser le fichier transport.read.fonction de données pour envoyer des paramètres supplémentaires à partir de JS, s'il vous plaît se référer à la documentation UI Kendo ici. http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data –