Options dynamiques dans la grille d'interface utilisateur de Kendo

Que vous veniez de commencer à utiliser Kendo UI ou que vous maîtrisiez déjà nos widgets et nos concepts principaux, vous le savez aussi bien que moi, comme n'importe qui dans notre industrie – les choses changent. Chaque. Temps. Toi. Blink.

Dans cet article, j'ai donc l'intention de vous montrer quelques trucs et astuces pour rendre l'expérience de vos utilisateurs plus personnelle, plus dynamique et, surtout, d'une meilleure qualité. Pour offrir une expérience personnalisée et améliorée, il faut se concentrer sur trois points clés lors de la construction d'une grille Kendo UI Grid avec options dynamiques:

Les gens aiment être en contrôle alors pourquoi ne pas le leur donner? Au lieu de décorer la grille UI Kendo comme un arbre de Noël, avec toutes les fonctionnalités et fonctionnalités disponibles, pourquoi ne pas créer une interface utilisateur personnalisée qui permet aux utilisateurs de choisir ?
Non seulement les utilisateurs pourront choisir leur configuration, mais cela leur apportera de meilleures performances car ils n'accepteront que ce qu'ils utiliseront.

J'aime ce point le meilleur, car il est en ligne avec le principe de programmation extrême Vous n'en aurez pas besoin (Y.A.G.N.I. pour faire court).
Il est facile d'oublier qu'en arrière-plan tout un tas de magie doit avoir lieu, que les widgets sont initialisés et que les gestionnaires sont attachés quand tout ce qu'il faut taper est reorderable: true . Mais pourquoi avoir une grille réorganisable si ce n'est pas nécessaire?

Une des questions fréquemment posées sur une grille d'UI avec des options dynamiques est: Comment accorder des droits d'administrateur à certains utilisateurs et les refuser à d'autres?

Le moyen le plus simple consiste à obtenir le rôle d'utilisateur avant en créant la grille et en fonction du rôle, passer les options de configuration souhaitées. Toutefois, n'oubliez pas que les autorisations utilisateur doivent être gérées sur le serveur, ne comptez donc pas uniquement sur les autorisations des utilisateurs client.

Le Kendo UI Grid dispose d'une option de configuration mobile * qui facilite le travail sur des écrans plus petits / périphériques tactiles. La grille crée une vue séparée pour l'édition et le filtrage du menu de la colonne et active le défilement natif lorsque cela est possible. Si vous n'avez pas vu nos démos adaptables en action, vous pouvez le faire ici . Ils ont l'air le meilleur sur de vrais mobiles et tablettes mais le mode appareil du navigateur peut aussi vous donner une bonne idée.

Si vous appréciez l'aspect et la convivialité de la grille adaptative Kendo UI, vous pouvez l'initier dynamiquement à l'aide de l'API nifty de l'espace de noms de l'utilitaire kendo.support . Il peut aider à déterminer le type d'appareil et la version du système d'exploitation, le navigateur, la barre de défilement, les transitions et les transformations, ainsi que d'autres choses qui pourraient vous être utiles.

_{* Avant de décider d'utiliser la grille adaptative, consultez la documentation de Cela peut ressembler à la grille web, mais c'est assez différent.}

Pour une meilleure expérience et des tests, voir la démo en entier écran sur les périphériques Web et hybrides ici

• Créez l'interface utilisateur personnalisée. J'ai utilisé les boutons radio de style UI Kendo dont la valeur est la valeur de l'option par souci de simplicité et de simplicité. En outre, en utilisant JSON.parse (), les chaînes true et false sont analysées par rapport à leurs équivalents booléens corrects, ce qui évite d'avoir à le faire. Toute chaîne qui n'est pas une chaîne vide sera évaluée comme vraie, par exemple:
       Booléen ("faux") === vrai
  

              
      
       Sélection multiple 
      
       Aucune sélection 
            

  
  Plus tard, vous pouvez obtenir les options radio sélectionnées comme ceci:
      

        var radioSelectedOptions = {
         sélectionnable: JSON.parse ($ ("[name='selectable']: checked"). val ())
       }
     

• Les radios et les cases à cocher ne sont pas un exemple du monde réel, donc pour compliquer un peu les choses, j'ai aussi ajouté un Kendo UI Listbox qui permet d'ajouter des options supplémentaires. J'ai structuré ses dataItems pour m'aider à les mapper à l'option de configuration attendue par la grille – le texte est le dataTextField que les utilisateurs voient comme l'option et la valeur est dataValueField qui correspond à la grille options de configuration que nous allons passer:
      

        var listBoxDs = [{
            text: "Column Menu",
            value: { columnMenu : true}
          }, {
            text: "Excel Export",
            value: {
              excel: {
                allPages: true
              }
            }
          }];
            

  
  Ensuite, il y a la tâche d'obtenir les options radio sélectionnées et les options listbox et de les fusionner. Par exemple:
      

        var lbOptions = selectedOptions.dataItems ()
       .toJSON ()
       .reduce (function (optionsObj, item) {
         pour (var clé dans item.value) {
           optionsObj [key] = item.value [key];
         }
         return optionsObj;
       }, {});
       
       var selectedGridOptions = kendo.deepExtend (lbOptions, radioSelectedOptions);
       

