界面控件Telerik UI for ASP. NET Core教程 - 如何为网格添加上下文菜单？

Telerik UI for ASP. NET Core是用于跨平台响应式Web和云开发的最完整的UI工具集拥有超过60个由Kendo UI支持的ASP.NET核心组件。它的响应式和自适应的HTML5网格提供从过滤、排序数据到分页和分层数据分组等100多项高级功能。上下文菜单允许开发者为应用程序的最终用户提供额外的功能和选项本文将带领大家看看如何在 ASP. NET Core 网格中使用它。Telerik UI for ASP. NET Core Grid组件是一个非常受欢迎的功能它使您可以自定义用户体验并创建对所呈现的数据有意义的选项。上下文菜单是应用程序很好的功能选择无论是桌面还是web端都能直接从屏幕上显示的数据为用户添加额外的功能和选项从而为您的产品增加价值您熟悉Telerik UI for ASP. NET Core Grid吗Telerik UI for ASP. NET Core是一个健壮的UI组件库以其卓越的质量和性能而闻名数据网格是该套件的突出特性之一。尝试网格上下文菜单使用进度控制面板应用程序或从VS扩展安装Telerik后开始创建您的项目类型为Telerik UI for ASP. NET Core为项目选择一个路径选择更适合您项目的技术HTML 或 Tag Helpers对于这个例子我选择了Grid and Menu模板。为项目选择一个主题。确认下一个屏幕项目看起来像这样网格上下文菜单Grid组件中的ContextMenu选项公开了许多复杂的特性使开发人员能够更有效、更直观地与网格材料进行交互。下面是一些网格的ContextMenu特性和功能的描述1. Header上下文菜单排序在标题上下文菜单中用户可以直接从上下文菜单中对网格列进行排序从而改善用户体验。导出它支持将网格数据导出为多种格式如PDF、Excel和其他格式允许数据共享和报告。2. Body上下文菜单选择此功能允许您在网格中选择单个行或单元格。编辑现在可以直接编辑网格内容简化了数据更新的用户交互。复制选择用户可以复制选定的单元格或行以便在其他地方更容易地使用数据。不带headers的复制选择它允许您在不带标头的情况下复制所选数据从而在数据使用方面提供更大的灵活性。重新排序行重新排序工具允许用户根据他们的选择或需要重新排列行。3. 数据驱动的自定义操作条件操作开发人员可以设置上下文菜单根据网格中的数据显示不同的选项。例如可以根据行或单元格中的值显示或隐藏特定的菜单选项。动态菜单选项上下文菜单的选项可以动态调整允许对网格数据做出更灵敏和智能的反应。4. 可扩展性自定义菜单项开发人员可以添加触发特定操作的自定义菜单项根据项目需求扩展网格的功能。代码是如何工作的?在GridController上更改了代码以返回想要的数据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. }现在第一行包含上下文菜单中的选项将监视的特定数据。在Index.cshtml中添加了两个通知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. )将ContextMenu方法添加到Grid组件中1. (Html.Kendo().GridTelerikAspNetCoreApp1.Models.OrderViewModel() 2. .Name(grid) 3. .ContextMenu(添加Head方法和需求的选项1. (Html.Kendo().GridTelerikAspNetCoreApp1.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. })在这个示例中向ExportPDF()添加了一个自定义文本。在Body方法中添加需要的选项1. (Html.Kendo().GridTelerikAspNetCoreApp1.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. )在Body方法上添加了一个自定义命令“Check status”注意自定义名称“myTool”。在Index.cshtml上添加脚本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通过在网格命令的名称中添加“command”名称“myTool”成为命令1. kendo.ui.grid.commands[myToolCommand] kendo.ui.grid.GridCommand.extend({ 2. ...下图显示了工作演示现在当点击“Check status”时它将执行如下验证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. }下面一行接收所有选定的键值1. var selectedItems $(#grid).data(kendoGrid).selectedKeyNames();下面一行通过键获取数据记录1. var item grid.dataSource.get(key);下面这一行分析了模型中的属性/列ShipCity1. if (item.ShipCity Porto Alegre)通知将显示如下内容1. if (actualItems.length 0) { 2. var popupNotification $(#notificationOk).data(kendoNotification); 3. popupNotification.show(’${actualItems.length}’ cities available!, info) 4. }你需要做一些额外的配置才能使这个示例正常工作添加Model方法并并定义网格的唯一Id使用.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. )在OrderViewModel上为OrderID定义[Key]1. [Key] 2. public int OrderID 3. { 4. get; 5. set; 6. }下面是Grid组件的完整定义1. (Html.Kendo().GridTelerikAspNetCoreApp1.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. )