Read Context Menu Options on the Listgrid Header
23 Feb 2022twenty minutes to read
The DataGrid has options to prove the context menu when right clicked on information technology. To enable this feature, y'all need to ascertain either default or custom particular in the ContextMenuItems property.
The following table lists the default context menu items,
| Items | Clarification |
|---|---|
AutoFit | Auto fit the current cavalcade. |
AutoFitAll | Auto fit all columns. |
Edit | Edit the current record. |
Delete | Delete the current record. |
Salvage | Save the edited record. |
Cancel | Cancel the edited state. |
Copy | Copy the selected records. |
PdfExport | Export the DataGrid data every bit Pdf document. |
ExcelExport | Export the DataGrid data as Excel document. |
CsvExport | Export the DataGrid data equally CSV certificate. |
Group | Group the current column. |
Ungroup | Ungroup the current column. |
SortAscending | Sort the electric current cavalcade in ascending order. |
SortDescending | Sort the current column in descending order. |
FirstPage | Go to the first page. |
PrevPage | Go to the previous page. |
LastPage | Go to the concluding page. |
NextPage | Go to the next folio. |
The default context bill of fare provides different types of context bill of fare items for the post-obit elements.
| Elements | Context Carte du jour Items |
|---|---|
| Header | AutoFit |
| Header | AutoFitAll |
| Header | Grouping |
| Header | Ungroup |
| Header | SortAscending |
| Header | SortDescending |
| Content | Edit |
| Content | Delete |
| Content | Salvage |
| Content | Cancel |
| Content | Copy |
| Content | PdfExport |
| Content | ExcelExport |
| Content | CsvExport |
| Pager | FirstPage |
| Pager | PrevPage |
| Pager | LastPage |
| Pager | NextPage |
The following sample code demonstrates enabling context carte du jour with its default items,
@using Syncfusion.Blazor.Grids <SfGrid DataSource= "@Orders" AllowSorting= "true" AllowPaging= "true" AllowExcelExport= "truthful" AllowPdfExport= "true" ContextMenuItems= "@(new List <object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Re-create", "Edit", "Delete", "Salve", "Abolish","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})"> <GridPageSettings PageSize= "viii" ></GridPageSettings> <GridEditSettings AllowEditing= "true" AllowDeleting= "true" ></GridEditSettings> <GridColumns> <GridColumn Field= @nameof(Order.OrderID) HeaderText= "Order ID" IsPrimaryKey= "true" TextAlign= "TextAlign.Right" Width= "120" ></GridColumn> <GridColumn Field= @nameof(Club.CustomerID) HeaderText= "Client Proper noun" Width= "150" ></GridColumn> <GridColumn Field= @nameof(Lodge.OrderDate) HeaderText= " Guild Appointment" Format= "d" Blazon= "ColumnType.Appointment" TextAlign= "TextAlign.Right" Width= "130" ></GridColumn> <GridColumn Field= @nameof(Lodge.Freight) HeaderText= "Freight" Format= "C2" TextAlign= "TextAlign.Right" Width= "120" ></GridColumn> </GridColumns> </SfGrid> @code{ public Listing<Order> Orders { get; set; } protected override void OnInitialized() { Orders = Enumerable.Range(one, 75).Select(x => new Order() { OrderID = grand + 10, CustomerID = (new cord[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(v)], Freight = 2.i * x, OrderDate = DateTime.At present.AddDays(-x), }).ToList(); } public grade Order { public int? OrderID { get; ready; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; prepare; } } } The post-obit GIF represents the DataGrid enabled with default context menu items,
The custom context card items tin exist added by defining the ContextMenuItems as a collection of ContextMenuItemModel. Actions for these customized items tin can be defined in the ContextMenuItemClicked event.
The following sample code demonstrates defining custom context menu item and its corresponding action in the ContextMenuItemClicked event,
@using Syncfusion.Blazor.Grids <SfGrid @ ref= "DefaultGrid" DataSource= "@Orders" AllowPaging= "truthful" ContextMenuItems= "@(new List <ContextMenuItemModel>() { new ContextMenuItemModel { Text = "Re-create with headers", Target = ".e-content", Id = "copywithheader" } })"> <GridEvents ContextMenuItemClicked= "OnContextMenuClick" TValue= "Order" ></GridEvents> <GridPageSettings PageSize= "8" ></GridPageSettings> <GridColumns> <GridColumn Field= @nameof(Social club.OrderID) HeaderText= "Social club ID" TextAlign= "TextAlign.Right" Width= "120" IsPrimaryKey= "true" ></GridColumn> <GridColumn Field= @nameof(Guild.CustomerID) HeaderText= "Customer Name" Width= "150" ></GridColumn> <GridColumn Field= @nameof(Guild.OrderDate) HeaderText= " Guild Engagement" Format= "d" Type= "ColumnType.Date" TextAlign= "TextAlign.Right" Width= "130" ></GridColumn> <GridColumn Field= @nameof(Order.Freight) HeaderText= "Freight" Format= "C2" TextAlign= "TextAlign.Right" Width= "120" ></GridColumn> </GridColumns> </SfGrid> @code{ public List<Order> Orders { get; set; } private SfGrid<Order> DefaultGrid; protected override void OnInitialized() { Orders = Enumerable.Range(i, 75).Select(ten => new Order() { OrderID = 1000 + ten, CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.ane * x, OrderDate = DateTime.At present.AddDays(-10), }).ToList(); } public class Order { public int? OrderID { get; ready; } public cord CustomerID { become; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; prepare; } } public void OnContextMenuClick(ContextMenuClickEventArgs<Club> args) { if (args.Item.Id == "copywithheader") { this.DefaultGrid.Re-create(true); } } } The following paradigm represents the DataGrid enabled with custom context carte du jour item,
Built-in and Custom context carte items
DataGrid has an option to utilise both built-in and custom context menu items at same time.
The post-obit sample code demonstrates defining built-in and custom context menu items and custom context bill of fare item respective action in the ContextMenuItemClicked result,
@using Syncfusion.Blazor.Grids <SfGrid @ ref= "DefaultGrid" DataSource= "@Orders" AllowPaging= "truthful" ContextMenuItems= "@(new List <Object>() { "Copy", new ContextMenuItemModel { Text = "Re-create with headers", Target = ".due east-content", Id = "copywithheader" } })"> <GridEvents ContextMenuItemClicked= "OnContextMenuClick" TValue= "Lodge" ></GridEvents> <GridPageSettings PageSize= "viii" ></GridPageSettings> <GridColumns> <GridColumn Field= @nameof(Order.OrderID) HeaderText= "Lodge ID" TextAlign= "TextAlign.Right" Width= "120" IsPrimaryKey= "true" ></GridColumn> <GridColumn Field= @nameof(Order.CustomerID) HeaderText= "Client Name" Width= "150" ></GridColumn> <GridColumn Field= @nameof(Order.OrderDate) HeaderText= " Lodge Appointment" Format= "d" Type= "ColumnType.Date" TextAlign= "TextAlign.Correct" Width= "130" ></GridColumn> <GridColumn Field= @nameof(Guild.Freight) HeaderText= "Freight" Format= "C2" TextAlign= "TextAlign.Right" Width= "120" ></GridColumn> </GridColumns> </SfGrid> @code{ public List<Order> Orders { get; set; } private SfGrid<Club> DefaultGrid; protected override void OnInitialized() { Orders = Enumerable.Range(1, 75).Select(x => new Gild() { OrderID = 1000 + x, CustomerID = (new cord[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = two.1 * ten, OrderDate = DateTime.Now.AddDays(-x), }).ToList(); } public class Guild { public int? OrderID { become; set; } public cord CustomerID { get; set; } public DateTime? OrderDate { get; set up; } public double? Freight { get; set; } } public void OnContextMenuClick(ContextMenuClickEventArgs<Gild> args) { if (args.Item.Id == "copywithheader") { this.DefaultGrid.Copy(true); } } } The sub context carte du jour items can be added past defining the drove of MenuItems for Items Holding in ContextMenuItems. Actions for these customized items can be defined in the ContextMenuItemClicked event.
The following sample code demonstrates defining sub context menu particular and its corresponding action in the ContextMenuItemClicked event,
@using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations <SfGrid @ ref= "DefaultGrid" DataSource= "@Orders" AllowPaging= "true" ContextMenuItems= "@(new List <ContextMenuItemModel>() { new ContextMenuItemModel { Text = "Clipboard", Target = ".due east-content", Id = "clipboard", Items = new Listing<MenuItem>() { new MenuItem { Text = "Copy", Id = "re-create" }, new MenuItem { Text ="CopyWithHeader", Id ="copywithheader" } } } })"> <GridEvents ContextMenuItemClicked= "OnContextMenuClick" TValue= "Gild" ></GridEvents> <GridPageSettings PageSize= "8" ></GridPageSettings> <GridColumns> <GridColumn Field= @nameof(Order.OrderID) HeaderText= "Order ID" TextAlign= "TextAlign.Right" Width= "120" IsPrimaryKey= "true" ></GridColumn> <GridColumn Field= @nameof(Order.OrderID) HeaderText= "Social club ID" TextAlign= "TextAlign.Right" Width= "120" IsPrimaryKey= "true" ></GridColumn> <GridColumn Field= @nameof(Social club.CustomerID) HeaderText= "Customer Name" Width= "150" ></GridColumn> <GridColumn Field= @nameof(Order.OrderDate) HeaderText= " Order Date" Format= "d" Type= "ColumnType.Date" TextAlign= "TextAlign.Right" Width= "130" ></GridColumn> <GridColumn Field= @nameof(Order.Freight) HeaderText= "Freight" Format= "C2" TextAlign= "TextAlign.Right" Width= "120" ></GridColumn> </GridColumns> </SfGrid> @lawmaking{ public List<Order> Orders { become; set; } individual SfGrid<Order> DefaultGrid; protected override void OnInitialized() { Orders = Enumerable.Range(1, 75).Select(ten => new Lodge() { OrderID = yard + ten, CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(v)], Freight = two.1 * ten, OrderDate = DateTime.Now.AddDays(-ten), }).ToList(); } public class Guild { public int? OrderID { go; set; } public string CustomerID { go; set; } public DateTime? OrderDate { get; ready; } public double? Freight { get; set up; } } public void OnContextMenuClick(ContextMenuClickEventArgs<Society> args) { if (args.Item.Id == "copywithheader") { this.DefaultGrid.Re-create(truthful); } if (args.Item.Id == "copy") { this.DefaultGrid.Copy(false); } } } Disable the Context menu for specific columns in DataGrid
Context Bill of fare can be prevented for specific columns using ContextMenuOpen event of DataGrid. This event volition exist triggered before opening the ContextMenu. Y'all tin can prevent the context card from opening by defining the Abolish arguments of ContextMenuOpen to faux.
The following sample code demonstrates how to disable the context for specific column using outcome arguments of ContextMenuOpen upshot,
@using Syncfusion.Blazor.Grids <SfGrid @ ref= "DefaultGrid" DataSource= "@Orders" AllowPaging= "true" ContextMenuItems= "@(new List <ContextMenuItemModel>() { new ContextMenuItemModel { Text = "Copy with headers", Target = ".e-content", Id = "copywithheader" } })"> <GridEvents ContextMenuItemClicked= "OnContextMenuClick" ContextMenuOpen= "OnContextMenuOpen" TValue= "Order" ></GridEvents> <GridPageSettings PageSize= "8" ></GridPageSettings> <GridColumns> <GridColumn Field= @nameof(Social club.OrderID) HeaderText= "Order ID" TextAlign= "TextAlign.Correct" Width= "120" IsPrimaryKey= "true" ></GridColumn> <GridColumn Field= @nameof(Order.CustomerID) HeaderText= "Customer Name" Width= "150" ></GridColumn> <GridColumn Field= @nameof(Order.OrderDate) HeaderText= " Order Date" Format= "d" Type= "ColumnType.Appointment" TextAlign= "TextAlign.Correct" Width= "130" ></GridColumn> <GridColumn Field= @nameof(Guild.Freight) HeaderText= "Freight" Format= "C2" TextAlign= "TextAlign.Right" Width= "120" ></GridColumn> </GridColumns> </SfGrid> @code{ public List<Gild> Orders { get; fix; } private SfGrid<Order> DefaultGrid; protected override void OnInitialized() { Orders = Enumerable.Range(1, 75).Select(10 => new Social club() { OrderID = k + ten, CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.1 * ten, OrderDate = DateTime.Now.AddDays(-x), }).ToList(); } public class Order { public int? OrderID { get; set up; } public cord CustomerID { go; ready; } public DateTime? OrderDate { get; ready; } public double? Freight { go; ready; } } public void OnContextMenuOpen(ContextMenuOpenEventArgs<Club> Args) { if (Args.Column.Field == "OrderDate") { Args.Abolish = true; // To prevent the context menu from opening } } public void OnContextMenuClick(ContextMenuClickEventArgs<Order> args) { if (args.Particular.Id == "copywithheader") { this.DefaultGrid.Copy(true); } } } You can enable or disable context menu items using the Disabled holding. Here, yous can enable and disable the Edit context carte du jour items in ContextMenuOpen event of DataGrid. This effect will be triggered before opening the ContextMenu. You can disable the context menu item by defining the corresponding context bill of fare items Disabled belongings every bit true.
The following sample code demonstrates how to enable or disable context menu items dynamically in Grid using event arguments of ContextMenuOpen event,
@using Syncfusion.Blazor.Grids <SfGrid DataSource= "@Orders" AllowPaging= "true" ContextMenuItems= "@(new Listing <object>() { "Edit", "Delete", "Relieve", "Abolish","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})"> <GridEvents ContextMenuOpen= "OnContextMenuOpen" TValue= "Lodge" ></GridEvents> <GridPageSettings PageSize= "8" ></GridPageSettings> <GridEditSettings AllowEditing= "true" AllowDeleting= "true" ></GridEditSettings> <GridColumns> <GridColumn Field= @nameof(Order.OrderID) HeaderText= "Order ID" IsPrimaryKey= "true" TextAlign= "TextAlign.Right" Width= "120" ></GridColumn> <GridColumn Field= @nameof(Order.CustomerID) HeaderText= "Customer Name" Width= "150" ></GridColumn> <GridColumn Field= @nameof(Order.OrderDate) HeaderText= " Order Date" Format= "d" Type= "ColumnType.Date" TextAlign= "TextAlign.Correct" Width= "130" ></GridColumn> <GridColumn Field= @nameof(Order.Freight) HeaderText= "Freight" Format= "C2" TextAlign= "TextAlign.Right" Width= "120" ></GridColumn> </GridColumns> </SfGrid> @lawmaking{ public Listing<Order> Orders { get; set; } protected override void OnInitialized() { Orders = Enumerable.Range(one, 75).Select(10 => new Order() { OrderID = 1000 + ten, CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Adjacent(5)], Freight = 2.ane * ten, OrderDate = DateTime.Now.AddDays(-10), }).ToList(); } public void OnContextMenuOpen(ContextMenuOpenEventArgs<Order> Args) { #pragma alert disable BL0005 if (Args.Column.Field == "OrderDate") // You tin can check status based on your requirement { Args.ContextMenuObj.Items[0].Disabled = truthful; // To disable edit context menu item } else { Args.ContextMenuObj.Items[0].Disabled = fake; // To enable edit context menu item } #pragma warning restore BL0005 } public course Lodge { public int? OrderID { get; ready; } public string CustomerID { get; set; } public DateTime? OrderDate { go; ready; } public double? Freight { get; fix; } } } You can refer to Blazor DataGrid feature tour page for its groundbreaking characteristic representations. You can besides explore Blazor DataGrid example to sympathise how to present and dispense information.
Source: https://blazor.syncfusion.com/documentation/datagrid/context-menu
0 Response to "Read Context Menu Options on the Listgrid Header"
Post a Comment