5 Conseils pour créer des UIS réactives avec Telerik UI pour les contrôles ASP.NET

Améliorez davantage la grille et le graphique déjà réactifs de Telerik UI pour ASP.NET Core afin que les utilisateurs puissent tirer le meilleur parti de votre application quel que soit leur appareil.

La réalité est que les utilisateurs de toute application Web que vous créez vont vouloir le visualiser sur plusieurs plates-formes. Nous pouvons même quantifier cela: ce sera plus de plates-formes que vous avez le temps ou l’argent pour tester, sans parler de modifier l’interface utilisateur. En conséquence, vous voulez un ensemble de commandes d’interface utilisateur qui «feront la bonne chose» hors de la boîte Contrôles de base ASP.NET le faites à peu près.

Mais j’ai cinq conseils ici (quatre pour le Kendo-Grid et un pour le Kendo-Chart) pour aider à rendre votre interface utilisateur encore plus réactive. La bonne nouvelle ici est qu’aucun de ces conseils ne vous mènera plus d’une minute à mettre en œuvre.

Contrôles de problème bien élevés

Je me concentre sur la grille et le graphique pour une bonne raison. En pratique, individuellement, la plupart des contrôles (zones de texte, boutons, listes déroulantes, etc.) s’adaptent bien à un écran étroit.

Les contrôles de problème sont les contrôles «larges» – les grilles et le graphique, par exemple. Cela ne veut pas dire le Asp.net core grille et ASP.NET Core Chart Les contrôles ignorent comment ils sont affichés. La grille ajuste automatiquement les colonnes affichées pour s’adapter à l’espace d’écran disponible (et permet à l’utilisateur de défiler horizontalement avec un film de doigt pour voir les colonnes qui n’apparaissent pas à l’écran).

Voici, par exemple, la grille dans un navigateur sur un écran de taille normale:

Et ici, c’est sur un smartphone:

Le graphique est également réactif. Il tailles automatiquement pour remplir l’espace que vous lui avez alloué (ce que vous voulez). Vous pouvez être satisfait de ces deux contrôles dans chaque environnement que vos utilisateurs les voient.

Cependant, dans la grille, le défilement horizontal peut créer des problèmes pour vos utilisateurs en tant que colonnes dont votre utilisateur a besoin de référence (autrement appelée «Les premières colonnes à gauche») font défiler l’écran. Et, bien que «l’édition sur place» dans la ligne fonctionne bien sur un grand écran, sur un petit écran (c’est-à-dire, votre smartphone), l’édition en place peut être… maladroite.

Et, bien que le graphique soit automatiquement dimensionné pour remplir l’espace à sa disposition, le graphique ne redimensionne pas si l’utilisateur modifie la taille de sa fenêtre de navigateur ou, sur son smartphone, passe du portrait au mode paysage.

Voici donc mes conseils pour faire face à cela: quatre pour la grille et un pour le graphique. Vous pouvez trouver le Version Razor Taghelper de cette grille ici.

Astuce 1: colonnes de grille de verrouillage

Avec la grille, vous pouvez spécifier une ou plusieurs colonnes pour toujours apparaître sur le côté gauche de la grille en définissant la colonne locked attribut à «true»:

<column field="OrderID"  locked="true" width="120" />

Les colonnes verrouillées ont une limitation: elles doivent être les premières colonnes sur le côté gauche de la grille (mais, alors, ce sont probablement les colonnes que vous souhaitez garder sur la page, de toute façon). Cela signifie que si vous souhaitez verrouiller la deuxième colonne de la grille, vous devez également verrouiller la première colonne.

Astuce 2: colonnes de grille collantes

Les colonnes collantes sont plus flexibles que les colonnes verrouillées car vous pouvez signaler n’importe quelle colonne n’importe où dans la grille sous forme de colonne collante. Lorsque la grille est affichée pour la première fois, si la colonne collante est visible, elle apparaîtra dans sa position normale. Si la colonne collante non Visible (c’est-à-dire, la colonne est hors de l’écran à droite), puis la colonne apparaîtra de toute façon, collée sur le côté droit de la grille.

