From 60c89e5f33154d1a085f1b83f6442d0a81e3921c Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Tue, 26 Nov 2024 11:54:26 +0530 Subject: [PATCH 1/4] 922487: Revamped column headers documentation in development --- blazor/datagrid/column-headers.md | 225 ++++++++++- blazor/datagrid/column-template.md | 628 ++++++++++++++++++++++++++++- 2 files changed, 845 insertions(+), 8 deletions(-) diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index 3ccfd87e1c..ba252dd20c 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. @@ -489,7 +491,6 @@ In the following example, the [TextWrapSettings.WrapMode](https://help.syncfusio {% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKWMjirseyNsmj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - ## Change the height of header Changing the height of the header can be useful in cases where the default height is not sufficient to display the header content cell. For example, if you have a header with a lot of text or if you want to add an image to the header, you may need to increase the height of the header to accommodate the content.This can be easily achieved by changing the height of the header using CSS or by dynamically adjusting the height using a methods. @@ -515,7 +516,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 +525,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 +537,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 +558,12 @@ This is demonstrated in the following sample: - + @@ -634,6 +635,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/VjhTCWVShlavzQwS?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. @@ -821,8 +947,93 @@ The following example demonstrates how to customize the appearance of the **Orde {% previewsample "https://blazorplayground.syncfusion.com/embed/LZLqCMNiLfcCJPPZ?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") + { + args.Cell.AddClass(new string[] { "customcss" }); + } + } +} +{% 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/BjLfsMWkTIsIyEuk?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..a48dfceef5 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -115,14 +115,188 @@ The following example demonstrates how to define a `Template` for the **Employee > 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 @@ -220,6 +394,177 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKiMZsUppLpTZe?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")); + } + 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" %} + +### 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. @@ -310,6 +655,287 @@ 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 directive 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. From 57842564ff3f903e14905afa0c8a308c3ee1d5cc Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Wed, 4 Dec 2024 14:22:46 +0530 Subject: [PATCH 2/4] 922487: Revamped column headers and column template in development --- blazor/datagrid/column-headers.md | 780 +++++++++++++----- blazor/datagrid/column-template.md | 112 ++- .../images/render-image-column-template.png | Bin 0 -> 58723 bytes 3 files changed, 627 insertions(+), 265 deletions(-) create mode 100644 blazor/datagrid/images/render-image-column-template.png diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index ba252dd20c..abf704dde6 100644 --- a/blazor/datagrid/column-headers.md +++ b/blazor/datagrid/column-headers.md @@ -106,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 @@ -144,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) @@ -162,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.EmployeeID = EmployeeId; + this.Freight = Freight; + this.OrderDate = OrderDate; + } + public static List GetAllRecords() + { + if (order.Count == 0) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.OrderDate = OrderDate; - this.Freight = Freight; + 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 static List GetAllRecords() - { - 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; - } - - - 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. @@ -228,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 + +
+ + + +
+ + + @@ -252,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() - { - - } - public OrderData( int? OrderID,DateTime? OrderDate,double? Freight,string ShipCountry,DateTime? ShippedDate) - { - this.OrderID = OrderID; - this.OrderDate = OrderDate; - this.Freight = Freight; - this.ShipCountry = ShipCountry; - this.ShippedDate = ShippedDate; - } + this.OrderID = OrderID; + this.ShipCountry = Shipcountry; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShippedDate = shippeddate; - public static List GetAllRecords() + } + 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, 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; + 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 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 @@ -416,80 +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 @@ -505,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). @@ -758,7 +1043,7 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhTCWVShlavzQwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrJirtAJDjvaNlx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customize header text styles @@ -859,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; +} ``` @@ -876,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 OrderData(int? OrderID, string CustomerID, double Freight, DateTime? OrderDate) + } + public static List GetAllRecords() + { + if (order.Count == 0) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.OrderDate = OrderDate; + 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 static List GetAllRecords() - { - 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; - } - 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 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/rNVJMVtUKbqNkJzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Using event @@ -1036,4 +1318,90 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfsMWkTIsIyEuk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% 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 a48dfceef5..dea1269628 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -111,7 +111,7 @@ The following example demonstrates how to define a `Template` for the **Employee {% endhighlight %} {% 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. @@ -299,38 +299,40 @@ public class EmployeeDetails 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() { @@ -345,54 +347,50 @@ 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) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.Freight = Freight; - this.Title = Title; - this.OrderStatus = OrderStatus; - } - public static List GetAllRecords() + } + 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, "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 Orders; + 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 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 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/hjhKiMZsUppLpTZe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBJCrtKzUHwTXIk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Render Chip component in a column @@ -569,7 +567,6 @@ public class OrderDetails 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 %} @@ -667,7 +664,6 @@ In the following code, the button component is rendered in the **Employee Data** @using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Buttons - @@ -833,7 +829,7 @@ public class OrderDetails {% 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 directive of a column. +> Custom helpers can only be used inside the `Template` property of a column. ## Dynamically adding template column @@ -1024,7 +1020,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. @@ -1051,7 +1046,6 @@ 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) 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 0000000000000000000000000000000000000000..e97842ce706dad7efd7120eca8c6df12284a7702 GIT binary patch literal 58723 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–P_ecjY7{F@&$ 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%0D9^8# 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 literal 0 HcmV?d00001 From e4e97404e2629b7bbf57fc7d03efb7e04db8eba3 Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Wed, 4 Dec 2024 14:30:38 +0530 Subject: [PATCH 3/4] 922487: Revamped column headers and column template in development --- blazor/datagrid/column-headers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index abf704dde6..6ae4d21f54 100644 --- a/blazor/datagrid/column-headers.md +++ b/blazor/datagrid/column-headers.md @@ -1166,8 +1166,8 @@ The following example demonstrates how to customize the appearance of the **Orde - - + +