• Enfin, vous pouvez initialiser la grille avec les options sélectionnées, si la grille a déjà été initialisée, utilisez la méthode setOptions () pour changer les options et réinitialiser la source de données avec la méthode sténographique query () :
      

        var grid = $ ("# grid"). Data ("kendoGrid");
          if (grille) {
            grid.dataSource.query ({
              filtre: [],
              groupe: [],
              sort: [],
              Page 1,
              pageSize: 20
            });
            grid.setOptions (mergedOptions);
          } autre {
            $ ("# grid"). kendoGrid (mergedOptions);
          }
              

•     Vous devrez conserver un ensemble d'options par défaut car la méthode setOptions () effectue un appel interne pour obtenir les options actuelles, puis les étend en profondeur avec les nouvelles options. Ainsi, si l'utilisateur a initialement défini une grille pageable puis supprimé ce paramètre, le pager persistera et ne disparaîtra pas à moins que vous ne le définissiez explicitement false .
      Voici une liste des paramètres par défaut utilisés dans la démo:
      

        var defaultOptions = {
            mobile: isMobile,
            barre d'outils: [],
            groupable: faux,
            pageable: false,
            redimensionnable: faux,
            columnMenu: false,
            navigable: faux,
            réordonnable: faux,
            scrollable: vrai,
            persistSelection: false,
            triable: faux,
            dataSource: dataSource,
            hauteur: 550,
            colonnes: [
              { field:"ProductName", width: 200},
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 180 },
              { field: "UnitsInStock", title: "Units In Stock", width: 150 },
              { field: "Discontinued", width: 180 }
            ]
          }
            

• La sélection multiple ne fonctionne pas sur les appareils mobiles car il n'y a aucun moyen de distinguer si l'utilisateur souhaite faire défiler ou sélectionner. Vous pouvez donc vérifier si la grille est utilisée sur un tel périphérique et, au lieu d'utiliser la sélection multiple intégrée, ajoutez une colonne sélectionnable .
      

       if (isMobile && selectedGridOptions.selectable && selectedGridOptions.selectable === "multiple, row") {
       selectedGridOptions.selectable = false;
       defaultOptions.columns.splice (0,0, {selectable: true, width: 30});
      }
            

• Les options Excel et PDF doivent être ajoutées à la barre d'outils. Le tableau vide par défaut que nous avons défini précédemment vous sera très utile pour ajouter les changements de sauvegarde et créer des boutons pour les opérations CRUD. Si l'utilisateur supprime ces options, la barre d'outils n'aura aucun outil grâce au tableau vide par défaut.
      Les commandes d'édition / destruction dépendant du mode éditable doivent être ajoutées à la configuration des colonnes de la grille. Vous pouvez déplacer ces commandes à la première colonne et fournir un mode d'édition différent pour les utilisateurs sur les mobiles, par exemple:
      

        if (selectedGridOptions.pdf) {
            defaultOptions.toolbar.push ("pdf");
          }
  
          if (selectedGridOptions.excel) {
            defaultOptions.toolbar.push ("excel");
          }
  
          if (! isMobile && selectedGridOptions.editable) {
            var editTools = ["create", "save", "cancel"];
            defaultOptions.toolbar = defaultOptions.toolbar.concat (editTools);
            defaultOptions.columns.push ({commande: "destroy", title: "", largeur: 150});
          }
          
          // l'édition en ligne ou en popup fournit un meilleur UX sur un mobile
          if (isMobile && selectedGridOptions.editable) {
            selectedGridOptions.editable.mode = "en ligne";
            selectedGridOptions.editable.confirmation = false;
            var editTools = ["create"];
            defaultOptions.toolbar = defaultOptions.toolbar.concat (editTools);
            defaultOptions.columns.splice (0,0, {commande: ["edit", "destroy"]title: "", largeur: 150});
          }
            

• Lorsque vous modifiez les options, réinitialisez également la source de données, sinon une source de données de grille groupée restera groupée même si l'utilisateur supprime l'option groupable, une grille triée restera triée et la même chose est vraie pour la pagination et filtrée États.
      

        grid.dataSource.query ({
           filtre: [],
           groupe: [],
           sort: [],
           Page 1,
           pageSize: 20
         });
         

Résumé

J'espère que ce blog vous inspirera à chercher des façons d'offrir à vos utilisateurs une meilleure expérience personnelle de l'utilisation de la grille d'interface utilisateur de Kendo. Alors que l'idée de «taille unique pour tous les scénarios et dispositifs» semble être un conte de fées, nous nous rapprochons en devenant personnels – en utilisant l'information que nous connaissons – le type d'utilisateur, l'appareil et le navigateur qu'ils utilisent. choisissez ce dont ils ont besoin.

S'il y a quelque chose en particulier sur lequel vous voulez que notre équipe de Kendo UI publie, veuillez le mentionner dans les commentaires ou dans notre Feedback Portal . Nous aimerions avoir de vos nouvelles.