From d116c6762fb2b42a850004d2030946e47f0ec090 Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Tue, 19 Nov 2024 12:39:47 +0530 Subject: [PATCH 01/78] 921364: Documentation of column pinning in hotfix --- blazor-toc.html | 1 + blazor/datagrid/frozen-column.md | 610 +++++++++++++++++++++++++++++++ 2 files changed, 611 insertions(+) create mode 100644 blazor/datagrid/frozen-column.md diff --git a/blazor-toc.html b/blazor-toc.html index 30e6b8fe4b..f6edc2dac1 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1805,6 +1805,7 @@
  • ForeignKey Column
  • Column Reorder
  • Column Resizing
    • +
  • Column Pinning (Frozen)
  • Column Chooser
  • Column Menu
    • diff --git a/blazor/datagrid/frozen-column.md b/blazor/datagrid/frozen-column.md new file mode 100644 index 0000000000..bf55a97e0a --- /dev/null +++ b/blazor/datagrid/frozen-column.md @@ -0,0 +1,610 @@ +--- +layout: post +title: Column pinning (Frozen) in Blazor DataGrid Component | Syncfusion +description: Checkout and learn here all about column pinning (Frozen) in the Syncfusion Blazor DataGrid component and much more details. +platform: Blazor +control: DataGrid +documentation: ug +--- + +# Column Pinning (Frozen) in Blazor DataGrid component + +In the Syncfusion Blazor DataGrid component, you have the capability to **freeze** columns, ensuring they remain visible as you scroll through extensive datasets. This functionality significantly improves user experience by keeping critical information constantly within view, even when navigating through large volumes of data. This means that important columns remain fixed in their positions, making it easier to access and reference key data points while working with the grid. + +In the following example, the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) property is set to **2**. This configuration freezes the left two columns of the grid, and they will remain fixed in their positions while the rest of the columns grid can be scrolled horizontally. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons + +
    + + + + + Update +
    + + + + + + + + + + + + + + + + + +@code { + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + + public int? value { get; set; } = 2; + public int FrozenColumns { get; set; } = 2; + + public void ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs args) + { + if (args.Value != null && args.Value != 0) + { + value = args.Value; + } + } + + public void UpdateValue() + { + FrozenColumns = (int)value; + } + +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() + { + + } + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, string ShipAddress, string shipRegion, string shipPostalCode) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipName = ShipName; + this.ShipCountry = ShipCountry; + this.ShipAddress = ShipAddress; + this.ShipRegion = shipRegion; + this.ShipPostalCode = shipPostalCode; + + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4), "Reims", "Vins et alcools Chevalier", "Australia", "59 rue de l Abbaye", "51100", "CJ")); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), "Münster", "Toms Spezialitäten", "Australia", "Luisenstr. 48", "44087", "CJ")); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ")); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), "Lyon", "Victuailles en stock", "Australia", "2, rue du Commerce","69004", "CJ")); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), "Charleroi", "Suprêmes délices", "United States", "Boulevard Tirou, 255", "B-6000", "CJ")); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ")); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), "Bern", "Chop-suey Chinese", "Switzerland", "Hauptstr. 31", "3012", "CJ")); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), "Genève", "Richter Supermarkt", "Switzerland", "Starenweg 5", "1204", "CJ")); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), "Resende", "Wellington Importadora", "Brazil", "Rua do Mercado, 12", "08737-363", "SP")); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "HILARION-Abastos", "Venezuela", "Carrera 22 con Ave. Carlos Soublette #8-35", "5022", "Táchira")); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), "Graz", "Ernst Handel", "Austria", "Kirchgasse 6", "8010", "CJ")); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Centro comercial Moctezuma", "Mexico", "Sierras de Granada 9993", "05022", "CJ")); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), "Köln", "Ottilies Käseladen", "Germany", "Mehrheimerstr. 369", "50739", "CJ")); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Que Delícia", "Brazil", "Rua da Panificadora, 12", "02389-673", "RJ")); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "Rattlesnake Canyon Grocery", "USA", "2817 Milton Dr.", "87110", "NM")); + } + 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; } + public DateTime OrderDate { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + public string ShipAddress { get; set; } + public string ShipRegion { get; set; } + public string ShipPostalCode { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhfWsCbfiSSvvZz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> * Frozen columns should not be set outside the grid view port. +> * Frozen Grid support column virtualization feature, which helps to improve the Grid performance while loading a large dataset. +> * The frozen feature is supported only for the columns that are visible in the current view. +> * You can use both `FrozenColumns` property and [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows) property in the same application. + +## Freeze particular columns + +The Syncfusion Blazor DataGrid provides a valuable feature that enables you to freeze specific columns, significantly enhancing data visibility and improving your overall user experience. This functionality allows you to select particular columns and freeze them by positioning them at the leftmost side of the grid, ensuring they remain fixed in place while the remaining grid columns can still be scrolled horizontally. While the `FrozenColumns` property freezes columns in the order they are initialized in the grid, you can also use the `IsFrozen` property at the column level to freeze a specific column at any desired index on the left side, offering flexibility in managing which columns are frozen. + +To freeze a particular column in the grid, you can utilize the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) property of the grid component as **true**. + +The following example demonstrates how to freeze particular column in grid using `IsFrozen` property. This is achieved by the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `DropDownList` component. Within the change event, you can modify the `IsFrozen` property of the selected column using the [GetColumnByFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetColumnByFieldAsync_System_String_) method. Afterward, you can use the [RefreshColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RefreshColumnsAsync) method to update the displayed columns based on your interaction. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + +
    + + + + + +
    + + + + + + + + + + + + + + + + + +@code { + public SfGrid Grid { get; set; } + + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public string DropDownValue { get; set; } = "CustomerID"; + public class Columns + { + public string ID { get; set; } + public string Value { get; set; } + } + List LocalData = new List + { + + new Columns() { ID= "CustomerID", Value= "CustomerID" }, + new Columns() { ID= "OrderID", Value= "OrderID" }, + new Columns() { ID= "OrderDate", Value= "OrderDate" }, + new Columns() { ID= "EmployeeID", Value= "EmployeeID" }, + new Columns() { ID= "ShipName", Value= "ShipName" }, + new Columns() { ID= "ShipAddress", Value= "ShipAddress" }, + new Columns() { ID= "ShipCity", Value= "ShipCity" }, + new Columns() { ID= "ShipCountry", Value= "ShipCountry" }, + new Columns() { ID= "ShipRegion", Value= "ShipRegion" }, + new Columns() { ID= "ShipPostalCode", Value= "ShipPostalCode" }, + new Columns() { ID= "Freight", Value= "Freight" }, + }; + private async Task ChangeColumn(ChangeEventArgs args) + { + // Unfreeze all columns in the grid + foreach (var column in Grid.Columns) + { + if (column.IsFrozen) + { + column.IsFrozen = false; + } + } + // Freeze the selected column, if it exists + var selectedColumn = await Grid.GetColumnByFieldAsync(args.Value); + { + selectedColumn.IsFrozen = true; + } + // Refresh the grid to apply column changes + await Grid.RefreshColumnsAsync(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() + { + + } + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, string ShipAddress, string shipRegion, string shipPostalCode) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipName = ShipName; + this.ShipCountry = ShipCountry; + this.ShipAddress = ShipAddress; + this.ShipRegion = shipRegion; + this.ShipPostalCode = shipPostalCode; + + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4), "Reims", "Vins et alcools Chevalier", "Australia", "59 rue de l Abbaye", "51100", "CJ")); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), "Münster", "Toms Spezialitäten", "Australia", "Luisenstr. 48", "44087", "CJ")); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ")); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), "Lyon", "Victuailles en stock", "Australia", "2, rue du Commerce","69004", "CJ")); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), "Charleroi", "Suprêmes délices", "United States", "Boulevard Tirou, 255", "B-6000", "CJ")); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ")); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), "Bern", "Chop-suey Chinese", "Switzerland", "Hauptstr. 31", "3012", "CJ")); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), "Genève", "Richter Supermarkt", "Switzerland", "Starenweg 5", "1204", "CJ")); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), "Resende", "Wellington Importadora", "Brazil", "Rua do Mercado, 12", "08737-363", "SP")); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "HILARION-Abastos", "Venezuela", "Carrera 22 con Ave. Carlos Soublette #8-35", "5022", "Táchira")); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), "Graz", "Ernst Handel", "Austria", "Kirchgasse 6", "8010", "CJ")); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Centro comercial Moctezuma", "Mexico", "Sierras de Granada 9993", "05022", "CJ")); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), "Köln", "Ottilies Käseladen", "Germany", "Mehrheimerstr. 369", "50739", "CJ")); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Que Delícia", "Brazil", "Rua da Panificadora, 12", "02389-673", "RJ")); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "Rattlesnake Canyon Grocery", "USA", "2817 Milton Dr.", "87110", "NM")); + } + 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; } + public DateTime OrderDate { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + public string ShipAddress { get; set; } + public string ShipRegion { get; set; } + public string ShipPostalCode { get; set; } +} +{% endhighlight %} +{% endtabs %} + +## Freeze direction + +In the Syncfusion Blazor DataGrid, the "freeze direction" feature serves to reposition frozen columns either to the left, right, or in a fixed position, while still allowing the remaining columns to be horizontally movable. This feature is designed to optimize user experience by ensuring that critical information remains visible even during horizontal scrolling. By default, when you set the `FrozenColumns` property of the grid or the `IsFrozen` property of individual columns, it results in freezing those columns on the left side of the grid. This helps in keeping important data readily accessible as you navigate through your dataset. + +To achieve this, you can utilize the [Column.Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) property. This property is used to specify the freeze direction for individual columns. The grid will adjust the column positions based on the `Column.Freeze` value. + +The types of the `Column.Freeze` directions: + +* **Left**: When you set the `Column.Freeze` property to **Left**, specific columns will be frozen on the left side of the grid. The remaining columns will be movable. + +* **Right**: When you set the `Column.Freeze` property to **Right**, certain columns will be frozen on the right side of the grid, while the rest of the columns remain movable. + +* **Fixed**: The Fixed direction locks a column at a fixed position within the grid. This ensures that the column is always visible during horizontal scroll. + +In the following example, the **ShipCountry** column is frozen on the left side, the **CustomerID** column is frozen on the right side and the **Freight** column is frozen on the fixed of the content table. Additionally, you can modify the `Column.Freeze` property to **Left**, **Right** and **Fixed** based on the selected column by utilizing the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `DropDownList` component. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + +
    + + + + +
    +
    + +
    + + + + +
    +
    +
    + Update +
    + + + + + + + + + + + + + + +@code { + public SfGrid Grid { get; set; } + + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + + public string DropDownValue { get; set; } = "ShipCountry"; + + public string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.FreezeDirection)); + + public FreezeDirection DropDownDirection { get; set; } = Syncfusion.Blazor.Grids.FreezeDirection.Left; + + public class Columns + { + public string ID { get; set; } + public string Value { get; set; } + } + public class Direction + { + public string ID { get; set; } + public string Value { get; set; } + } + List LocalData = new List { + new Columns() { ID= "ShipCountry", Value= "ShipCountry" }, + new Columns() { ID= "OrderID", Value= "OrderID" }, + new Columns() { ID= "Freight", Value= "Freight" }, + new Columns() { ID= "CustomerID", Value= "CustomerID" }, + new Columns() { ID= "OrderDate", Value= "OrderDate" }, + new Columns() { ID= "ShipName", Value= "ShipName" }, + new Columns() { ID= "ShipAddress", Value= "ShipAddress" }, + new Columns() { ID= "ShipCity", Value= "ShipCity" }, + }; + List LocalData1 = new List + { + new Direction() { ID= "Left", Value= "Left" }, + new Direction() { ID= "Right", Value= "Right" }, + new Direction() { ID= "Fixed", Value= "Fixed" }, + + }; + public async Task ChangeColumn() + { + // Await the column object from the asynchronous method + var column = await Grid.GetColumnByFieldAsync(DropDownValue); + if (column != null) + { + column.Freeze = DropDownDirection; + column.IsFrozen = true; + await Grid.RefreshColumnsAsync(); + } + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() + { + + } + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, string ShipAddress, string shipRegion, string shipPostalCode) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipName = ShipName; + this.ShipCountry = ShipCountry; + this.ShipAddress = ShipAddress; + this.ShipRegion = shipRegion; + this.ShipPostalCode = shipPostalCode; + + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4), "Reims", "Vins et alcools Chevalier", "Australia", "59 rue de l Abbaye", "51100", "CJ")); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), "Münster", "Toms Spezialitäten", "Australia", "Luisenstr. 48", "44087", "CJ")); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ")); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), "Lyon", "Victuailles en stock", "Australia", "2, rue du Commerce","69004", "CJ")); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), "Charleroi", "Suprêmes délices", "United States", "Boulevard Tirou, 255", "B-6000", "CJ")); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ")); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), "Bern", "Chop-suey Chinese", "Switzerland", "Hauptstr. 31", "3012", "CJ")); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), "Genève", "Richter Supermarkt", "Switzerland", "Starenweg 5", "1204", "CJ")); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), "Resende", "Wellington Importadora", "Brazil", "Rua do Mercado, 12", "08737-363", "SP")); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "HILARION-Abastos", "Venezuela", "Carrera 22 con Ave. Carlos Soublette #8-35", "5022", "Táchira")); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), "Graz", "Ernst Handel", "Austria", "Kirchgasse 6", "8010", "CJ")); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Centro comercial Moctezuma", "Mexico", "Sierras de Granada 9993", "05022", "CJ")); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), "Köln", "Ottilies Käseladen", "Germany", "Mehrheimerstr. 369", "50739", "CJ")); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Que Delícia", "Brazil", "Rua da Panificadora, 12", "02389-673", "RJ")); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "Rattlesnake Canyon Grocery", "USA", "2817 Milton Dr.", "87110", "NM")); + } + 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; } + public DateTime OrderDate { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + public string ShipAddress { get; set; } + public string ShipRegion { get; set; } + public string ShipPostalCode { get; set; } +} +{% endhighlight %} +{% endtabs %} + +## Change default frozen line color + +You can customize the frozen line borders of frozen columns in the Syncfusion DataGrid component by applying custom CSS styles to the specific frozen column. This allows you to change the border color of the left frozen columns, right frozen columns, and fixed frozen columns to match your application's design and theme. + +To change default frozen line color, use the following class name and apply the border color based on your requirement. + +For left frozen columns: + +```css +.e-grid .e-leftfreeze.e-freezeleftborder { + border-right-color: rgb(198, 30, 204); +} +``` +For right frozen columns: + +```css +.e-grid .e-rightfreeze.e-freezerightborder { + border-left-color: rgb(19, 228, 243); +} +``` +For fixed frozen columns, you need to specify both left and right border as mentioned below + +```css +.e-grid .e-fixedfreeze.e-freezeleftborder{ + border-left-color: rgb(9, 209, 9); +} + +.e-grid .e-fixedfreeze.e-freezerightborder{ + border-right-color: rgb(10, 224, 10); +} +``` +The following example demonstrates how to change the default frozen line color using CSS. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + + + +@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() + { + + } + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, string ShipAddress, string shipRegion, string shipPostalCode) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipName = ShipName; + this.ShipCountry = ShipCountry; + this.ShipAddress = ShipAddress; + this.ShipRegion = shipRegion; + this.ShipPostalCode = shipPostalCode; + + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4), "Reims", "Vins et alcools Chevalier", "Australia", "59 rue de l Abbaye", "51100", "CJ")); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), "Münster", "Toms Spezialitäten", "Australia", "Luisenstr. 48", "44087", "CJ")); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ")); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), "Lyon", "Victuailles en stock", "Australia", "2, rue du Commerce","69004", "CJ")); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), "Charleroi", "Suprêmes délices", "United States", "Boulevard Tirou, 255", "B-6000", "CJ")); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ")); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), "Bern", "Chop-suey Chinese", "Switzerland", "Hauptstr. 31", "3012", "CJ")); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), "Genève", "Richter Supermarkt", "Switzerland", "Starenweg 5", "1204", "CJ")); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), "Resende", "Wellington Importadora", "Brazil", "Rua do Mercado, 12", "08737-363", "SP")); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "HILARION-Abastos", "Venezuela", "Carrera 22 con Ave. Carlos Soublette #8-35", "5022", "Táchira")); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), "Graz", "Ernst Handel", "Austria", "Kirchgasse 6", "8010", "CJ")); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Centro comercial Moctezuma", "Mexico", "Sierras de Granada 9993", "05022", "CJ")); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), "Köln", "Ottilies Käseladen", "Germany", "Mehrheimerstr. 369", "50739", "CJ")); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Que Delícia", "Brazil", "Rua da Panificadora, 12", "02389-673", "RJ")); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "Rattlesnake Canyon Grocery", "USA", "2817 Milton Dr.", "87110", "NM")); + } + 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; } + public DateTime OrderDate { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + public string ShipAddress { get; set; } + public string ShipRegion { get; set; } + public string ShipPostalCode { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhqsiDQVjBIavlN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Limitations of Frozen Columns and Freeze Direction + +The frozen columns and freeze direction features in Syncfusion Blazor DataGrid have the following limitations: + +### General Limitations for Frozen Columns + +* Row Template +* Detail Template +* Hierarchy DataGrid + +### Additional Limitations for Freeze Direction + +* Infinite scroll in cache mode is not supported. +* Freeze direction in the stacked header is incompatible with column reordering. +* Using a cell template or text wrap in any one of the panels may cause variable row heights between the panels. The height is recalculated based on the DOM offset height and applied uniformly across all rows to maintain consistency. This can lead to visual glitches. You can resolve this problem by setting static values for the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property in `SfGrid`. +* The [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) and [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) properties are incompatible and cannot be used simultaneously. + +> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data. \ No newline at end of file From 1ab8c20ffa7fa04f3ebcae898a07def724b3f4ae Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Tue, 19 Nov 2024 18:10:49 +0530 Subject: [PATCH 02/78] 922487: Documentation of column headers in hotfix --- blazor/datagrid/column-headers.md | 106 ++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index 3ccfd87e1c..9615c9b636 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. @@ -821,8 +823,112 @@ 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() + { + + } + public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, string ShipAddress, string shipRegion, string shipPostalCode, DateTime shippeddate) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.EmployeeID = EmployeeId; + this.Freight = Freight; + this.ShipCity = ShipCity; + this.OrderDate = OrderDate; + this.ShipName = ShipName; + this.ShipCountry = ShipCountry; + this.ShipAddress = ShipAddress; + this.ShipRegion = shipRegion; + this.ShipPostalCode = shipPostalCode; + 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), "Reims", "Vins et alcools Chevalier", "Australia", "59 rue de l Abbaye", "51100", "CJ", new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10249, "TOMSP", 6, 11.61, new DateTime(1996, 7, 5), "Münster", "Toms Spezialitäten", "Australia", "Luisenstr. 48", "44087", "CJ", new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ", new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8), "Lyon", "Victuailles en stock", "Australia", "2, rue du Commerce","69004", "CJ", new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9), "Charleroi", "Suprêmes délices", "United States", "Boulevard Tirou, 255", "B-6000", "CJ", new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10253, "HANAR", 3, 58.17, new DateTime(1996, 7, 10), "Rio de Janeiro", "Hanari Carnes", "United States", "Rua do Paço, 67", "05454-876", "RJ", new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11), "Bern", "Chop-suey Chinese", "Switzerland", "Hauptstr. 31", "3012", "CJ", new DateTime(1996, 7, 23))); + order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12), "Genève", "Richter Supermarkt", "Switzerland", "Starenweg 5", "1204", "CJ", new DateTime(1996, 7, 24))); + order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15), "Resende", "Wellington Importadora", "Brazil", "Rua do Mercado, 12", "08737-363", "SP", new DateTime(1996, 7, 25))); + order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16), "San Cristóbal", "HILARION-Abastos", "Venezuela", "Carrera 22 con Ave. Carlos Soublette #8-35", "5022", "Táchira", new DateTime(1996, 7, 30))); + order.Add(new OrderDetails(10258, "ERNSH", 1, 140.51, new DateTime(1996, 7, 17), "Graz", "Ernst Handel", "Austria", "Kirchgasse 6", "8010", "CJ", new DateTime(1996, 7, 29))); + order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18), "México D.F.", "Centro comercial Moctezuma", "Mexico", "Sierras de Granada 9993", "05022", "CJ", new DateTime(1996, 7, 31))); + order.Add(new OrderDetails(10260, "OTTIK", 4, 55.09, new DateTime(1996, 7, 19), "Köln", "Ottilies Käseladen", "Germany", "Mehrheimerstr. 369", "50739", "CJ", new DateTime(1996, 8, 1))); + order.Add(new OrderDetails(10261, "QUEDE", 4, 3.05, new DateTime(1996, 7, 19), "Rio de Janeiro", "Que Delícia", "Brazil", "Rua da Panificadora, 12", "02389-673", "RJ", new DateTime(1996, 8, 2))); + order.Add(new OrderDetails(10262, "RATTC", 8, 48.29, new DateTime(1996, 7, 22), "Albuquerque", "Rattlesnake Canyon Grocery", "USA", "2817 Milton Dr.", "87110", "NM", 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 string ShipCity { get; set; } + public DateTime OrderDate { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } + public string ShipAddress { get; set; } + public string ShipRegion { get; set; } + public string ShipPostalCode { 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" %} From 2f10ed9350bcff30de813524bbfdfc48c1250f73 Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Wed, 20 Nov 2024 11:55:27 +0530 Subject: [PATCH 03/78] 922487: Documentation of column headers in hotfix --- blazor/datagrid/column-headers.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/blazor/datagrid/column-headers.md b/blazor/datagrid/column-headers.md index 9615c9b636..0e9a773951 100644 --- a/blazor/datagrid/column-headers.md +++ b/blazor/datagrid/column-headers.md @@ -517,7 +517,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 } ``` @@ -526,10 +526,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** @@ -538,7 +538,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. @@ -559,12 +559,12 @@ This is demonstrated in the following sample: - + From b57fb59155bf1e61b86bcc92eefe1fc994ae999f Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Wed, 20 Nov 2024 19:14:39 +0530 Subject: [PATCH 04/78] 922487: Documentation of column template in hotfix --- blazor/datagrid/column-template.md | 163 ++++++++++++++++++++++++++++- 1 file changed, 162 insertions(+), 1 deletion(-) diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index 4a18d906d5..3441f57f95 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -115,6 +115,80 @@ 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 @@ -122,7 +196,7 @@ The column template has options to render a custom component in a DataGrid colum ### 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 +294,93 @@ 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" %} + ## 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. From 935227d54c4ba27346a47ad9100f08e89971041a Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Thu, 21 Nov 2024 18:46:59 +0530 Subject: [PATCH 05/78] 922487: Documentation of column template in hotfix --- blazor/datagrid/column-template.md | 296 ++++++++++++++++++++++++++++- 1 file changed, 291 insertions(+), 5 deletions(-) diff --git a/blazor/datagrid/column-template.md b/blazor/datagrid/column-template.md index 3441f57f95..7930c23a74 100644 --- a/blazor/datagrid/column-template.md +++ b/blazor/datagrid/column-template.md @@ -132,9 +132,9 @@ The following example demonstrates, how to render hyperlink column in the Grid u @@ -194,6 +194,106 @@ public class EmployeeDetails 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://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component in the **Order Status** column by defining the `Template` property. @@ -303,7 +403,7 @@ In the following code, we rendered the Chips component in the Grid **First Name* ``` - + ``` @@ -319,10 +419,10 @@ In the following code, we rendered the Chips component in the Grid **First Name*