Comment modifier la colonne de la grille Kendo en fonction de la liste déroulante

Question

Nous développons un projet d'application web en ce sens que nous utilisons Kendo UI. Est-ce possible de faire en sorte que le premier titre/titre de la première colonne soit ce que nous avons sélectionné dans la liste déroulante. Par exemple: - Si un numéro de série est recherché, le numéro de série doit figurer dans la première colonne de la recherche. Mais je suis incapable d'obtenir cela puisque nous avons défini la définition de colonne de manière générique de manière triée. Selon la sélection, nous cachons le reste de la colonne. par exemple:

xxx.GridColDef = [ { 
    field : "serialNo", 
    title : "Serial No", 

}, { 
    field : "firstname", 
    title : "firstname", 
    }, { 
    field : "lastnameo", 
    title : "lastname", 
    }, 

dans la liste déroulante si je sélectionner le nom d'abord le premier nom doit être dans la première colonne. mais je reçois la première colonne en tant que numéro de série Y at-il un moyen? sans ajouter de définition de colonne séparée pour chacun.

Version Kendo - 2012.1.322

cela doit être fait automatiquement ne pas utiliser la colonne réordonner pas manuellement

---

Désolé si je ne suis pas clair. Ce que je veux est

En déroulant je

série No Prénom Nom date de naissance

Au départ, le réseau sera comme ci-dessous

Numéro de série Prénom Nom DOB

Si l'utilisateur sélectionne "Prénom" à partir de la liste déroulante, il devrait être comme ceci

Prénom Numéro de série Nom de famille DOB

Espérons que cela aide. si vous avez besoin de plus de précisions faites le moi savoir. Merci d'avoir fourni une solution pour cela.

une chose: -

« Fiddle en utilisant votre version actuelle de Kendo 2012.1.322 » dans ce violon je suis incapable de sélectionner dans le menu déroulant.

Answer 1

Mise à jour Réponse 2

Le cadre actuel de la grille de KendoUI ne supporte pas la possibilité de changer de colonnes dans le code. J'ai créé un nouveau violon où vous n'avez pas à réorganiser complètement les colonnes dans chaque cas de commutateur. Il boucle dans votre définition de colonne et si la valeur déroulante est là, il le supprime du tableau et le place à la première position. Je ne sais pas comment interagissent vos 50 colonnes et vos 8 drop downs, alors il m'est difficile de donner une réponse complètement précise. Mais entre les suggestions multiples ici, j'espère que vous pouvez arriver à une solution :)

J'ai créé une nouvelle variable de définition tempColumn afin que la définition de la colonne d'origine est toujours disponible dans son état d'origine.

function onSelect(e) { 
    var ddlVal = this.dataItem(e.item.index()).value; 
    var tempColumns = columnDefinitions; 

    $(tempColumns).each(function(index) { 
     if (ddlVal == this.title) { 
      tempColumns.splice(index, 1); 
      tempColumns.splice(0, 0, this); 
     } 
    }); 

    createGrid(tempColumns); 

}

New fiddle which uses spice to re-order the columns

Mise à jour Réponse

J'ai créé un nouveau violon avec votre version actuelle de Kendo. Vous n'avez pas besoin de mettre à jour votre version car je ne crois pas qu'il existe un moyen de le faire dans le cadre de Kendo.

Cette solution implique de redéfinir vos définitions de colonnes lorsque vous effectuez une sélection à partir de la liste déroulante, puis que vous recréez la grille.

Updated fiddle with your current version of Kendo

* Pour une raison quelconque, Internet Explorer ne joue pas bien avec jsFiddle parfois. Cet exemple fonctionne dans Firefox et Chrome mais pas dans IE. Si vous ne pouvez pas essayer un navigateur différent pour le voir fonctionner, branchez le code dans votre solution et testez-le.

Réponse originale

J'ai fourni 2 solutions différentes.

1) Est-il possible de mettre à jour votre version de KendoUI? Si vous le pouvez, vous pouvez utiliser les méthodes .showColumn() et .hideColumn().

Voici un violon ci-dessous en utilisant KendoUI 2012.2.710. Sur l'événement select de la liste déroulante, vous affichez/cachez simplement les colonnes appropriées. Vraiment facile et direct.

Fiddle using Kendo 2012.2.710

2) Si vous ne pouvez pas mettre à jour votre version KendoUI, vous pouvez modifier votre tableau de columnDefinition puis re-créer la grille.

Dans la méthode onSelect de la liste déroulante, vous supprimez la première colonne du tableau columnDefinition, puis ajoutez le nouvel objet de colonne au tableau. Après cela, vous supprimez le contenu de l'élément div de la grille, puis vous recréez la grille.

Vous continuez à utiliser les mêmes données, vous n'avez donc pas besoin de revenir en arrière pour récupérer les données.

Fiddle using your current version of Kendo 2012.1.322

~ Dans les deux cas, le code pourrait certainement être nettoyé pour répondre mieux à vos besoins, mais je voulais juste vous donner quelques fonctionnalités de base pour travailler avec. J'espère que cela t'aides!