diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index 3ccfd87e1c..6ae4d21f54 100644 --- a/blazor/datagrid/column-headers.md +++ b/blazor/datagrid/column-headers.md @@ -9,6 +9,8 @@ documentation: ug # Headers in Blazor DataGrid component +The Syncfusion Blazor DataGrid component provides a comprehensive set of options to customize and manage headers efficiently. Headers play a crucial role in organizing and presenting data effectively in the grid. + ## Header text By default, the header text of a column in DataGrid is displayed from the column's [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value. However, you can easily override the default header title and provide a custom header text for the column using the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property. @@ -104,20 +106,28 @@ In this demo, the custom element is rendered for both **EmployeeID** and **Order {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons -@using BlazorApp1.Data +@using Syncfusion.Blazor.DropDowns - + - - + +
Customer ID
- - + + +
+ + + +
+ + +
@HeaderValue @@ -142,9 +152,20 @@ In this demo, the custom element is rendered for both **EmployeeID** and **Order @code { - private SfGrid Grid; - public List Orders { get; set; } + private SfGrid Grid; + public List Orders { get; set; } public string HeaderValue { get; set; } = "Order Date"; + public string DropDownValue { get; set; } = "Freight"; + public class Columns + { + public string ID { get; set; } + public string Value { get; set; } + } + List DropDownData = new List { + new Columns() { ID= "Freight", Value= "Freight" }, + new Columns() { ID= "Shipment", Value= "Shipment" }, + new Columns() { ID= "Cargo", Value= "Cargo" }, + }; private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) { if (args.Checked) @@ -160,58 +181,54 @@ In this demo, the custom element is rendered for both **EmployeeID** and **Order protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); } } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate) { - public static List Orders = new List(); - public OrderData() - { - - } - public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate,double? Freight) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.OrderDate = OrderDate; - this.Freight = Freight; - } - - public static List GetAllRecords() + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.OrderDate = OrderDate; + } + public static List GetAllRecords() + { + if (order.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", new DateTime(1996,07,08), 32.38)); - Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 08),66.98)); - Orders.Add(new OrderData(10248, "HANAR", new DateTime(1996, 07, 08),56.08)); - Orders.Add(new OrderData(10248, "VICTE", new DateTime(1996, 07, 08),21.78)); - Orders.Add(new OrderData(10248, "SUPRD", new DateTime(1996, 07, 08),87.56)); - Orders.Add(new OrderData(10248, "HANAR", new DateTime(1996, 07, 08),32.56)); - Orders.Add(new OrderData(10248, "CHOPS", new DateTime(1996, 07, 08),12.76)); - Orders.Add(new OrderData(10248, "RICSU", new DateTime(1996, 07, 08),55.45)); - Orders.Add(new OrderData(10248, "VINET", new DateTime(1996, 07, 08),11.94)); - code += 5; - } - } - return Orders; + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4))); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5))); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8))); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8))); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9))); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17))); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18))); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19))); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19))); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22))); } - - - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + return order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLqXarRxgGevNlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVJshXLfRNuKUbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} >* The `HeaderTemplate` property is only applicable to DataGrid columns that have a header element. >* You can use any HTML or Blazor component in the header template to add additional functionality to the header element. @@ -226,21 +243,29 @@ In the following sample, the columns **Order Date**, and **Freight** are grouped {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.DropDowns -@using BlazorApp1.Data - + - + Order ID + +
+ + + +
+ + + @@ -250,74 +275,75 @@ In the following sample, the columns **Order Date**, and **Freight** are grouped - Ship Details () - - + Ship Details () + - - @code { - public List Orders { get; set; } + public List Orders { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); } + public string DropDownValue { get; set; } = "Order Details"; + + public class Columns + { + public string ID { get; set; } + public string Value { get; set; } + } + List DropDownData = new List { + new Columns() { ID= "Order Details", Value= "Order Details" }, + new Columns() { ID= "Order Information", Value= "Order Information" }, + }; } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string Shipcountry, double Freight, DateTime OrderDate, DateTime shippeddate) { - public static List Orders = new List(); - public OrderData() - { + this.OrderID = OrderID; + this.ShipCountry = Shipcountry; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShippedDate = shippeddate; - } - public OrderData( int? OrderID,DateTime? OrderDate,double? Freight,string ShipCountry,DateTime? ShippedDate) + } + public static List GetAllRecords() + { + if (order.Count == 0) { - this.OrderID = OrderID; - this.OrderDate = OrderDate; - this.Freight = Freight; - this.ShipCountry = ShipCountry; - this.ShippedDate = ShippedDate; + order.Add(new OrderDetails(10248, "France", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10249, "Germany", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10250, "Brazil", 65.83,new DateTime(1996, 7, 8), new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10251, "France", 41.34, new DateTime(1996, 7, 8), new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10252, "Belgium", 51.3, new DateTime(1996, 7, 9), new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10253, "Brazil", 58.17, new DateTime(1996, 7, 10), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10254, "Switzerland", 22.98, new DateTime(1996, 7, 11), new DateTime(1996, 7, 23))); + order.Add(new OrderDetails(10255, "Switzerland", 148.33, new DateTime(1996, 7, 12), new DateTime(1996, 7, 24))); + order.Add(new OrderDetails(10256, "Brazil", 13.97, new DateTime(1996, 7, 15), new DateTime(1996, 7, 25))); + order.Add(new OrderDetails(10257, "Venezuela", 81.91, new DateTime(1996, 7, 16), new DateTime(1996, 7, 30))); + order.Add(new OrderDetails(10258, "Austria", 140.51, new DateTime(1996, 7, 17), new DateTime(1996, 7, 29))); + order.Add(new OrderDetails(10259, "Mexico", 3.25, new DateTime(1996, 7, 18), new DateTime(1996, 7, 31))); + order.Add(new OrderDetails(10260, "Germany", 55.09, new DateTime(1996, 7, 19), new DateTime(1996, 8, 1))); + order.Add(new OrderDetails(10261, "Brazil", 3.05, new DateTime(1996, 7, 19), new DateTime(1996, 8, 2))); + order.Add(new OrderDetails(10262, "USA", 48.29, new DateTime(1996, 7, 22), new DateTime(1996, 8, 5))); } - - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, new DateTime(1996,07,08), 32.38, "France",new DateTime(1996,07,16))); - Orders.Add(new OrderData(10249, new DateTime(1996, 07, 08),66.98, "Germany", new DateTime(1996, 07, 10))); - Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),56.08, "Brazil", new DateTime(1996, 07, 26))); - Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),21.78, "France", new DateTime(1996, 07, 24))); - Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),87.56, "Belgium", new DateTime(1996, 07, 01))); - Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),32.56, "Brazil", new DateTime(1996, 07, 06))); - Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),12.76, "Switzerland", new DateTime(1996, 07, 18))); - Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),55.45, "Switzerland", new DateTime(1996, 07, 19))); - Orders.Add(new OrderData(10248, new DateTime(1996, 07, 08),11.94, "Brazil", new DateTime(1996, 07, 17))); - code += 5; - } - } - return Orders; - } - public int? OrderID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - public string ShipCountry { get; set; } - public DateTime? ShippedDate { get; set; } + return order; } + public int OrderID { get; set; } + public string ShipCountry { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public DateTime ShippedDate { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrUsCZiiuVewxQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhJMLtKrNbNTfwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Align the text of header text @@ -414,81 +440,101 @@ DataGrid provides the below three options for configuring: * **Header**: With this option, only the grid header text is wrapped. * **Content**: With this option, only the grid content is wrapped. +> * If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the DataGrid's width. +> * If a column's header text contains no white space, the text may not be wrapped. +> * If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) properties of the column to customize the appearance of the header and cell content. + In the following example, the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTextWrapSettings.html#Syncfusion_Blazor_Grids_GridTextWrapSettings_WrapMode) is set to **Content**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data +@using Syncfusion.Blazor.DropDowns - - +
+ + + + + +
+ + - - - - + + + + @code { - public List Orders { get; set; } + public SfGrid Grid { get; set; } + public List Orders { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); - } + Orders = InventoryData.GetAllRecords(); + } + public WrapMode WrapModeValue = WrapMode.Header; + public WrapMode DropDownValue = WrapMode.Header; + public class DropDownOrder + { + public string Text { get; set; } + public WrapMode Value { get; set; } + } + List DropDownData = new List + { + new DropDownOrder() { Text = "Both", Value = WrapMode.Both }, + new DropDownOrder() { Text = "Header", Value = WrapMode.Header}, + }; + public async Task OnChange(ChangeEventArgs Args) + { + WrapModeValue = Args.Value; + await Grid.Refresh(); + } } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +{% highlight c# tabtitle="InventoryData.cs" %} +public class InventoryData +{ + public static List Orders = new List(); + + public InventoryData(string inventor, int? patentFamilies, string country, string mainFields) { - public static List Orders = new List(); - public OrderData() - { + this.Inventor = inventor; + this.NumberofPatentFamilies = patentFamilies; + this.Country = country; + this.Mainfieldsofinvention = mainFields; + } - } - public OrderData(string Inventor, int? PatentFamilies, string Country, string MainFields) - { - this.Inventor = Inventor; - this.NumberofPatentFamilies = PatentFamilies; - this.Country = Country; - this.Mainfieldsofinvention = MainFields; - } - public static List GetAllRecords() + public static List GetAllRecords() + { + if (Orders.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData("Kia Silverb", 4737, "Australia", "Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI")); - Orders.Add(new OrderData("Shunpei Yamazaki", 4677, "Japan", "Various")); - Orders.Add(new OrderData("Lowell L. Wood, Jr.", 13197, "Canada", "Printing, Digital paper, Internet, Electronics, CGI, VLSI")); - Orders.Add(new OrderData("Paul Lap", 1255, "India", "Automotive, Stainless steel products")); - Orders.Add(new OrderData("Gurtej Sandhu", 1240, "USA", "Gaming machines")); - Orders.Add(new OrderData("Shunpei Yamazaki", 1240, "Canada", "Printing, Digital paper, Internet, Electronics, CGI, VLSI")); - Orders.Add(new OrderData("Paul Lap", 1093, "USA", "Automotive, Stainless steel products")); - Orders.Add(new OrderData("Gurtej Sandhu", 993, "Japan", "Various")); - Orders.Add(new OrderData("Kia Silverb", 949, "India", "Printing, Digital paper, Internet, Electronics, CGI, VLSI")); - code += 5; - } - } - return Orders; + Orders.Add(new InventoryData("Kia Silverbrook", 4737, "Australia", "Printing, Digital paper, Internet, Electronics, Lab-on-a-chip, MEMS, Mechanical, VLSI")); + Orders.Add(new InventoryData("Shunpei Yamazaki", 4677, "Japan", "Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED")); + Orders.Add(new InventoryData("Lowell L. Wood, Jr.", 1419, "USA", "Mosquito laser, Nuclear weapons")); + Orders.Add(new InventoryData("Paul Lapstun", 1281, "Australia", "Printing, Digital paper, Internet, Electronics, CGI, VLSI")); + Orders.Add(new InventoryData("Gurtej Sandhu", 1255, "India", "Thin film processes and materials, VLSI, Semiconductor device fabrication")); + Orders.Add(new InventoryData("Jun Koyama", 1240, "Japan", "Thin film transistors, Liquid crystal displays, OLED")); + Orders.Add(new InventoryData("Roderick A. Hyde", 1240, "USA", "Various")); + Orders.Add(new InventoryData("Leonard Forbes", 1093, "Canada", "Semiconductor Memories, CCDs, Thin film processes and materials, VLSI")); + Orders.Add(new InventoryData("Thomas Edison", 1084, "USA", "Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining")); + Orders.Add(new InventoryData("Donald E. Weder", 999, "USA", "Florist supplies")); + Orders.Add(new InventoryData("George Albert Lyon", 993, "Canada", "Automotive, Stainless steel products")); } - public string Inventor { get; set; } - public int? NumberofPatentFamilies { get; set; } - public string Country { get; set; } - public string Mainfieldsofinvention { get; set; } + return Orders; } + + public string Inventor { get; set; } + public int? NumberofPatentFamilies { get; set; } + public string Country { get; set; } + public string Mainfieldsofinvention { get; set; } +} {% endhighlight %} {% endtabs %} ->* If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the DataGrid's width. ->* If a column's header text contains no white space, the text may not be wrapped. ->* If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) properties of the column to customize the appearance of the header and cell content. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKWMjirseyNsmj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVJMVDAgevobXAA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Change the height of header @@ -504,6 +550,246 @@ You can use CSS to override the default height of the **.e-grid .e-headercell** } ``` +## Change header text dynamically + +The Syncfusion Grid component provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience. + +**Using Event** + +To modify the header text of a corresponding column dynamically, you can use the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid. + +When the `HeaderCellInfo` event is triggered, it provides a **HeaderCellInfoEventArgs** object as a parameter. This object contains the following properties: + +* **cell**: Defines the header cell that is being modified. +* **node**: Defines the DOM element of the header cell that is being modified. + +You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method of the Grid. + +**Using method** + +The Grid component provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use: + +1. [GetColumnByFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByFieldAsync_System_String_): This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. You can use this method to modify any aspect of the column. + +2. [GetColumnByUidAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByUidAsync_System_String_): Retrieves the column object based on its unique identifier. You can modify the `HeaderText` property of the column object to change the header text. + +> * When you change the header text dynamically, you need to **refresh** the Grid to reflect the changes by calling the [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method. +> * The unique identifier is automatically generated by the Grid component and may change whenever the grid is refreshed or updated. + +Here is an example of how to change the header text of a column using the `GetColumnByFieldAsync` method: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + +
+ + + + +
+
+ + +
+
+ + Change +
+ + + + + + + + + + +@code { + public SfGrid Grid { get; set; } + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public string ModifiedHeader { get; set; } = ""; + public string IdHeader { get; set; } = "Order ID"; + public string CustomerHeader { get; set; } = "Customer ID"; + public string FreightHeader { get; set; } = "Freight"; + public string DateHeader { get; set; } = "Order Date"; + public string PlaceHolder { get; set; } = "Enter new header text"; + public string DropDownValue { get; set; } = "OrderID"; + public class Columns + { + public string ID { get; set; } + public string Value { get; set; } + } + List DropDownData = new List { + new Columns() { ID= "OrderID", Value= "OrderID" }, + new Columns() { ID= "CustomerID", Value= "CustomerID" }, + new Columns() { ID= "Freight", Value= "Freight" }, + new Columns() { ID= "OrderDate", Value= "OrderDate" }, + }; + + public async Task changeHeaderText() + { + var selectedColumn = await Grid.GetColumnByFieldAsync(DropDownValue); + switch (selectedColumn.Field) + { + case "OrderID": + IdHeader = ModifiedHeader; + break; + case "CustomerID": + CustomerHeader = ModifiedHeader; + break; + case "Freight": + FreightHeader = ModifiedHeader; + break; + case "OrderDate": + DateHeader = ModifiedHeader; + break; + } + await Grid.RefreshHeaderAsync(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.OrderDate = OrderDate; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4))); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5))); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8))); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8))); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9))); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17))); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18))); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19))); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19))); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22))); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthfsiLOBGoUXutu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +**Changing the header text of all columns** + +If you want to change the header text of all columns in the grid, you can loop through the Columns collection of the grid and set the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText) property for each column. Here is an example: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
+ Change Header Text +
+ + + + + + + + + +@code { + public SfGrid Grid { get; set; } + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public string IdHeader { get; set; } = "OrderID"; + public string CustomerHeader { get; set; } = "CustomerID"; + public string FreightHeader { get; set; } = "Freight"; + public string CityHeader { get; set; } = "ShipCity"; + + public void ChangeHeaderText() + { + IdHeader = "Order ID"; + CustomerHeader = "Customer Name"; + FreightHeader = "Freight Charge"; + CityHeader = "Ship To City"; + Grid.RefreshHeaderAsync(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, string Shipcity) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.ShipCity = Shipcity; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, "Reims")); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, "Münster")); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83, "Rio de Janeiro")); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, "Lyon")); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, "Charleroi")); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, "Rio de Janeiro")); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, "Bern")); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, "Genève")); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, "Resende")); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, "San Cristóbal")); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, "Graz")); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, "México D.F.")); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, "Köln")); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, "Rio de Janeiro")); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, "Albuquerque")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVfCVDLUYQXoZkN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Change the orientation of header text By default, the text in the column headers of the Syncfusion DataGrid control is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_CustomAttributes) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). @@ -515,7 +801,7 @@ Follow the below steps to change the orientation of the header text in DataGrid: To `rotate` the header text, you can create a CSS class with the `transform` property that rotates the header text 90 degrees. This class will be added to the header cell using the `CustomAttributes` property. ```css - .e-grid .e-columnheader .e-headercell.textorientationclass .e-headercelldiv { + .e-grid .e-columnheader .e-headercell.orientation .e-headercelldiv { transform: rotate(90deg); // Rotate a particular headertext } ``` @@ -524,10 +810,10 @@ To `rotate` the header text, you can create a CSS class with the `transform` pro Once you have created the CSS class, you can add it to the particular column by using the `CustomAttributes` property. This property allows you to add any custom attribute to the GridColumn. -For example, to add the textorientationclass class to the CustomerID column, you can use the following code: +For example, to add the orientation class to the CustomerID column, you can use the following code: ```cshtml - + ``` **Step 3**: **Resize the header cell height** @@ -536,7 +822,7 @@ After adding the custom CSS class to a column, you need to resize the header cel ```cshtml function setHeaderHeight(args) { - var textWidth = document.querySelector(".textorientationclass > div").scrollWidth; // Obtain the width of the headerText content. + var textWidth = document.querySelector(".orientation > div").scrollWidth; // Obtain the width of the headerText content. var header = document.querySelectorAll(".e-columnheader"); for (var i = 0; i < header.length; i++) { (header.item(i)).style.height = textWidth + 'px'; // Assign the obtained textWidth as the height of the column header. @@ -557,12 +843,12 @@ This is demonstrated in the following sample: - + @@ -634,6 +920,131 @@ This is demonstrated in the following sample: {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBKiiDMrraFxmkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## Custom tooltip for header + +Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion DataGrid. This can be useful in situations where there is not enough space to display all of the information related to a column, or when there is additional context that may be helpful. + +To enable custom tooltips for headers in the Grid, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) feature by rendering the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) components within the template. + +Here's an example of how to use the `HeaderTemplate` to add a custom tooltip to a header cell: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + Order ID + + + + + + + Customer ID + + + + + + + Order Date + + + + + + + Freight + + + + + + + Shipped Date + + + + + + +@code { + public SfGrid Grid { get; set; } + + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + // Dictionary for column descriptions + public Dictionary ColumnDescriptions = new() + { + { "Order ID", "Order ID: A unique number assigned to each order." }, + { "Customer ID", "Customer ID: The ID of the customer placing the order." }, + { "Order Date", "Order Date: The date when the order was placed." }, + { "Freight", "Freight: The cost of shipping the order." }, + { "Shipped Date", "Shipped Date: The date when the order was shipped." } + }; + + // Method to get tooltip content dynamically based on HeaderText + public string GetTooltipContent(string headerText) + { + return ColumnDescriptions.ContainsKey(headerText) ? ColumnDescriptions[headerText] : "No description available."; + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, DateTime shippeddate) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShippedDate = shippeddate; + + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8), new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), new DateTime(1996, 7, 23))); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), new DateTime(1996, 7, 24))); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), new DateTime(1996, 7, 25))); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), new DateTime(1996, 7, 30))); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), new DateTime(1996, 7, 29))); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), new DateTime(1996, 7, 31))); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), new DateTime(1996, 8, 1))); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), new DateTime(1996, 8, 2))); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), new DateTime(1996, 8, 5))); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public DateTime ShippedDate { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrJirtAJDjvaNlx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Customize header text styles Customizing the datagrid header styles allows you to modify the appearance of the column header in the DataGrid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS and CustomAttributes property of the GridColumn component. @@ -733,9 +1144,9 @@ Step 1: Define a CSS class that specifies the styles you want to apply to the he ```CSS .e-grid .e-headercell.customcss { - background-color: rgb(43, 205, 226); - color: black; - } + background-color: rgb(43, 205, 226); + color: black; +} ``` @@ -750,14 +1161,13 @@ The following example demonstrates how to customize the appearance of the **Orde {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids -@using BlazorApp1.Data - + - - - - + + + + @code { - public List Orders { get; set; } + public List Orders { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); } } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} - public class OrderData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, DateTime OrderDate, DateTime shippeddate) { - public static List Orders = new List(); - public OrderData() - { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.OrderDate = OrderDate; + this.ShippedDate = shippeddate; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "Paul Henriot", new DateTime(1996, 7, 4), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10249, "Karin Josephs", new DateTime(1996, 7, 5), new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10250, "Mario Pontes", new DateTime(1996, 7, 8), new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10251, "Mary Saveley", new DateTime(1996, 7, 8), new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10252, "Pascale Cartrain", new DateTime(1996, 7, 9), new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10253, "Mario Pontes", new DateTime(1996, 7, 10), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10254, "Yang Wang", new DateTime(1996, 7, 11), new DateTime(1996, 7, 23))); + order.Add(new OrderDetails(10255, "Michael Holz", new DateTime(1996, 7, 12), new DateTime(1996, 7, 24))); + order.Add(new OrderDetails(10256, "Paula Parente", new DateTime(1996, 7, 15), new DateTime(1996, 7, 25))); + order.Add(new OrderDetails(10257, "Carlos Hernández", new DateTime(1996, 7, 16), new DateTime(1996, 7, 30))); + order.Add(new OrderDetails(10258, "Roland Mendel", new DateTime(1996, 7, 17), new DateTime(1996, 7, 29))); + order.Add(new OrderDetails(10259, "Francisco Chang", new DateTime(1996, 7, 18), new DateTime(1996, 7, 31))); + order.Add(new OrderDetails(10260, "Henriette Pfalzheim", new DateTime(1996, 7, 19), new DateTime(1996, 8, 1))); + order.Add(new OrderDetails(10261, "Bernardo Batista", new DateTime(1996, 7, 19), new DateTime(1996, 8, 2))); + order.Add(new OrderDetails(10262, "Paula Wilson", new DateTime(1996, 7, 22), new DateTime(1996, 8, 5))); } - public OrderData(int? OrderID, string CustomerID, double Freight, DateTime? OrderDate) + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime OrderDate { get; set; } + public DateTime ShippedDate { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVJMVtUKbqNkJzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Using event + +To customize the appearance of the grid header, you can handle the [HeaderCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_HeaderCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column. + +The following example demonstrates how to add a `HeaderCellInfo` event handler to the grid. In the event handler, checked whether the current header column is **Order Date** field and then applied the appropriate CSS class to the cell based on its value. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code { + public SfGrid Grid { get; set; } + + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public void HeaderCell(HeaderCellInfoEventArgs args) + { + if (args.Column.Field == "OrderDate") { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.OrderDate = OrderDate; + args.Cell.AddClass(new string[] { "customcss" }); } - public static List GetAllRecords() + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, DateTime shippeddate) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShippedDate = shippeddate; + + } + public static List GetAllRecords() + { + if (order.Count == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996,07,08))); - Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 07, 18))); - Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 07, 05))); - Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 07, 23))); - Orders.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 07, 16))); - Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 07, 12))); - Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 07, 18))); - Orders.Add(new OrderData(10255, "VINET", 148.53, new DateTime(1996, 07, 05))); - Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 07, 01))); - code += 5; - } - } - return Orders; + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8), new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), new DateTime(1996, 7, 23))); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), new DateTime(1996, 7, 24))); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), new DateTime(1996, 7, 25))); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), new DateTime(1996, 7, 30))); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), new DateTime(1996, 7, 29))); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), new DateTime(1996, 7, 31))); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), new DateTime(1996, 8, 1))); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), new DateTime(1996, 8, 2))); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), new DateTime(1996, 8, 5))); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } - public DateTime? OrderDate { get; set; } - } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public DateTime ShippedDate { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLqCMNiLfcCJPPZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfsMWkTIsIyEuk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## How to refresh header + +The refresh header feature in the Syncfusion Blazor DataGrid allows you to update the header section of the grid whenever changes are made to the grid's columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment. +To use the refresh header feature, you can call the [RefreshHeaderAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshHeaderAsync) method of the DataGrid component. This method updates the grid header with the latest changes made to the columns. +The following example demonstrates how to use the `RefreshHeaderAsync` method to update the grid header: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +
+ Refresh Header +
+ + + + + + + + +@code { + public SfGrid Grid { get; set; } + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public string CustomerHeaderText = "CustomerID"; + public void refreshHeader() + { + CustomerHeaderText= "New Header Text"; + Grid.RefreshHeaderAsync(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.OrderDate = OrderDate; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4))); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5))); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8))); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8))); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9))); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17))); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18))); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19))); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19))); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22))); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } +} +{% endhighlight %} +{% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTCWruiIbAmHsM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index 4a18d906d5..471ea72333 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -112,51 +112,228 @@ The following example demonstrates how to define a `Template` for the **Employee {% endtabs %} +![Render image in a column](./images/render-image-column-template.png) > The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) option allows to define any HTML content within a column. +## Render hyperlink in a column + +The DataGrid component provides support for rendering hyperlink columns and performing routing on click using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a link to another page or website. + +The following example demonstrates, how to render hyperlink column in the Grid using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the `GridColumn` tag. To define a `Template` for the column, you can use the `Template` with the `a` tag to create the hyperlink. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + +@code { + public List EmployeeData { get; set; } + + protected override void OnInitialized() + { + EmployeeData = EmployeeDetails.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} +public class EmployeeDetails +{ + public static List employee = new List(); + + public EmployeeDetails() { } + + public EmployeeDetails(int employeeID, string lastName, string firstName) + { + this.EmployeeID = employeeID; + this.LastName = lastName; + this.FirstName = firstName; + } + + public static List GetAllRecords() + { + if (employee.Count == 0) + { + employee.Add(new EmployeeDetails(1, "Davolio", "Nancy")); + employee.Add(new EmployeeDetails(2, "Fuller", "Andrew")); + employee.Add(new EmployeeDetails(3, "Leverling", "Janet")); + employee.Add(new EmployeeDetails(4, "Peacock", "Margaret")); + employee.Add(new EmployeeDetails(5, "Buchanan", "Steven")); + employee.Add(new EmployeeDetails(6, "Suyama", "Michael")); + employee.Add(new EmployeeDetails(7, "King", "Robert")); + employee.Add(new EmployeeDetails(8, "Callahan", "Laura")); + employee.Add(new EmployeeDetails(9, "Dodsworth", "Anne")); + } + return employee; + } + + public int EmployeeID { get; set; } + public string LastName { get; set; } + public string FirstName { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrpMMVXzoBzmrze?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Render other components in a column The column template has options to render a custom component in a DataGrid column instead of a field value. +### Render LineChart component in a column + +The [LineChart](https://blazor.syncfusion.com/documentation/sparkline/getting-started-webapp) component of Syncfusion provides an elegant way to represent and compare data over time. It displays data points connected by straight line segments to visualize trends in data. + +In the following example, we rendered the Sparkline Chart component in the Grid column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code { + public List EmployeeData { get; set; } + + protected override void OnInitialized() + { + EmployeeData = EmployeeDetails.GetAllRecords(); + } + // Line data + private List> lineData = new List> + { + new List { 0, 6, -4, 1, -3, 2, 5 }, + new List { 5, -4, 6, 3, -1, 2, 0 }, + new List { 6, 4, 0, 3, -2, 5, 1 }, + new List { 4, -6, 3, 0, 1, -2, 5 }, + new List { 3, 5, -6, -4, 0, 1, 2 }, + new List { 1, -3, 4, -2, 5, 0, 6 }, + new List { 2, 4, 0, -3, 5, -6, 1 }, + new List { 5, 4, -6, 3, 1, -2, 0 }, + new List { 0, -6, 4, 1, -3, 2, 5 }, + new List { 6, 4, 0, -3, 2, -5, 1 } + }; + + // Function to get sparkline data + private List GetSparkData(string type, int count) + { + if (type == "line" && count > 0 && count <= lineData.Count) + { + return lineData[count - 1]; + } + return new List(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} +public class EmployeeDetails +{ + public static List employee = new List(); + + public EmployeeDetails() { } + + public EmployeeDetails(int employeeID, string lastName, string firstName) + { + this.EmployeeID = employeeID; + this.LastName = lastName; + this.FirstName = firstName; + } + + public static List GetAllRecords() + { + if (employee.Count == 0) + { + employee.Add(new EmployeeDetails(1, "Davolio", "Nancy")); + employee.Add(new EmployeeDetails(2, "Fuller", "Andrew")); + employee.Add(new EmployeeDetails(3, "Leverling", "Janet")); + employee.Add(new EmployeeDetails(4, "Peacock", "Margaret")); + employee.Add(new EmployeeDetails(5, "Buchanan", "Steven")); + employee.Add(new EmployeeDetails(6, "Suyama", "Michael")); + employee.Add(new EmployeeDetails(7, "King", "Robert")); + employee.Add(new EmployeeDetails(8, "Callahan", "Laura")); + employee.Add(new EmployeeDetails(9, "Dodsworth", "Anne")); + } + return employee; + } + + public int EmployeeID { get; set; } + public string LastName { get; set; } + public string FirstName { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBJsWrWVXXLwpde?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ### Render DropDownList component in a column -To render a custom component in a grid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the column `Template` property. In the following code, we rendered the [DropDownList](https://ej2.syncfusion.com/angular/documentation/drop-down-list/getting-started) component in the **Order Status** column by defining the `Template` property. +To render a custom component in a grid column, you need to define a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) for the column using the column `Template` property. In the following code, we rendered the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component in the **Order Status** column by defining the `Template` property. ```csharp - - - + + + ``` {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.DropDowns -@using BlazorApp1.Data - - - - + + + + @code { - public List Orders { get; set; } + public List Orders { get; set; } public List EmployeeDetails { get; set; } protected override void OnInitialized() { - Orders = OrderData.GetAllRecords(); + Orders = OrderDetails.GetAllRecords(); EmployeeDetails = Enumerable.Range(1, 3).Select(x => new EmployeeNames() { @@ -171,60 +348,226 @@ To render a custom component in a grid column, you need to define a [Template](h } } {% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} -public class OrderData +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string Orderstatus) { - public static List Orders = new List(); - public OrderData() - { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.OrderStatus = Orderstatus; - } - public OrderData(int? OrderID, string CustomerID, double Freight, string Title, string OrderStatus) + } + public static List GetAllRecords() + { + if (order.Count == 0) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.Title = Title; - this.OrderStatus = OrderStatus; + order.Add(new OrderDetails(10248, "VINET", 32.38, "Order Placed")); + order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Processing")); + order.Add(new OrderDetails(10250, "HANAR", 65.83, "Order Placed")); + order.Add(new OrderDetails(10251, "VICTE", 41.34, "Order Placed")); + order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Processing")); + order.Add(new OrderDetails(10253, "HANAR", 58.17, "Processing")); + order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Order Placed")); + order.Add(new OrderDetails(10255, "RICSU", 148.33, "Processing")); + order.Add(new OrderDetails(10256, "WELLI", 13.97, "Order Placed")); + order.Add(new OrderDetails(10257, "HILAA", 81.91, "Processing")); + order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Order Placed")); + order.Add(new OrderDetails(10259, "CENTC", 3.25, "Processing")); + order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Order Placed")); + order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Order Placed")); + order.Add(new OrderDetails(10262, "RATTC", 48.29, "Processing")); } - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "Nancy",32.14, "Sales Representative", "Order Placed")); - Orders.Add(new OrderData(10249, "Andrew", 33.33, "Vice President, Sales", "Processing")); - Orders.Add(new OrderData(10250, "Janet", 56.78, "Sales Manager", "Delivered")); - Orders.Add(new OrderData(10251, "Margaret",43.34, "Inside Sales Coordinator", "Delivered")); - Orders.Add(new OrderData(10252, "Steven", 17.98, "Sales Manager", "Delivered")); - Orders.Add(new OrderData(10253, "Michael", 53.33, "Sales Representative", "Processing")); - Orders.Add(new OrderData(10254, "Robert", 78.99, "Vice President, Sales", "Delivered")); - Orders.Add(new OrderData(10255, "Anne", 46.66, "Inside Sales Coordinator", "Order Placed")); - Orders.Add(new OrderData(10256, "Laura", 98.76, "Sales Manager", "Delivered")); - code += 5; + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string OrderStatus { get; set; } +} +{% endhighlight %} +{% endtabs %} + + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBJCrtKzUHwTXIk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Render Chip component in a column + +The DataGrid component provides support for rendering [Chips](https://blazor.syncfusion.com/documentation/color-picker/getting-started-with-web-app) component in a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. This feature is useful when displaying data that requires a chip component to be rendered in a column. + +In the following code, we rendered the Chips component in the Grid **First Name** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. + +``` + + + + + +``` + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + +@code { + public List EmployeeData { get; set; } + + protected override void OnInitialized() + { + EmployeeData = EmployeeDetails.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} +public class EmployeeDetails +{ + public static List employee = new List(); + + public EmployeeDetails() { } + + public EmployeeDetails(int employeeID, string lastName, string firstName, string city) + { + this.EmployeeID = employeeID; + this.LastName = lastName; + this.FirstName = firstName; + this.City = city; + } + + public static List GetAllRecords() + { + if (employee.Count == 0) + { + employee.Add(new EmployeeDetails(1, "Davolio", "Nancy", "Seattle")); + employee.Add(new EmployeeDetails(2, "Fuller", "Andrew", "Tacoma")); + employee.Add(new EmployeeDetails(3, "Leverling", "Janet", "Kirkland")); + employee.Add(new EmployeeDetails(4, "Peacock", "Margaret", "Redmond")); + employee.Add(new EmployeeDetails(5, "Buchanan", "Steven", "London")); + employee.Add(new EmployeeDetails(6, "Suyama", "Michael", "London")); + employee.Add(new EmployeeDetails(7, "King", "Robert", "London")); + employee.Add(new EmployeeDetails(8, "Callahan", "Laura", "Seattle")); + employee.Add(new EmployeeDetails(9, "Dodsworth", "Anne", "London")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } - public string Title { get; set; } - public string OrderStatus { get; set; } - } + return employee; + } + + public int EmployeeID { get; set; } + public string LastName { get; set; } + public string FirstName { get; set; } + public string City { get; set; } +} {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfsihZJaDYOHeV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKiMZsUppLpTZe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +### Render ProgressBar component in a column + +The Syncfusion Grid component supports rendering the [Progress Bar](https://blazor.syncfusion.com/documentation/progress-bar/getting-started-webapp) component within a column using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. Displaying the `Progress Bar` component in a grid column allows users to visually track the progress of tasks or operations associated with specific records. This feature is particularly useful for applications involving processes such as data loading, task completion, or other progressive activities. + +In the following code, the `Progress Bar` component render in the Grid **Freight** column by defining the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property. + +``` + + +``` + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.ProgressBar + + + + + + + + + + + +@code { + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 5, 32.38)); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61)); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83)); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34)); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3)); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17)); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98)); + order.Add(new OrderDetails(10255, "RICSU", 9, 48.33)); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97)); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91)); + order.Add(new OrderDetails(10258, "ERNSH", 1, 40.51)); + order.Add(new OrderDetails(10259, "CENTC", 7, 3.25)); + order.Add(new OrderDetails(10260, "OTTIK", 2, 55.09)); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05)); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29)); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public int EmployeeID { get; set; } + public double Freight { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVpMWhMhJHQEtIF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Using condition template The conditional column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) allows you to display template elements based on specific conditions. - In the following code, checkbox is rendered based on **Discontinued** field value in the datasource. This data can be accessed inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) using the implicit named parameter **context**. {% tabs %} @@ -310,6 +653,286 @@ In the following code, checkbox is rendered based on **Discontinued** field valu {% previewsample "https://blazorplayground.syncfusion.com/embed/rNrKWsDsASInUbPD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## How to get the row object by clicking on the template element + +The Grid component allows you to retrieve the row object of the selected record when clicking on a [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) element. This feature can be useful when you need to perform custom actions based on the selected record. + +In the following code, the button component is rendered in the **Employee Data** column and [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event binding is used to call the showDetails method when the template element is clicked and the [RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected) event of the grid used to access the selected row object and display it in the dialog popup. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + +@code { + public SfGrid Grid { get; set; } + public List EmployeeData { get; set; } + protected override void OnInitialized() + { + EmployeeData = EmployeeDetails.GetAllRecords(); + } + private SfDialog Dialog; + private EmployeeDetails selectedRecord; + + private void OnRowSelected(RowSelectEventArgs args) + { + selectedRecord = args.Data; + } + private void ShowDetails() + { + Dialog.ShowAsync(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} +public class EmployeeDetails +{ + public static List employee = new List(); + + public EmployeeDetails(int employeeID, string lastName, string firstName) + { + this.EmployeeID = employeeID; + this.LastName = lastName; + this.FirstName = firstName; + } + + public static List GetAllRecords() + { + if (employee.Count == 0) + { + employee.Add(new EmployeeDetails(1, "Davolio", "Nancy")); + employee.Add(new EmployeeDetails(2, "Fuller", "Andrew")); + employee.Add(new EmployeeDetails(3, "Leverling", "Janet")); + employee.Add(new EmployeeDetails(4, "Peacock", "Margaret")); + employee.Add(new EmployeeDetails(5, "Buchanan", "Steven")); + employee.Add(new EmployeeDetails(6, "Suyama", "Michael")); + employee.Add(new EmployeeDetails(7, "King", "Robert")); + employee.Add(new EmployeeDetails(8, "Callahan", "Laura")); + employee.Add(new EmployeeDetails(9, "Dodsworth", "Anne")); + } + return employee; + } + + public int EmployeeID { get; set; } + public string LastName { get; set; } + public string FirstName { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhJiCBLfgSrKWdw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Use custom helper inside the template + +The Syncfusion Grid allows you to use custom helpers inside the `Template` directive of a column. This feature allows you to create complex templates that can incorporate additional helper functions that are not available through the default [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) syntax. + +To use the custom helper function inside a column template, you must first add the function to the template's context. + +The following example demonstrates how to use a custom helper function inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property, using the `Template` element for the Freight column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code { + public List OrderData { get; set; } + + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public string formatCurrency(double value) + { + return "₹ " + value.ToString("F3"); // Format currency with 3 decimals + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + + public OrderDetails(int OrderID, string CustomerId, DateTime Orderdate, double Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.OrderDate = Orderdate; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", new DateTime(1996, 7, 4), 32.38)); + order.Add(new OrderDetails(10249, "TOMSP", new DateTime(1996, 7, 5), 11.61)); + order.Add(new OrderDetails(10250, "HANAR", new DateTime(1996, 7, 8), 65.83)); + order.Add(new OrderDetails(10251, "VICTE", new DateTime(1996, 7, 8), 41.34)); + order.Add(new OrderDetails(10252, "SUPRD", new DateTime(1996, 7, 9), 51.3)); + order.Add(new OrderDetails(10253, "HANAR", new DateTime(1996, 7, 10), 58.17)); + order.Add(new OrderDetails(10254, "CHOPS", new DateTime(1996, 7, 11), 22.98)); + order.Add(new OrderDetails(10255, "RICSU", new DateTime(1996, 7, 12), 148.33)); + order.Add(new OrderDetails(10256, "WELLI", new DateTime(1996, 7, 15), 13.97)); + order.Add(new OrderDetails(10257, "HILAA", new DateTime(1996, 7, 16), 81.91)); + order.Add(new OrderDetails(10258, "ERNSH", new DateTime(1996, 7, 17), 140.51)); + order.Add(new OrderDetails(10259, "CENTC", new DateTime(1996, 7, 18), 3.25)); + order.Add(new OrderDetails(10260, "OTTIK", new DateTime(1996, 7, 19), 55.09)); + order.Add(new OrderDetails(10261, "QUEDE", new DateTime(1996, 7, 19), 3.05)); + order.Add(new OrderDetails(10262, "RATTC", new DateTime(1996, 7, 22), 48.29)); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime OrderDate { get; set; } + public double Freight { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthJiiBVViweNEBD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> Custom helpers can only be used inside the `Template` property of a column. + +## Dynamically adding template column + +The Syncfusion Grid component allows you to dynamically add template columns at runtime. This capability is particularly useful when the structure of the grid needs to be modified based on individual interactions or other dynamic conditions. + +Dynamically adding template columns involves creating and inserting columns with custom templates after the grid has been initialized. This approach provides flexibility in presenting data in a highly customizable manner. + +The following example demonstrates how to add template column using external button click. In this example, the **ShipCountry** column with a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) is added in column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template), and an icon is displayed using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) for the **ShipCountry** column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Buttons + +Add Column + + + + + + + + +@code { + public SfGrid Grid { get; set; } + public List ShipCountryList { get; set; } = new(); + public List OrderData { get; set; } + + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + ShipCountryList = OrderData.Select(o => o.ShipCountry).Distinct().ToList(); + } + private void AddTemplateColumn() + { + List NewColumns = new List { + new GridColumn { + Field = "ShipCountry", + Template= data => + { + return @
+ + +
; + }, + HeaderTemplate = data => {return @
Ship Country
;}, + Width = "120" + } + }; + foreach (GridColumn column in NewColumns) + { + Grid.Columns.Add(column); + } + Grid.RefreshColumnsAsync(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + + public OrderDetails(int OrderID, string CustomerId, string Shipcountry, double Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.ShipCountry = Shipcountry; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "France", 32.38)); + order.Add(new OrderDetails(10249, "TOMSP", "Germany", 11.61)); + order.Add(new OrderDetails(10250, "HANAR", "Brazil", 65.83)); + order.Add(new OrderDetails(10251, "VICTE", "France", 41.34)); + order.Add(new OrderDetails(10252, "SUPRD", "Belgium", 51.3)); + order.Add(new OrderDetails(10253, "HANAR", "Brazil", 58.17)); + order.Add(new OrderDetails(10254, "CHOPS", "Switzerland", 22.98)); + order.Add(new OrderDetails(10255, "RICSU", "Switzerland", 148.33)); + order.Add(new OrderDetails(10256, "WELLI", "Brazil", 13.97)); + order.Add(new OrderDetails(10257, "HILAA", "Venezuela", 81.91)); + order.Add(new OrderDetails(10258, "ERNSH", "Austria", 140.51)); + order.Add(new OrderDetails(10259, "CENTC", "Mexico", 3.25)); + order.Add(new OrderDetails(10260, "OTTIK", "Germany", 55.09)); + order.Add(new OrderDetails(10261, "QUEDE", "Brazil", 3.05)); + order.Add(new OrderDetails(10262, "RATTC", "USA", 48.29)); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCountry { get; set; } + public double Freight { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVJsChWpdcrPOlN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Using hyperlink column and performing routing on click The Column template property can be used to provide routing links inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). For routing, [UriHelper](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0&viewFallbackFrom=aspnetcore-3.0#uri-and-navigation-state-helpers) can be utilized. @@ -398,7 +1021,6 @@ This can be achieved by initially defining an anchor tag inside the column templ {% endhighlight %} {% endtabs %} - In the above code, the url to be navigated is specified in the Link variable of the DataGrid data. Based on this, the page is routed to the corresponding url. After that, add new razor page for routing with routing url along with the parameters to be received, and initialize it with the required details. @@ -425,10 +1047,9 @@ After that, add new razor page for routing with routing url along with the param {% endhighlight %} {% endtabs %} - The following GIF represents template routing in DataGrid ![Blazor DataGrid with routing template.](./images/blazor-datagrid-template-routing.gif) ## See also -* [FileUpload in Grid Column Template](https://www.syncfusion.com/forums/151021/fileupload-in-grid-column-template) \ No newline at end of file +* [FileUpload in Grid Column Template](https://www.syncfusion.com/forums/151021/fileupload-in-grid-column-template) diff --git a/blazor/datagrid/images/render-image-column-template.png b/blazor/datagrid/images/render-image-column-template.png new file mode 100644 index 0000000000..e97842ce70 Binary files /dev/null and b/blazor/datagrid/images/render-image-column-template.png differ