diff --git a/blazor/datagrid/frozen-column.md b/blazor/datagrid/frozen-column.md
new file mode 100644
index 0000000000..bd3eea7a76
--- /dev/null
+++ b/blazor/datagrid/frozen-column.md
@@ -0,0 +1,384 @@
+---
+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(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.
+
+## 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(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/LZLzWrNLBIWVbdGA?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.
+
+## Add or remove frozen columns by dragging the column separator
+
+The Syncfusion Blazor DataGrid allows you to dynamically add or remove columns from the frozen content by dragging and dropping the column separator. This provides flexibility to customize the grid layout directly through individual interactions.
+
+To enable this feature, set the [AllowFreezeLineMoving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFreezeLineMoving) property to **true** in the Grid component.
+
+Here is an example that demonstrates how to enable and use the `AllowFreezeLineMoving` property in the Syncfusion DataGrid.
+
+{% 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(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/hZBTMhthBzKufVpW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> If frozen columns are not specified, the frozen column separator will be displayed at the left and right ends. You can dynamically change the frozen columns by dragging the column separator.
+
+> 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
diff --git a/blazor/datagrid/images/blazor-datagrid-drag-and-drop-the-column-separator.gif b/blazor/datagrid/images/blazor-datagrid-drag-and-drop-the-column-separator.gif
deleted file mode 100644
index 053c2469e6..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-drag-and-drop-the-column-separator.gif and /dev/null differ
diff --git a/blazor/datagrid/scrolling.md b/blazor/datagrid/scrolling.md
index 3615f28a2c..44c1faa205 100644
--- a/blazor/datagrid/scrolling.md
+++ b/blazor/datagrid/scrolling.md
@@ -156,358 +156,6 @@ In the following sample, the Grid headers will be sticky while scrolling the Gri
-## Frozen rows and columns
-
-Frozen rows and columns provides an option to make rows and columns always visible in the top and left side of the datagrid while scrolling.
-
-In this demo, the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) is set as '2' and the [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenRows)
-is set as '3'. Hence, the left two columns and top three rows are frozen.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List Orders { get; set; }
-
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- EmployeeID = x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)],
- ShipName = "MOS",
- ShipCity = (new string[] { "New york", "London", "Hue" })[new Random().Next(3)],
- ShipAddress = (new string[] { "55, Baker street", "65/5 Kings landing", "56, Winterfell" })[new Random().Next(3)],
- }).ToList();
- }
-
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
- public string ShipAddress { get; set; }
- }
-}
-```
-
-### Freeze particular columns
-
-To freeze particular column in the datagrid, the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) property of **GridColumn** component can be used.
-
-In this demo, the columns with the field names **OrderID** and **EmployeeID** are frozen using
-the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) property of **GridColumn**.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List Orders { get; set; }
-
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- EmployeeID = x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)],
- ShipName = "MOS",
- ShipCity = (new string[] { "New york", "London", "Hue" })[new Random().Next(3)],
- ShipAddress = (new string[] { "55, Baker street", "65/5 Kings landing", "56, Winterfell" })[new Random().Next(3)],
- }).ToList();
- }
-
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
- public string ShipAddress { get; set; }
- }
-
-}
-```
-
-N> Frozen rows and columns should not be set outside the datagrid view port.
-
-### Change default frozen line color
-
-The following demo shows how to change the default frozen line color.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List Orders { get; set; }
-
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- EmployeeID = x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)],
- ShipName = "MOS",
- ShipCity = (new string[] { "New york", "London", "Hue" })[new Random().Next(3)],
- ShipAddress = (new string[] { "55, Baker street", "65/5 Kings landing", "56, Winterfell" })[new Random().Next(3)],
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
- public string ShipAddress { get; set; }
- }
-}
-```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVJXsXSLrGWRalt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### Limitations
-
-The following features are not supported in frozen rows and columns:
-
-* Row Template
-* Detail Template
-* Hierarchy DataGrid
-
-### Freeze direction
-
-You can freeze the Grid columns on the left, right or in a fixed position by using the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) property and 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FrozenColumns) property of the grid or the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_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 [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 [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) value.
-
-Types of the [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) directions:
-
-* **`FreezeDirection.Left`**: Allows you to freeze the columns at the left side of the grid. The remaining columns will be movable.
-* **`FreezeDirection.Right`**: Allows you to freeze the columns at the right side of the grid. The remaining columns will be movable.
-* **`FreezeDirection.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 this demo, the **OrderID** column is frozen at the left side, the **ShipCountry** column is frozen at the right side and the **Location** column is frozen on the fixed of the content table.
-
-```csharp
-
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code {
-
- public List Orders { get; set; }
- public SfGrid Grid { get; set; }
-
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- EmployeeID = x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)],
- ShipName = "MOS",
- ShipCity = (new string[] { "New york", "London", "Hue" })[new Random().Next(3)],
- ShipAddress = (new string[] { "55, Baker street", "65/5 Kings landing", "56, Winterfell" })[new Random().Next(3)],
- Mail = (new string[] { "alf32@arpy.com", "anat81@jourrapide.com", "anton99@rpy.com", "blonp97@gmail.com", "bolid@mail.com" })[new Random().Next(5)],
- Location = (new string[] { "Morbi Leo", "Sed Blandit", "Congue Nisi", "Aliquet Lectus", "Viverra Mauris In" })[new Random().Next(5)]
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
- public string ShipAddress { get; set; }
- public string Mail { get; set; }
- public string Location { get; set; }
- }
-}
-
-```
-
-The following GIF represent a frozen direction.
-
-
-
-### Limitations of freeze direction
-
-This feature has the below limitations, along with the above mentioned Frozen Grid limitations.
-
-* Infinite scroll cache mode
-* Freeze direction in the stacked header is not compatible with column reordering.
-* When using cell template/text wrap in any one of the panels will result in variable row height between the panels and this height will be re-calculated based on the DOM offset height and then applied to all the rows in all the panels to make it look even. This may result in a visual glitch. You can resolve this problem by setting static values to the 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 at the same time.
-
-N> 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.
-
-## Add or remove frozen columns by dragging the column separator
-
-The [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) can be added or removed from frozen content by dragging and dropping the column separator. To enable this feature, set the `AllowFreezeLineMoving` property to true.
-
-```csharp
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code {
-
- public List Orders { get; set; }
- public SfGrid Grid { get; set; }
-
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- EmployeeID = x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)],
- ShipName = "MOS",
- ShipCity = (new string[] { "New york", "London", "Hue" })[new Random().Next(3)],
- ShipAddress = (new string[] { "55, Baker street", "65/5 Kings landing", "56, Winterfell" })[new Random().Next(3)],
- Mail = (new string[] { "alf32@arpy.com", "anat81@jourrapide.com", "anton99@rpy.com", "blonp97@gmail.com", "bolid@mail.com" })[new Random().Next(5)],
- Location = (new string[] { "Morbi Leo", "Sed Blandit", "Congue Nisi", "Aliquet Lectus", "Viverra Mauris In" })[new Random().Next(5)]
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
- public string ShipAddress { get; set; }
- public string Mail { get; set; }
- public string Location { get; set; }
- }
-}
-
-```
-
-N> If frozen columns are not specified, the frozen column separator will be displayed at the left and right ends. You can dynamically change the frozen columns by dragging the column separator.
-
-
-
## Customize grid scroll bar
The Grid component uses the native browser scroll bar to scroll through the content when the content is larger than the Grid. Refer to [this](https://css-tricks.com/almanac/properties/s/scrollbar/) to customize the appearance of the scroll bar.