Intégration du composant TelerikCalendar

Le composant Calendrier de Telerik facilite l'affichage des dates et le contrôle des entrées de l'utilisateur (vous avez simplement besoin d'un peu de balisage).

Dans mon post précédent j'ai combiné plusieurs Telerik. Composants Blazor UI pour créer une forme riche avec un effort minimal. Dans la page que j'ai créée, j'ai utilisé le composant DateInput pour gérer l'affichage et l'acceptation de la date à laquelle un client s'est abonné au programme de fidélité de notre société. Ce n'est pas très graphique (mais c'était facile). Dans ce billet, je vais passer au composant TelerikCalendar .

Caveats

Avant de commencer à examiner mes options, cependant: Si vous (a) avez suivi ces messages précédents, et ( b) mis à niveau vers Preview 6 de Blazor … eh bien, il y a eu quelques changements. La plupart des modifications résultent de la normalisation par Microsoft des noms de directives Blazor qui apparaissent sous forme d'attributs sur les éléments représentant les composants Blazor. Ces noms d'attribut sont tous précédés du signe @ (c'est-à-dire la référence devient @ref devient devient @onclick [1945900]. ] ondblclick devient @ondblclick etc.). Ces modifications ne sont qu'une partie du mouvement de l'équipe Blazor visant à normaliser les noms d'attributs, à réduire la redondance dans leur utilisation et à permettre l'ajout de fonctionnalités supplémentaires dans le futur.

Les attributs natifs des éléments des composants (les attributs définis par Telerik) ne pas cependant, obtenir un préfixe @ . Toutefois, si vous définissez ces attributs dans un code ou si vous les liez à un champ ou à une propriété, la valeur de l'attribut ne doit être précédée du symbole @ . Si cela semble déroutant… eh bien, j'ai beaucoup d'exemples dans ce post. Cependant, il existe également un moyen simple de savoir lorsque vous tapez du code: si vous saisissez un nom d'attribut qui n'apparaît pas en gras, préfixez-le d'un symbole @ ; si le nom de l'attribut ne nécessite pas de symbole @ préfixez la valeur à laquelle vous liez l'attribut (sauf dans les cas où vous ne définissez que l'attribut sur une valeur de chaîne).

En outre, si vous voulez paraître branché et d'actualité, dans votre fichier .razor vous pouvez remplacer @functions par @code (mon code fonctionnait aussi bien avec non plus). L'annonce de l'Aperçu 6 décrit quelques modifications supplémentaires, dont je n'ai pas pu toutes me rendre au travail.

Vous devez également vous assurer que vous utilisez la dernière version de Telerik. Interface utilisateur pour les composants Blazor (J'utilise 1.2). Cette version, entre autres modifications, tire parti de certaines corrections de bogues apportées à Blazor qui activent l'événement ValueChanged sur le TelerikCalendar .

Note de la rédaction: Depuis la rédaction de cet article, Telerik L'interface utilisateur de Blazor 1.3 a été publiée, avec de nouvelles fonctionnalités et aucun changement radical. Vous pouvez voir tout ce qui est nouveau ici .

Affichage des dates

Le TelerikCalendar fournit un calendrier graphique complet qui permet à l'utilisateur de sélectionner des dates et, par défaut, page par mois. pour trouver la date qu'ils veulent. Le composant possède les attributs Max et Min qui vous permettent de contrôler la distance à laquelle l'utilisateur peut feuilleter vers le futur et le passé (le calendrier désactive automatiquement les dates en dehors du Min. et Plage maximale en mois affichés). Par défaut, un mois seulement est affiché à la fois, mais vous pouvez le remplacer en définissant l'attribut Views sur le nombre de mois que vous souhaitez afficher à l'écran à la fois.

Je souhaite afficher la date d'inscription de l'utilisateur lorsque le calendrier est affiché pour la première fois. Pour cela, je peux utiliser l'attribut Value du composant. Cela signifie que l'affichage d'une date dans le TelerikCalendar peut être aussi simple que l'ajout de ce balisage à votre page:

Ce serait très bien si tout ce que je voulais faire était d'afficher la date d'inscription du client. Mais je veux donner à l'utilisateur la possibilité de sélectionner une nouvelle date.

Récupération de dates

Vous avez deux (2) options pour récupérer une date sélectionnée par l'utilisateur. Si vous ne souhaitez pas modifier la date, vous pouvez lier le composant à un champ ou à une propriété à l'aide de l'attribut @ bind-Value de Blazor. Alors que l'attribut Value lie les données dans une direction, @ bind-Value implémente la liaison de données bidirectionnelle, ce qui vous permet de choisir la date sélectionnée par l'utilisateur.

@ bind-Value donne ce code HTML (notez que, lorsque les attributs Blazor sont utilisés par opposition aux attributs du composant Telerik, le signe @ se sépare des guillemets doubles vers le nom de l'attribut. ):

Cependant, si vous préférez agir dès que l'utilisateur sélectionne une date, vous voudrez utiliser l'événement ValueChanged de Telerik et lier l'événement à une méthode dans votre code . Votre méthode sera automatiquement transmise à la nouvelle date de valeur sélectionnée sur laquelle l'utilisateur clique dessus. Votre balise ressemblerait à ceci:

Et le code permettant d'attraper la nouvelle valeur ressemblerait à ceci:

 private void SignUpDateChanged (DateTime newDate)
{
  DateTime d = newDate;
} 

Aussi attrayante que soit cette option, elle présente un inconvénient: vous ne pouvez pas combiner l'attribut ValueChanged avec l'attribut @ bind-Value ou . ] les attributs. L'utilisation de @ bind-Value avec ValueChanged génère une erreur de compilation; utiliser Value avec ValueChanged (du moins dans mes tests) semble empêcher le composant de calendrier de mettre en surbrillance la date sélectionnée par l'utilisateur (un problème qui, en supposant qu'il ne reflète pas simplement un problème lors de mes tests, cela sera probablement abordé dans une version ultérieure des composants de Blazor ou de Telerik.)

Il y a encore beaucoup à dire sur le calendrier (il prend en charge, par exemple, plusieurs vues à l'année, au mois et niveau de la journée) dont je parlerai dans mon prochain article de blog.