L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Ajoutez un menu contextuel à votre interface utilisateur Telerik pour ASP.NET Core Grid
Les menus contextuels vous permettent d’offrir des fonctionnalités et des options supplémentaires à l’utilisateur final de votre application, là où il se trouve. Voyons comment en utiliser un dans la grille ASP.NET Core.
Le menu contextuel en cours Interface utilisateur Telerik pour ASP.NET Core Grid est une fonctionnalité bienvenue, vous permettant de personnaliser l’expérience utilisateur et de créer des options qui ont du sens pour les données présentées.
Les menus contextuels sont l’une des meilleures fonctionnalités qu’une application puisse avoir, tant pour le bureau que pour le Web, car ils vous permettent d’ajouter des fonctions et des options supplémentaires à l’utilisateur directement à partir des données présentées à l’écran, ajoutant ainsi de la valeur à votre produit.
Connaissez-vous l’interface utilisateur Telerik pour ASP.NET Core Grid ?
Telerik UI pour ASP.NET Core est une bibliothèque de composants d’interface utilisateur robuste reconnue pour sa qualité et ses performances exceptionnelles. Le Grille de données est l’une des fonctionnalités les plus remarquables de la suite.
Le composant Grid démontre l’engagement de Progress Telerik en faveur d’une évolution et d’une innovation continues. Elle résulte d’une observation attentive du marché et d’une écoute attentive des retours clients. Cet engagement en faveur de l’amélioration continue garantit que les outils Telerik sont toujours à la pointe de la technologie, répondant aux besoins des développeurs et des utilisateurs finaux.
Regardons ça!
Commencez à créer votre type de projet en tant qu’interface utilisateur Telerik pour ASP.NET Core après avoir installé Telerik à l’aide de l’application Progress Control Panel ou à partir de l’extension VS :
Choisissez un chemin pour votre projet :
Choisissez la technologie qui convient le mieux à votre projet : HTML ou Tag Helpers. Pour cet exemple, j’ai choisi le modèle Grille et Menu.
Choisissez un thème pour votre projet.
Confirmez l’écran suivant et votre projet ressemblera à ceci :
L’option ContextMenu du composant Grid expose de nombreuses fonctionnalités sophistiquées qui permettent aux développeurs d’interagir avec les éléments de la grille de manière plus efficace et intuitive.
Voici une description de certaines des caractéristiques et fonctionnalités du ContextMenu de Grid :
Tri: À partir du menu contextuel de l’en-tête, les utilisateurs peuvent trier les colonnes de la grille directement à partir du menu contextuel, améliorant ainsi l’expérience utilisateur.
Exportation : Il prend en charge l’exportation de données de grille vers plusieurs formats tels que PDF, Excel et autres, permettant le partage de données et la création de rapports.
2. Menu contextuel du corps
Sélectionner: Cette fonctionnalité vous permet de choisir des lignes ou des cellules individuelles dans la grille.
Modifier: La modification directe du contenu de la grille est désormais possible, facilitant ainsi l’interaction de l’utilisateur pour les mises à jour des données.
Copier la sélection : Les utilisateurs peuvent copier les cellules ou les lignes sélectionnées pour faciliter l’utilisation des données ailleurs.
Copier la sélection sans en-tête : Il vous permet de copier les données sélectionnées sans les en-têtes, vous offrant ainsi plus de flexibilité dans la consommation des données.
Réorganiser la ligne : L’outil de réorganisation permet aux utilisateurs de réorganiser les lignes en fonction de leurs choix ou de leurs besoins.
3. Actions personnalisées basées sur les données
Actions conditionnelles : Les développeurs peuvent définir le menu contextuel pour afficher différentes options en fonction des données de la grille. Des options de menu spécifiques, par exemple, peuvent être révélées ou masquées en fonction des valeurs des lignes ou des cellules.
Options du menu dynamique : Les options du menu contextuel peuvent être ajustées de manière dynamique, permettant une interface plus réactive et intelligente qui réagit aux données de la grille.
4. Extensibilité
Éléments de menu personnalisés : Les développeurs peuvent ajouter des éléments de menu personnalisés qui déclenchent des actions spécifiques, étendant ainsi les fonctionnalités de la grille en fonction des exigences du projet.
Comment fonctionne le code ?
Sur le Contrôleur de grillej’ai modifié le code pour renvoyer les données souhaitées pour cette démonstration :
1. using Kendo.Mvc.Extensions;
2. using Kendo.Mvc.UI;
3. using Microsoft.AspNetCore.Mvc;
4. using TelerikAspNetCoreApp1.Models;
5.
6. namespace TelerikAspNetCoreApp1.Controllers;
7. public class GridController : Controller
8. {
9. public ActionResult Orders_Read([DataSourceRequest] DataSourceRequest request)
10. {
11. var result = Enumerable.Range(2, 51).Select(i => new OrderViewModel
12. {
13. OrderID = i,
14. Freight = i * 10,
15. OrderDate = new DateTime(2023, 9, 15).AddDays(i % 7),
16. ShipName = "ShipName " + i,
17. ShipCity = "ShipCity " + i
18. });
19.
20. var customRet = result.ToList();
21.
22. customRet.Insert(0, new OrderViewModel
23. {
24. OrderID = 1,
25. Freight = 1 * 10,
26. OrderDate = new DateTime(2023, 9, 15).AddDays(1 % 7),
27. ShipName = "Brazil",
28. ShipCity = "Porto Alegre"
29. });
30.
31.
32. var dsResult = customRet.ToDataSourceResult(request);
33. return Json(dsResult);
34. }
35. }
Désormais, la première ligne contient des données spécifiques qui seront surveillées par l’option du menu contextuel.
Sur Index.cshtmlj’ai ajouté deux notifications :
1. @(Html.Kendo().Notification()
2. .Name("notification")
3. .Position(p => p.Pinned(true).Top(60).Left(30))
4. .AutoHideAfter(3000)
5. )
6.
7. @(Html.Kendo().Notification()
8. .Name("notificationOk")
9. .Position(p => p.Pinned(true).Top(30).Left(30))
10. .AutoHideAfter(2500)
11. )
Ajoutez la méthode ContextMenu au composant Grid :
1. @(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.OrderViewModel>()
2. .Name("grid")
3. .ContextMenu(
Ajoutez la méthode Head avec les options exigées par vos besoins :
1. @(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.OrderViewModel>()
2. .Name("grid")
3. .ContextMenu(menu => menu
4. .Head(head =>
5. {
6. head.Create();
7. head.Separator();
8. head.SortAsc();
9. head.SortDesc();
10. head.Separator();
11. head.ExportPDF().Text("Generate Pdf File").Icon("file");
12. head.ExportExcel();
13. })
Dans cet exemple, j’ai ajouté un texte personnalisé à ExportPDF().
Ajoutez la méthode Body avec les options exigées par vos besoins :
1. @(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.OrderViewModel>()
2. .Name("grid")
3. .ContextMenu(menu => menu
4. .Head(head =>
5. {
6. head.Create();
7. head.Separator();
8. head.SortAsc();
9. head.SortDesc();
10. head.Separator();
11. head.ExportPDF().Text("Generate Pdf File").Icon("file");
12. head.ExportExcel();
13. })
14. .Body(body =>
15. {
16. body.Edit();
17. body.Destroy();
18. body.Separator();
19. body.Select();
20. body.CopySelection();
21. body.CopySelectionNoHeaders();
22. body.Separator();
23. body.ReorderRow();
24. body.Custom("myTool").Text("Check status").Icon("gear");
25.
26. })
27. )
J’ai ajouté une commande personnalisée à « Vérifier l’état» sur la méthode Body. Faites attention au nom personnalisé « monoutil.»
Sur le Index.cshtml J’ai ajouté le script :
1. <script>
2.
3. kendo.ui.grid.commands["myToolCommand"] = kendo.ui.grid.GridCommand.extend({
4. exec: function () {
5.
6. var selectedItems = $("#grid").data("kendoGrid").selectedKeyNames();
7. var actualItems = [];
8.
9. if (selectedItems.length > 0) {
10. selectedItems.forEach(function (key) {
11.
12. var item = grid.dataSource.get(key);
13. if (item.ShipCity == "Porto Alegre") {
14. var popupNotification = $("#notification").data("kendoNotification");
15. popupNotification.show(`This city ’${item.ShipCity}’ is temporary blocked!`, "error")
16. }
17. else {
18. actualItems.push(item);
19. }
20. });
21. }
22. if (actualItems.length > 0) {
23. var popupNotification = $("#notificationOk").data("kendoNotification");
24. popupNotification.show(`’${actualItems.length}’ cities available!`, "info")
25. }
26. }
27. });
28.
29. </script>
Le nom « monoutil » devient une commande en ajoutant « Commande » au nom dans les commandes de la grille :
1. kendo.ui.grid.commands["myToolCommand"] = kendo.ui.grid.GridCommand.extend({
2. ...
L’image ci-dessous montre la démonstration de travail :
Désormais, lorsque vous cliquez sur « Vérifier l’état », il exécutera cette validation ci-dessous :
1. var selectedItems = $("#grid").data("kendoGrid").selectedKeyNames();
2. var actualItems = [];
3.
4. if (selectedItems.length > 0) {
5. selectedItems.forEach(function (key) {
6.
7. var item = grid.dataSource.get(key);
8. if (item.ShipCity == "Porto Alegre") {
9. var popupNotification = $("#notification").data("kendoNotification");
10. popupNotification.show(`This city ’${item.ShipCity}’ is temporary blocked!`, "error")
11. }
12. else {
13. actualItems.push(item);
14. }
15. });
16. }
17. if (actualItems.length > 0) {
18. var popupNotification = $("#notificationOk").data("kendoNotification");
19. popupNotification.show(`’${actualItems.length}’ cities available!`, "info")
20. }
La ligne ci-dessous reçoit toutes les valeurs clés sélectionnées :
1. var selectedItems = $("#grid").data("kendoGrid").selectedKeyNames();
La ligne ci-dessous récupère l’enregistrement de données par la clé :
1. var item = grid.dataSource.get(key);
Cette ligne ci-dessous analyse la propriété/colonne ShipCity du modèle :
1. if (item.ShipCity == "Porto Alegre")
Et la notification s’affichera avec :
1. if (actualItems.length > 0) {
2. var popupNotification = $("#notificationOk").data("kendoNotification");
3. popupNotification.show(`’${actualItems.length}’ cities available!`, "info")
4. }
Vous devez effectuer des configurations supplémentaires sur cet exemple pour que cela fonctionne :
Ajoutez la méthode Model et définissez l’identifiant unique de la grille, en utilisant .Model(model => model.Id(p => p.**OrderID**)):
1. .DataSource(dataSource => dataSource
2. .Ajax()
3. .Model(model => model.Id(p => p.OrderID))
4. .PageSize(20)
5. .Read(read => read.Action("Orders_Read", "Grid"))
6. )
7. )
Sur le OrderViewModeldéfinir la [Key] pour OrderID:
1. [Key]
2. public int OrderID
3. {
4. get;
5. set;
6. }
Et c’est tout. Il devrait fonctionner !
Voici la définition complète du composant Grid pour votre commodité :
1. @(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.OrderViewModel>()
2. .Name("grid")
3. .ContextMenu(menu => menu
4. .Head(head =>
5. {
6. head.Create();
7. head.Separator();
8. head.SortAsc();
9. head.SortDesc();
10. head.Separator();
11. head.ExportPDF().Text("Generate Pdf File").Icon("file");
12. head.ExportExcel();
13. })
14. .Body(body =>
15. {
16. body.Edit();
17. body.Destroy();
18. body.Separator();
19. body.Select();
20. body.CopySelection();
21. body.CopySelectionNoHeaders();
22. body.Separator();
23. body.ReorderRow();
24. body.Custom("myTool").Text("Check status").Icon("gear");
25.
26. })
27. )
28. .Columns(columns =>
29. {
30. columns.Bound(p => p.OrderID).Filterable(false);
31. columns.Bound(p => p.Freight);
32. columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
33. columns.Bound(p => p.ShipName);
34. columns.Bound(p => p.ShipCity);
35. })
36. .Selectable(selectable => selectable
37. .Mode(GridSelectionMode.Multiple))
38. .Pageable()
39. .Sortable()
40. .Scrollable()
41. .Groupable()
42. .Filterable()
43. .HtmlAttributes(new { style = "height:550px;" })
44. .DataSource(dataSource => dataSource
45. .Ajax()
46. .Model(model => model.Id(p => p.OrderID))
47. .PageSize(20)
48. .Read(read => read.Action("Orders_Read", "Grid"))
49. )
50. )
Vous pouvez accéder à cet exemple de projet de travail à l’adresse mon GitHub.
Conclusion
L’inclusion du ContextMenu dans l’interface utilisateur Telerik pour le DataGrid d’ASP.NET Core est précieuse et pratique. Cette fonctionnalité représente une avancée significative dans la personnalisation et la manipulation des données au sein de la grille, permettant une interaction plus nuancée et spécifique à l’utilisateur avec les données affichées. Il garantit que les utilisateurs peuvent accomplir leurs tâches avec une plus grande efficacité et productivité en fournissant une profusion d’alternatives et d’actions qui peuvent être appliquées instantanément via le menu contextuel.
En résumé, ContextMenu est un allié puissant, aidant les utilisateurs à naviguer, gérer et modifier rapidement les données, contribuant ainsi de manière significative à améliorer l’expérience utilisateur et la fluidité opérationnelle dans la gestion des données au sein des applications Web.
Commencez immédiatement à créer des solutions de données qui valent la peine d’être utilisées en vous inscrivant pour un essai gratuit. De plus, même pendant votre essai gratuit, vous bénéficierez d’une assistance inégalée de la part de l’équipe Progress Telerik, leader du secteur.
Source link