Lorsque votre utilisateur fait défiler horizontalement, une colonne collante fait défiler normalement l’écran. Si la colonne était déjà collée sur le bord droit de la grille, alors que la colonne faisait normalement défiler sur l’écran, la colonne «se détachera» du bord de la grille et fait défiler, comme d’habitude, vers la gauche. Lorsqu’une colonne collante arrive de l’autre côté de la grille, elle collera de ce côté et restera à l’écran alors que l’utilisateur continue de faire défiler les autres colonnes.

Activer une colonne collante est tout aussi simple que d’activer une colonne verrouillée. Définissez juste la colonne sticky attribut à true:

<column field="OrderID"  locked="true" width="120" />

Astuce 3: colonnes de grille collables

J’ai enregistré mon conseil de colonne préféré pour le dernier: il n’est pas toujours évident pour moi quelles colonnes que mes utilisateurs voudront être «collantes», donc j’ai abandonné l’essai. Au lieu de cela, je laisse mes utilisateurs choisir les colonnes qu’ils souhaitent passer:

• Définition d’une ou plusieurs colonnes ‘ stickable Attribut à True
• Activer le menu de colonne de la grille en ajoutant le column-menu élément sous le columns Tag de fermeture et définition de son enabled Attribut à True

Maintenant, avec l’option collable et le menu de colonne activé, lorsque mes utilisateurs cliquent sur le menu de colonne, ils peuvent choisir les colonnes qu’ils souhaitent rester à l’écran.

Je pense que la solution sensible pour installer votre grille dans n’importe quel écran est de marquer la première colonne de votre grille comme verrouillée, puis Mark tous Les autres colonnes de la grille comme collables et, enfin, activent le menu des colonnes. Cela signifie qu’une grille typique pour moi ressemble à ceci:

    <columns>
        <column field="OrderID"  locked="true" width="120" />
        <column field="OrderDate"  stickable=”true” title="Order Date" width="200" 
                                                                                                       format="{0:MM/dd/yyyy}" />
        <column field="ShipName" stickable="true" title="Ship Name" width="300" />        
        …more columns…
</columns>
<column-menu enabled="true"/>

Astuce 4: Édition de grille

Si vous souhaitez laisser votre utilisateur modifier une ligne dans votre grille et trouver l’expérience sur un smartphone est loin d’être optimal, vous pouvez fournir un panneau d’édition qui apparaîtra chaque fois qu’un utilisateur clique sur le bouton Modifier une ligne. Pour implémenter cela, tout ce que vous avez à faire est d’ajouter le editable Tag avec son mode Attribut défini sur «Popup» sur votre grille. J’ai mis cette balise juste avant la fermeture de ma grille:

   <editable mode="popup"/>
</kendo-grid>

Et, tant que vous faites cela, définissez l’élément keno-grille adaptive-mode attribuer à AdaptiveMode.Auto Pour que toutes les UIS de montage de la grille s’adaptent à n’importe quel appareil sur lequel la grille est affichée:

<kendo-grid name="grid"
            adaptive-mode="AdaptiveMode.Auto"
            navigatable="true"
            selectable="single,row"
            height="550">

Il est logique pour moi de simplement apporter ces deux changements à chaque grille qui prend en charge l’édition.

Astuce 5: Rédige du graphique

Enfin, un conseil sur l’autre contrôle «large», le Kendo-Chart.

Si vous souhaitez prendre en charge le redimensionnement du graphique comme l’espace disponible pour le graphique modifie, il vous suffit d’ajouter trois lignes de code JavaScript à bobinage à votre page. Ce code JavaScript redimensionnera le graphique qui a son name Attribut réglé sur «graphique» afin que le graphique occupe toujours 100% de l’espace disponible à chaque fois que la taille de la fenêtre change:

<script>
$(window).on('resize', function () {
    $("#chart").css("width", "100%")
                .data("kendoChart").resize();
        });       
</script>

Comme l’ajout de l’attribut collable à chaque élément de colonne du kendo-grille ou la définition du mode modifiable d’une grille à apparaître, je pense que l’ajout de ce code à chaque page affichant un graphique est une décision intelligente.

Et il y a cinq choses que vous pouvez faire pour faciliter vos commandes plus faciles à travailler pour vos utilisateurs, même dans un écran étroit (et aucun de ces conseils ne vous prendra plus d’une minute à mettre en œuvre).

Prêt à essayer Telerik UI pour ASP.NET Core?

Essayer maintenant