From 1a657fdd056bdfc85498eb755cec1a2d9d2e2595 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Thu, 11 Dec 2025 19:53:02 +0530 Subject: [PATCH 01/10] 998591: Column Spanning --- blazor/datagrid/column-spanning.md | 154 +++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 blazor/datagrid/column-spanning.md diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md new file mode 100644 index 0000000000..a37fb33f49 --- /dev/null +++ b/blazor/datagrid/column-spanning.md @@ -0,0 +1,154 @@ +--- +layout: post +title: Column Spanning in Blazor DataGrid Component | Syncfusion +description: Learn how to use the column spanning in Syncfusion Blazor DataGrid. +platform: Blazor +control: DataGrid +documentation: ug +--- + +# Column Spanning in Blazor DataGrid + +The Syncfusion Blazor DataGrid introduces automatic column spanning, a feature that merges adjacent cells with identical values vertically within the same column. This enhancement improves readability by consolidating duplicate values into a single unified cell, resulting in a cleaner and more organized presentation. + +Column spanning is controlled through the AutoSpanMode enumeration, which provides flexible options for enabling or disabling spanning behavior at both the grid and column levels. + + +## Enabling Column Spanning + +To enable vertical merging of cells, set the AutoSpan property of the SfGrid component to AutoSpanMode.Column. This instructs the grid to automatically merge stacked cells that share identical values within the same column. + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = new List() + { + new Order { OrderID = 10001, CustomerID = "ALFKI", Freight = 32.38 }, + new Order { OrderID = 10002, CustomerID = "ALFKI", Freight = 32.38 }, + new Order { OrderID = 10003, CustomerID = "ALFKI", Freight = 32.38 }, + new Order { OrderID = 10004, CustomerID = "ANATR", Freight = 11.61 }, + new Order { OrderID = 10005, CustomerID = "ANATR", Freight = 11.61 }, + new Order { OrderID = 10006, CustomerID = "ANATR", Freight = 11.61 }, + new Order { OrderID = 10007, CustomerID = "BERGS", Freight = 45.12 }, + new Order { OrderID = 10008, CustomerID = "BERGS", Freight = 45.12 }, + new Order { OrderID = 10009, CustomerID = "BERGS", Freight = 45.12 }, + new Order { OrderID = 10010, CustomerID = "BLAUS", Freight = 18.77 }, + new Order { OrderID = 10011, CustomerID = "BLAUS", Freight = 18.77 }, + new Order { OrderID = 10012, CustomerID = "BLAUS", Freight = 18.77 }, + new Order { OrderID = 10013, CustomerID = "BONAP", Freight = 67.23 }, + new Order { OrderID = 10014, CustomerID = "BONAP", Freight = 67.23 }, + new Order { OrderID = 10015, CustomerID = "BONAP", Freight = 67.23 }, + new Order { OrderID = 10016, CustomerID = "CACTU", Freight = 22.45 }, + new Order { OrderID = 10017, CustomerID = "CACTU", Freight = 22.45 }, + new Order { OrderID = 10018, CustomerID = "CACTU", Freight = 22.45 }, + new Order { OrderID = 10019, CustomerID = "FRANK", Freight = 39.99 }, + new Order { OrderID = 10020, CustomerID = "FRANK", Freight = 39.99 }, + new Order { OrderID = 10021, CustomerID = "FRANK", Freight = 39.99 }, + new Order { OrderID = 10022, CustomerID = "HUNGO", Freight = 55.50 }, + new Order { OrderID = 10023, CustomerID = "HUNGO", Freight = 55.50 }, + new Order { OrderID = 10024, CustomerID = "HUNGO", Freight = 55.50 }, + new Order { OrderID = 10025, CustomerID = "LILAS", Freight = 27.80 }, + new Order { OrderID = 10026, CustomerID = "LILAS", Freight = 27.80 }, + new Order { OrderID = 10027, CustomerID = "LILAS", Freight = 27.80 }, + new Order { OrderID = 10028, CustomerID = "SEVES", Freight = 14.65 }, + new Order { OrderID = 10029, CustomerID = "SEVES", Freight = 14.65 }, + new Order { OrderID = 10030, CustomerID = "SEVES", Freight = 14.65 } + }; + } + + public class Order + { + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + + +## Disable column spanning for specific column + +Column spanning can also be disabled at the column level by setting the AutoSpan property of the GridColumn component to AutoSpanMode.None. This allows fine-grained control when spanning is required globally but should be excluded for specific columns. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + + +@using Syncfusion.Blazor.Grids + + + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = new List() + { + new Order { OrderID = 10001, CustomerID = "ALFKI", Freight = 32.38 }, + new Order { OrderID = 10002, CustomerID = "ALFKI", Freight = 32.38 }, + new Order { OrderID = 10003, CustomerID = "ALFKI", Freight = 32.38 }, + new Order { OrderID = 10004, CustomerID = "ANATR", Freight = 11.61 }, + new Order { OrderID = 10005, CustomerID = "ANATR", Freight = 11.61 }, + new Order { OrderID = 10006, CustomerID = "ANATR", Freight = 11.61 }, + new Order { OrderID = 10007, CustomerID = "BERGS", Freight = 45.12 }, + new Order { OrderID = 10008, CustomerID = "BERGS", Freight = 45.12 }, + new Order { OrderID = 10009, CustomerID = "BERGS", Freight = 45.12 }, + new Order { OrderID = 10010, CustomerID = "BLAUS", Freight = 18.77 }, + new Order { OrderID = 10011, CustomerID = "BLAUS", Freight = 18.77 }, + new Order { OrderID = 10012, CustomerID = "BLAUS", Freight = 18.77 }, + new Order { OrderID = 10013, CustomerID = "BONAP", Freight = 67.23 }, + new Order { OrderID = 10014, CustomerID = "BONAP", Freight = 67.23 }, + new Order { OrderID = 10015, CustomerID = "BONAP", Freight = 67.23 }, + new Order { OrderID = 10016, CustomerID = "CACTU", Freight = 22.45 }, + new Order { OrderID = 10017, CustomerID = "CACTU", Freight = 22.45 }, + new Order { OrderID = 10018, CustomerID = "CACTU", Freight = 22.45 }, + new Order { OrderID = 10019, CustomerID = "FRANK", Freight = 39.99 }, + new Order { OrderID = 10020, CustomerID = "FRANK", Freight = 39.99 }, + new Order { OrderID = 10021, CustomerID = "FRANK", Freight = 39.99 }, + new Order { OrderID = 10022, CustomerID = "HUNGO", Freight = 55.50 }, + new Order { OrderID = 10023, CustomerID = "HUNGO", Freight = 55.50 }, + new Order { OrderID = 10024, CustomerID = "HUNGO", Freight = 55.50 }, + new Order { OrderID = 10025, CustomerID = "LILAS", Freight = 27.80 }, + new Order { OrderID = 10026, CustomerID = "LILAS", Freight = 27.80 }, + new Order { OrderID = 10027, CustomerID = "LILAS", Freight = 27.80 }, + new Order { OrderID = 10028, CustomerID = "SEVES", Freight = 14.65 }, + new Order { OrderID = 10029, CustomerID = "SEVES", Freight = 14.65 }, + new Order { OrderID = 10030, CustomerID = "SEVES", Freight = 14.65 } + }; + } + + public class Order + { + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} \ No newline at end of file From ed4446301c78cdbc0426d841e88b36a692af7eaf Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Fri, 12 Dec 2025 17:58:25 +0530 Subject: [PATCH 02/10] 998591: UG Documentation for Spanning Feature --- blazor-toc.html | 2 + blazor/datagrid/column-spanning.md | 635 +++++++++++++++++-- blazor/datagrid/row-spanning.md | 971 +++++++++++++++++++++++++++++ 3 files changed, 1570 insertions(+), 38 deletions(-) create mode 100644 blazor/datagrid/row-spanning.md diff --git a/blazor-toc.html b/blazor-toc.html index 1ebd08f82a..bd568ebb63 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2073,6 +2073,7 @@
  • Column Pinning (Frozen)
  • Column Chooser
  • Column Menu
    • +
  • Column Spanning
  • @@ -2081,6 +2082,7 @@
  • Row Template
  • Detail Template
  • Row Drag and Drop
    • +
  • Row Spanning
  • diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md index a37fb33f49..b77d4d5384 100644 --- a/blazor/datagrid/column-spanning.md +++ b/blazor/datagrid/column-spanning.md @@ -9,15 +9,26 @@ documentation: ug # Column Spanning in Blazor DataGrid -The Syncfusion Blazor DataGrid introduces automatic column spanning, a feature that merges adjacent cells with identical values vertically within the same column. This enhancement improves readability by consolidating duplicate values into a single unified cell, resulting in a cleaner and more organized presentation. +Column spanning in the Syncfusion Blazor DataGrid enables automatic vertical merging of adjacent cells within the same column when they contain identical values. This feature improves data readability by consolidating repeated values into a single, taller cell—ideal for grouped records or hierarchical data where the same value appears across consecutive rows. -Column spanning is controlled through the AutoSpanMode enumeration, which provides flexible options for enabling or disabling spanning behavior at both the grid and column levels. +You can enable this behavior by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Column`. Once applied, the grid automatically scans each column and merges stacked cells that share the same value, reducing visual redundancy and presenting a cleaner, more structured layout. The merging logic is fully declarative and requires no additional code or preprocessing. +Column spanning is part of the `AutoSpanMode` enumeration, which also includes `None`, `Row`, and `HorizontalAndVertical` options. These modes allow developers to control whether merging occurs vertically, horizontally, or in both directions—offering flexible layout customization to suit a wide range of data presentation needs. -## Enabling Column Spanning -To enable vertical merging of cells, set the AutoSpan property of the SfGrid component to AutoSpanMode.Column. This instructs the grid to automatically merge stacked cells that share identical values within the same column. +## AutoSpanMode Enumeration + +| Enum Value | Description | +|---------|-----| +| AutoSpanMode.None | Disables automatic cell spanning. Every cell remains isolated. (Default Mode) | +| AutoSpanMode.Row | Enables horizontal merging across columns within the same row. | +| AutoSpanMode.Column | Enables vertical merging of adjacent cells with identical values in the same column. | +| AutoSpanMode.HorizontalAndVertical | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. | + +## Enabling Column Spanning + +To enable vertical merging of cells, set the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Column`. This instructs the grid to automatically merge stacked cells that share identical values within the same column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -88,57 +99,456 @@ To enable vertical merging of cells, set the AutoSpan property of the SfGrid com Column spanning can also be disabled at the column level by setting the AutoSpan property of the GridColumn component to AutoSpanMode.None. This allows fine-grained control when spanning is required globally but should be excluded for specific columns. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + private bool enableFrozen { get; set; } = true; + public List? EmployeeTimeSheet { get; set; } + + protected override void OnInitialized() + { + EmployeeTimeSheet = EmployeeDetails.GetAllRecords(); + } + +} + +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} + +public class EmployeeDetails +{ + public EmployeeDetails() + { + } + public EmployeeDetails(int employeeid, string employeename, string time_9_00, string time_9_30, string time_10_00, string time_10_30, string time_11_00, string time_11_30, + string time_12_00, string time_12_30, string time_1_00, string time_1_30, string time_2_00, string time_2_30, string time_3_00, string time_3_30, string time_4_00, string time_4_30, + string time_5_00) + { + this.EmployeeID = employeeid; + this.EmployeeName = employeename; + this.Time_9_00 = time_9_00; + this.Time_9_00 = time_9_30; + this.Time_10_00 = time_10_00; + this.Time_10_30 = time_10_30; + this.Time_11_00 = time_11_00; + this.Time_11_30 = time_11_30; + this.Time_12_00 = time_12_00; + this.Time_12_30 = time_12_30; + this.Time_1_00 = time_1_00; + this.Time_1_30 = time_1_30; + this.Time_2_00 = time_2_00; + this.Time_2_30 = time_2_30; + this.Time_3_00 = time_3_00; + this.Time_3_30 = time_3_30; + this.Time_4_00 = time_4_00; + this.Time_4_30 = time_4_30; + this.Time_5_00 = time_5_00; + } + public int EmployeeID { get; set; } + public string? EmployeeName { get; set; } + public string? Time_9_00 { get; set; } + public string? Time_9_30 { get; set; } + public string? Time_10_00 { get; set; } + public string? Time_10_30 { get; set; } + public string? Time_11_00 { get; set; } + public string? Time_11_30 { get; set; } + public string? Time_12_00 { get; set; } + public string? Time_12_30 { get; set; } + public string? Time_1_00 { get; set; } + public string? Time_1_30 { get; set; } + public string? Time_2_00 { get; set; } + public string? Time_2_30 { get; set; } + public string? Time_3_00 { get; set; } + public string? Time_3_30 { get; set; } + public string? Time_4_00 { get; set; } + public string? Time_4_30 { get; set; } + public string? Time_5_00 { get; set; } + public static List GetAllRecords() + { + List data = new List(); + data.Add(new EmployeeDetails + { + EmployeeID = 10001, + EmployeeName = "Nancy Davolio", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Team Meeting", + Time_10_30 = "Testing", + Time_11_00 = "Development", + Time_11_30 = "Code Review", + Time_12_00 = "Development", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Development", + Time_4_00 = "Conference", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10002, + EmployeeName = "Steven Buchanan", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Support", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Code Review", + Time_3_00 = "Development", + Time_3_30 = "Documentation", + Time_4_00 = "Documentation", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10003, + EmployeeName = "Andrew Fuller", + Time_9_00 = "Documentation", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10004, + EmployeeName = "Janet Leverling", + Time_9_00 = "Testing", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Documentation", + Time_4_00 = "Conference", + Time_4_30 = "Conference", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10005, + EmployeeName = "Margaret Parker", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Task Assign", + Time_11_00 = "Documentation", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Testing", + Time_5_00 = "Testing" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10006, + EmployeeName = "Janet King", + Time_9_00 = "Testing", + Time_9_30 = "Testing", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Support", + Time_11_30 = "Team Meeting", + Time_12_00 = "Team Meeting", + Time_12_30 = "Team Meeting", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10007, + EmployeeName = "Michael Suyama", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Testing", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Support", + Time_3_00 = "Build", + Time_3_30 = "Build", + Time_4_00 = "Documentation", + Time_4_30 = "Documentation", + Time_5_00 = "Documentation" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10008, + EmployeeName = "Robert King", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Development", + Time_12_00 = "Testing", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Team Meeting", + Time_5_00 = "Build" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10009, + EmployeeName = "Andrew Callahan", + Time_9_00 = "Documentation", + Time_9_30 = "Team Meeting", + Time_10_00 = "Team Meeting", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Development", + Time_12_00 = "Development", + Time_12_30 = "Development", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10010, + EmployeeName = "Michael Dodsworth", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Testing", + Time_12_00 = "Build", + Time_12_30 = "Task Assign", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Testing", + Time_4_00 = "Build", + Time_4_30 = "Build", + Time_5_00 = "Testing" + }); + return data; + } +} + +{% endhighlight %} +{% endtabs %} + +The effective spanning behavior for a column is determined by the intersection of grid-level and column-level `AutoSpan` modes. The column can only narrow what the grid allows; it cannot enable a span direction that the grid disables. + +### Complete Combination Matrix + +| Grid AutoSpan | Column AutoSpan | Effective Behavior | +|---|---|---| +| None | None | No spanning. Both grid and column explicitly disable spanning. | +| None | Row | No spanning. Grid-level None overrides column-level Row. | +| None | Column | No spanning. Grid-level None overrides column-level Column. | +| None | HorizontalAndVertical | No spanning. Grid-level None overrides all spanning modes. | +| Row | None | No spanning. Column explicitly disables spanning. | +| Row | Row | Row spanning only. Both grid and column enable row spanning. | +| Row | Column | No spanning. Grid only allows row spanning; column cannot enable column spanning. | +| Row | HorizontalAndVertical | Row spanning only. Grid only allows row spanning. | +| Column | None | No spanning. Column explicitly disables spanning. | +| Column | Row | No spanning. Grid only allows column spanning; column cannot enable row spanning. | +| Column | Column | Column spanning only. Both grid and column enable column spanning. | +| Column | HorizontalAndVertical | Column spanning only. Grid only allows column spanning. | +| HorizontalAndVertical | None | No spanning. Column explicitly disables both directions. | +| HorizontalAndVertical | Row | Row spanning only. Grid allows both; column narrows to Row. | +| HorizontalAndVertical | Column | Column spanning only. Grid allows both; column narrows to Column. | +| HorizontalAndVertical | HorizontalAndVertical | Row and Column spanning. Both grid and column enable both directions. | + +--- + +## Applying Column Spanning via programmatically + +In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support to manually merge cells when custom layout behavior is required. This is achieved using the `MergeCellsAsync` method, which allows developers to define rectangular regions of cells to be merged programmatically. + +The method supports two overloads: + +- `MergeCellsAsync(MergeCellInfo info)` – Merges a single cell region as defined by the provided MergeCellInfo instance. +- `MergeCellsAsync(IEnumerable infos)` – Performs batch merging of multiple cell regions, each specified by a MergeCellInfo object. + +To define a merged region, use the following properties of the MergeCellInfo class, + +| Property | Type | Description | +|--------------|------|-----------------------------------------------------------------------------| +| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | +| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | +| RowSpan | int | The number of rows to span, starting from the anchor cell. By default set to 1. | +| ColumnSpan | int | The number of columns to span, starting from the anchor cell. By default set to 1. | + +The following examples demonstrate how to use both overloads of MergeCellsAsync to perform row spanning manually. + + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons - +Merge Cell +Merge Multiple Cells + + - + -@code { +@code +{ + private SfGrid Grid; public List Orders { get; set; } + public async Task MergeCellsAsync() + { + await Grid.MergeCellsAsync(new MergeCellInfo + { + RowIndex = 1, + ColumnIndex = 1, + ColumnSpan = 2, + }); + } + + public async Task MergeMultipleCellsAsync() + { + await Grid.MergeCellsAsync(new[] + { + new MergeCellInfo { RowIndex = 0, ColumnIndex = 0, ColumnSpan = 2 }, + new MergeCellInfo { RowIndex = 5, ColumnIndex = 0, ColumnSpan = 3 }, + new MergeCellInfo { RowIndex = 7, ColumnIndex = 0, ColumnSpan = 2 } + }); + } + protected override void OnInitialized() { Orders = new List() { - new Order { OrderID = 10001, CustomerID = "ALFKI", Freight = 32.38 }, - new Order { OrderID = 10002, CustomerID = "ALFKI", Freight = 32.38 }, - new Order { OrderID = 10003, CustomerID = "ALFKI", Freight = 32.38 }, - new Order { OrderID = 10004, CustomerID = "ANATR", Freight = 11.61 }, - new Order { OrderID = 10005, CustomerID = "ANATR", Freight = 11.61 }, - new Order { OrderID = 10006, CustomerID = "ANATR", Freight = 11.61 }, - new Order { OrderID = 10007, CustomerID = "BERGS", Freight = 45.12 }, - new Order { OrderID = 10008, CustomerID = "BERGS", Freight = 45.12 }, - new Order { OrderID = 10009, CustomerID = "BERGS", Freight = 45.12 }, - new Order { OrderID = 10010, CustomerID = "BLAUS", Freight = 18.77 }, - new Order { OrderID = 10011, CustomerID = "BLAUS", Freight = 18.77 }, - new Order { OrderID = 10012, CustomerID = "BLAUS", Freight = 18.77 }, - new Order { OrderID = 10013, CustomerID = "BONAP", Freight = 67.23 }, - new Order { OrderID = 10014, CustomerID = "BONAP", Freight = 67.23 }, - new Order { OrderID = 10015, CustomerID = "BONAP", Freight = 67.23 }, - new Order { OrderID = 10016, CustomerID = "CACTU", Freight = 22.45 }, - new Order { OrderID = 10017, CustomerID = "CACTU", Freight = 22.45 }, - new Order { OrderID = 10018, CustomerID = "CACTU", Freight = 22.45 }, - new Order { OrderID = 10019, CustomerID = "FRANK", Freight = 39.99 }, - new Order { OrderID = 10020, CustomerID = "FRANK", Freight = 39.99 }, - new Order { OrderID = 10021, CustomerID = "FRANK", Freight = 39.99 }, - new Order { OrderID = 10022, CustomerID = "HUNGO", Freight = 55.50 }, - new Order { OrderID = 10023, CustomerID = "HUNGO", Freight = 55.50 }, - new Order { OrderID = 10024, CustomerID = "HUNGO", Freight = 55.50 }, - new Order { OrderID = 10025, CustomerID = "LILAS", Freight = 27.80 }, - new Order { OrderID = 10026, CustomerID = "LILAS", Freight = 27.80 }, - new Order { OrderID = 10027, CustomerID = "LILAS", Freight = 27.80 }, - new Order { OrderID = 10028, CustomerID = "SEVES", Freight = 14.65 }, - new Order { OrderID = 10029, CustomerID = "SEVES", Freight = 14.65 }, - new Order { OrderID = 10030, CustomerID = "SEVES", Freight = 14.65 } + new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, + new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, + new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, + new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, + new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, + new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, + new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, + new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, + new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, + new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, + new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, + new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, + new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, + new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, + new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, + new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, + new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, + new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, + new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, + new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, + new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, + new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, + new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, + new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, + new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, + new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, + new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, + new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, + new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, + new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } }; } @@ -148,7 +558,156 @@ Column spanning can also be disabled at the column level by setting the AutoSpan public string CustomerID { get; set; } public double Freight { get; set; } } + } {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +## Clearing Spanning via progammatically + +The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when you need to restore individual cells. This is achieved using the `UnmergeCellsAsync` methods, which allow developers to unmerge specific areas. To reset all merges in the current view, the `UnmergeAllAsync` method can be used. + +The method supports two overloads: + +- `UnmergeCellsAsync(UnmergeCellInfo info)` – Removes a single merged area identified by its anchor cell (top‑left of the merged region). +- `UnmergeCellsAsync(IEnumerable infos)` – Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. +- `UnmergeAllAsync()` – Removes all merged regions in the current view, restoring every cell to its original state. + +To identify a merged region, use the following properties of the UnmergeCellInfo class: + +| Property | Type | Description | +|--------------|------|-----------------------------------------------------------------------------| +| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | +| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | + +The following examples demonstrate how to use both overloads of `UnmergeCellsAsync` and `UnmergeAllAsync` to unmerge row spanning manually. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Merge Cell +UnMerge Cell + +Merge Multiple Cells +UnMerge Multiple Cells + +UnMerge All Cells + + + + + + + + + +@code +{ + private SfGrid Grid; + public List Orders { get; set; } + + public async Task MergeCellsAsync() + { + await Grid.MergeCellsAsync(new MergeCellInfo + { + RowIndex = 1, + ColumnIndex = 1, + ColumnSpan = 2, + }); + } + + public async Task UnMergeCell() + { + await Grid.UnmergeCellsAsync(new UnmergeCellInfo + { + RowIndex = 1, + ColumnIndex = 1, + }); + } + + public async Task MergeMultipleCellsAsync() + { + await Grid.MergeCellsAsync(new[] + { + new MergeCellInfo { RowIndex = 0, ColumnIndex = 0, ColumnSpan = 2 }, + new MergeCellInfo { RowIndex = 5, ColumnIndex = 0, ColumnSpan = 3 }, + new MergeCellInfo { RowIndex = 7, ColumnIndex = 0, ColumnSpan = 2 } + }); + } + + public async Task UnMergeCells() + { + await Grid.UnmergeCellsAsync(new[] + { + new UnmergeCellInfo { RowIndex = 0, ColumnIndex = 0 }, + new UnmergeCellInfo { RowIndex = 5, ColumnIndex = 0 }, + new UnmergeCellInfo { RowIndex = 7, ColumnIndex = 0 } + }); + } + + public async Task UnMergeAllCells() + { + await Grid.UnmergeAllAsync(); + } + + protected override void OnInitialized() + { + Orders = new List() + { + new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, + new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, + new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, + new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, + new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, + new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, + new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, + new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, + new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, + new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, + new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, + new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, + new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, + new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, + new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, + new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, + new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, + new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, + new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, + new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, + new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, + new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, + new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, + new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, + new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, + new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, + new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, + new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, + new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, + new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } + }; + } + + public class Order + { + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +## Limitations + +- The Column spanning is not compatible with the following features: + +1. AutoFill +2. Hierarchy-Grid. +3. Detail-Template. +4. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. + diff --git a/blazor/datagrid/row-spanning.md b/blazor/datagrid/row-spanning.md new file mode 100644 index 0000000000..cfac3e3277 --- /dev/null +++ b/blazor/datagrid/row-spanning.md @@ -0,0 +1,971 @@ +--- +layout: post +title: Row Spanning in Blazor DataGrid Component | Syncfusion +description: Learn how to use the column spanning in Syncfusion Blazor DataGrid. +platform: Blazor +control: DataGrid +documentation: ug +--- + + +# Row Spanning in Blazor DataGrid + +Row spanning is a feature in the Syncfusion Blazor DataGrid that automatically merges adjacent cells with identical values horizontally across columns within the same row. This helps reduce visual repetition and presents grouped data in a more compact and readable format—ideal for scenarios where multiple columns in a row share the same value, such as repeated product details or status indicators. + +This functionality is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Row`. Once activated, the grid intelligently evaluates each row and merges neighboring cells that contain the same value, creating a single, wider cell. The merging process is fully automatic and declarative, requiring no manual logic or data transformation. + +Row spanning is part of the broader `AutoSpanMode` enumeration, which also includes `None`, `Column`, and `HorizontalAndVertical` options. These modes allow developers to control whether merging occurs horizontally, vertically, or in both directions, offering flexible layout customization for enhanced data presentation + + +## AutoSpanMode Enumeration + +| Enum Value | Description | +|---------|-----| +| AutoSpanMode.None | Disables automatic cell spanning. Every cell remains isolated. (Default Mode) | +| AutoSpanMode.Row | Enables horizontal merging across columns within the same row. | +| AutoSpanMode.Column | Enables vertical merging of adjacent cells with identical values in the same column. | +| AutoSpanMode.HorizontalAndVertical | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. | + + +## Enabling Row Spanning + +To enable horizontal cell merging, set the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Row`. This mode merges adjacent cells across columns within the same row when they share the same value. + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + private bool enableFrozen { get; set; } = true; + public List? EmployeeTimeSheet { get; set; } + + protected override void OnInitialized() + { + EmployeeTimeSheet = EmployeeDetails.GetAllRecords(); + } + +} + +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} + +public class EmployeeDetails +{ + public EmployeeDetails() + { + } + public EmployeeDetails(int employeeid, string employeename, string time_9_00, string time_9_30, string time_10_00, string time_10_30, string time_11_00, string time_11_30, + string time_12_00, string time_12_30, string time_1_00, string time_1_30, string time_2_00, string time_2_30, string time_3_00, string time_3_30, string time_4_00, string time_4_30, + string time_5_00) + { + this.EmployeeID = employeeid; + this.EmployeeName = employeename; + this.Time_9_00 = time_9_00; + this.Time_9_00 = time_9_30; + this.Time_10_00 = time_10_00; + this.Time_10_30 = time_10_30; + this.Time_11_00 = time_11_00; + this.Time_11_30 = time_11_30; + this.Time_12_00 = time_12_00; + this.Time_12_30 = time_12_30; + this.Time_1_00 = time_1_00; + this.Time_1_30 = time_1_30; + this.Time_2_00 = time_2_00; + this.Time_2_30 = time_2_30; + this.Time_3_00 = time_3_00; + this.Time_3_30 = time_3_30; + this.Time_4_00 = time_4_00; + this.Time_4_30 = time_4_30; + this.Time_5_00 = time_5_00; + } + public int EmployeeID { get; set; } + public string? EmployeeName { get; set; } + public string? Time_9_00 { get; set; } + public string? Time_9_30 { get; set; } + public string? Time_10_00 { get; set; } + public string? Time_10_30 { get; set; } + public string? Time_11_00 { get; set; } + public string? Time_11_30 { get; set; } + public string? Time_12_00 { get; set; } + public string? Time_12_30 { get; set; } + public string? Time_1_00 { get; set; } + public string? Time_1_30 { get; set; } + public string? Time_2_00 { get; set; } + public string? Time_2_30 { get; set; } + public string? Time_3_00 { get; set; } + public string? Time_3_30 { get; set; } + public string? Time_4_00 { get; set; } + public string? Time_4_30 { get; set; } + public string? Time_5_00 { get; set; } + public static List GetAllRecords() + { + List data = new List(); + data.Add(new EmployeeDetails + { + EmployeeID = 10001, + EmployeeName = "Nancy Davolio", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Team Meeting", + Time_10_30 = "Testing", + Time_11_00 = "Development", + Time_11_30 = "Code Review", + Time_12_00 = "Development", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Development", + Time_4_00 = "Conference", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10002, + EmployeeName = "Steven Buchanan", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Support", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Code Review", + Time_3_00 = "Development", + Time_3_30 = "Documentation", + Time_4_00 = "Documentation", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10003, + EmployeeName = "Andrew Fuller", + Time_9_00 = "Documentation", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10004, + EmployeeName = "Janet Leverling", + Time_9_00 = "Testing", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Documentation", + Time_4_00 = "Conference", + Time_4_30 = "Conference", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10005, + EmployeeName = "Margaret Parker", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Task Assign", + Time_11_00 = "Documentation", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Testing", + Time_5_00 = "Testing" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10006, + EmployeeName = "Janet King", + Time_9_00 = "Testing", + Time_9_30 = "Testing", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Support", + Time_11_30 = "Team Meeting", + Time_12_00 = "Team Meeting", + Time_12_30 = "Team Meeting", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10007, + EmployeeName = "Michael Suyama", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Testing", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Support", + Time_3_00 = "Build", + Time_3_30 = "Build", + Time_4_00 = "Documentation", + Time_4_30 = "Documentation", + Time_5_00 = "Documentation" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10008, + EmployeeName = "Robert King", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Development", + Time_12_00 = "Testing", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Team Meeting", + Time_5_00 = "Build" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10009, + EmployeeName = "Andrew Callahan", + Time_9_00 = "Documentation", + Time_9_30 = "Team Meeting", + Time_10_00 = "Team Meeting", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Development", + Time_12_00 = "Development", + Time_12_30 = "Development", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10010, + EmployeeName = "Michael Dodsworth", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Testing", + Time_12_00 = "Build", + Time_12_30 = "Task Assign", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Testing", + Time_4_00 = "Build", + Time_4_30 = "Build", + Time_5_00 = "Testing" + }); + return data; + } +} + +{% endhighlight %} +{% endtabs %} + + +## Disable spanning for specific column + +Spanning can also be disabled at the column level by setting the `AutoSpan` property of the `GridColumn` component to `AutoSpanMode.None`. This allows fine-grained control when spanning is required globally but should be excluded for specific columns. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + private bool enableFrozen { get; set; } = true; + public List? EmployeeTimeSheet { get; set; } + + protected override void OnInitialized() + { + EmployeeTimeSheet = EmployeeDetails.GetAllRecords(); + } + +} + +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} + +public class EmployeeDetails +{ + public EmployeeDetails() + { + } + public EmployeeDetails(int employeeid, string employeename, string time_9_00, string time_9_30, string time_10_00, string time_10_30, string time_11_00, string time_11_30, + string time_12_00, string time_12_30, string time_1_00, string time_1_30, string time_2_00, string time_2_30, string time_3_00, string time_3_30, string time_4_00, string time_4_30, + string time_5_00) + { + this.EmployeeID = employeeid; + this.EmployeeName = employeename; + this.Time_9_00 = time_9_00; + this.Time_9_00 = time_9_30; + this.Time_10_00 = time_10_00; + this.Time_10_30 = time_10_30; + this.Time_11_00 = time_11_00; + this.Time_11_30 = time_11_30; + this.Time_12_00 = time_12_00; + this.Time_12_30 = time_12_30; + this.Time_1_00 = time_1_00; + this.Time_1_30 = time_1_30; + this.Time_2_00 = time_2_00; + this.Time_2_30 = time_2_30; + this.Time_3_00 = time_3_00; + this.Time_3_30 = time_3_30; + this.Time_4_00 = time_4_00; + this.Time_4_30 = time_4_30; + this.Time_5_00 = time_5_00; + } + public int EmployeeID { get; set; } + public string? EmployeeName { get; set; } + public string? Time_9_00 { get; set; } + public string? Time_9_30 { get; set; } + public string? Time_10_00 { get; set; } + public string? Time_10_30 { get; set; } + public string? Time_11_00 { get; set; } + public string? Time_11_30 { get; set; } + public string? Time_12_00 { get; set; } + public string? Time_12_30 { get; set; } + public string? Time_1_00 { get; set; } + public string? Time_1_30 { get; set; } + public string? Time_2_00 { get; set; } + public string? Time_2_30 { get; set; } + public string? Time_3_00 { get; set; } + public string? Time_3_30 { get; set; } + public string? Time_4_00 { get; set; } + public string? Time_4_30 { get; set; } + public string? Time_5_00 { get; set; } + public static List GetAllRecords() + { + List data = new List(); + data.Add(new EmployeeDetails + { + EmployeeID = 10001, + EmployeeName = "Nancy Davolio", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Team Meeting", + Time_10_30 = "Testing", + Time_11_00 = "Development", + Time_11_30 = "Code Review", + Time_12_00 = "Development", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Development", + Time_4_00 = "Conference", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10002, + EmployeeName = "Steven Buchanan", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Support", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Code Review", + Time_3_00 = "Development", + Time_3_30 = "Documentation", + Time_4_00 = "Documentation", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10003, + EmployeeName = "Andrew Fuller", + Time_9_00 = "Documentation", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10004, + EmployeeName = "Janet Leverling", + Time_9_00 = "Testing", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Documentation", + Time_4_00 = "Conference", + Time_4_30 = "Conference", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10005, + EmployeeName = "Margaret Parker", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Task Assign", + Time_11_00 = "Documentation", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Testing", + Time_5_00 = "Testing" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10006, + EmployeeName = "Janet King", + Time_9_00 = "Testing", + Time_9_30 = "Testing", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Support", + Time_11_30 = "Team Meeting", + Time_12_00 = "Team Meeting", + Time_12_30 = "Team Meeting", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10007, + EmployeeName = "Michael Suyama", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Testing", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Support", + Time_3_00 = "Build", + Time_3_30 = "Build", + Time_4_00 = "Documentation", + Time_4_30 = "Documentation", + Time_5_00 = "Documentation" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10008, + EmployeeName = "Robert King", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Development", + Time_12_00 = "Testing", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Team Meeting", + Time_5_00 = "Build" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10009, + EmployeeName = "Andrew Callahan", + Time_9_00 = "Documentation", + Time_9_30 = "Team Meeting", + Time_10_00 = "Team Meeting", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Development", + Time_12_00 = "Development", + Time_12_30 = "Development", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10010, + EmployeeName = "Michael Dodsworth", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Testing", + Time_12_00 = "Build", + Time_12_30 = "Task Assign", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Testing", + Time_4_00 = "Build", + Time_4_30 = "Build", + Time_5_00 = "Testing" + }); + return data; + } +} + +{% endhighlight %} +{% endtabs %} + +The effective spanning behavior for a column is determined by the intersection of grid-level and column-level `AutoSpan` modes. The column can only narrow what the grid allows; it cannot enable a span direction that the grid disables. + +### Complete Combination Matrix + +| Grid AutoSpan | Column AutoSpan | Effective Behavior | +|---|---|---| +| None | None | No spanning. Both grid and column explicitly disable spanning. | +| None | Row | No spanning. Grid-level None overrides column-level Row. | +| None | Column | No spanning. Grid-level None overrides column-level Column. | +| None | HorizontalAndVertical | No spanning. Grid-level None overrides all spanning modes. | +| Row | None | No spanning. Column explicitly disables spanning. | +| Row | Row | Row spanning only. Both grid and column enable row spanning. | +| Row | Column | No spanning. Grid only allows row spanning; column cannot enable column spanning. | +| Row | HorizontalAndVertical | Row spanning only. Grid only allows row spanning. | +| Column | None | No spanning. Column explicitly disables spanning. | +| Column | Row | No spanning. Grid only allows column spanning; column cannot enable row spanning. | +| Column | Column | Column spanning only. Both grid and column enable column spanning. | +| Column | HorizontalAndVertical | Column spanning only. Grid only allows column spanning. | +| HorizontalAndVertical | None | No spanning. Column explicitly disables both directions. | +| HorizontalAndVertical | Row | Row spanning only. Grid allows both; column narrows to Row. | +| HorizontalAndVertical | Column | Column spanning only. Grid allows both; column narrows to Column. | +| HorizontalAndVertical | HorizontalAndVertical | Row and Column spanning. Both grid and column enable both directions. | + +--- + +## Applying Row Spanning via programmatically + +In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support to manually merge cells when custom layout behavior is required. This is achieved using the `MergeCellsAsync` method, which allows developers to define rectangular regions of cells to be merged programmatically. + +The method supports two overloads: + +- `MergeCellsAsync(MergeCellInfo info)` – Merges a single cell region as defined by the provided MergeCellInfo instance. +- `MergeCellsAsync(IEnumerable infos)` – Performs batch merging of multiple cell regions, each specified by a MergeCellInfo object. + +To define a merged region, use the following properties of the MergeCellInfo class, + +| Property | Type | Description | +|--------------|------|-----------------------------------------------------------------------------| +| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | +| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | +| RowSpan | int | The number of rows to span, starting from the anchor cell. By default set to 1. | +| ColumnSpan | int | The number of columns to span, starting from the anchor cell. By default set to 1. | + +The following examples demonstrate how to use both overloads of MergeCellsAsync to perform row spanning manually. + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code +{ + private SfGrid Grid; + public List Orders { get; set; } + + public async Task MergeCellsAsync() + { + await Grid.MergeCellsAsync(new MergeCellInfo + { + RowIndex = 1, + ColumnIndex = 1, + RowSpan = 2, + }); + } + + public async Task MergeMultipleCellsAsync() + { + await Grid.MergeCellsAsync(new[] + { + new MergeCellInfo { RowIndex = 0, ColumnIndex = 0, RowSpan = 2 }, + new MergeCellInfo { RowIndex = 5, ColumnIndex = 2, RowSpan = 3 }, + new MergeCellInfo { RowIndex = 7, ColumnIndex = 1, RowSpan = 2 } + }); + } + + protected override void OnInitialized() + { + Orders = new List() + { + new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, + new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, + new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, + new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, + new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, + new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, + new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, + new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, + new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, + new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, + new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, + new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, + new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, + new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, + new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, + new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, + new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, + new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, + new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, + new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, + new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, + new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, + new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, + new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, + new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, + new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, + new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, + new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, + new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, + new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } + }; + } + + public class Order + { + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +## Clearing Spanning via progammatically + +The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when you need to restore individual cells. This is achieved using the `UnmergeCellsAsync` methods, which allow developers to unmerge specific areas. To reset all merges in the current view, the `UnmergeAllAsync` method can be used. + +The method supports two overloads: + +- `UnmergeCellsAsync(UnmergeCellInfo info)` – Removes a single merged area identified by its anchor cell (top‑left of the merged region). +- `UnmergeCellsAsync(IEnumerable infos)` – Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. +- `UnmergeAllAsync()` – Removes all merged regions in the current view, restoring every cell to its original state. + +To identify a merged region, use the following properties of the UnmergeCellInfo class: + +| Property | Type | Description | +|--------------|------|-----------------------------------------------------------------------------| +| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | +| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | + +The following examples demonstrate how to use both overloads of `UnmergeCellsAsync` and `UnmergeAllAsync` to unmerge row spanning manually. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Merge Cell +UnMerge Cell + +Merge Multiple Cells +UnMerge Multiple Cells + +UnMerge All Cells + + + + + + + + + +@code +{ + private SfGrid Grid; + public List Orders { get; set; } + + public async Task MergeCellsAsync() + { + await Grid.MergeCellsAsync(new MergeCellInfo + { + RowIndex = 1, + ColumnIndex = 1, + RowSpan = 2, + }); + } + + public async Task UnMergeCell() + { + await Grid.UnmergeCellsAsync(new UnmergeCellInfo + { + RowIndex = 1, + ColumnIndex = 1, + }); + } + + public async Task MergeMultipleCellsAsync() + { + await Grid.MergeCellsAsync(new[] + { + new MergeCellInfo { RowIndex = 0, ColumnIndex = 0, RowSpan = 2 }, + new MergeCellInfo { RowIndex = 5, ColumnIndex = 2, RowSpan = 3 }, + new MergeCellInfo { RowIndex = 7, ColumnIndex = 1, RowSpan = 2 } + }); + } + + public async Task UnMergeCells() + { + await Grid.UnmergeCellsAsync(new[] + { + new UnmergeCellInfo { RowIndex = 0, ColumnIndex = 0 }, + new UnmergeCellInfo { RowIndex = 5, ColumnIndex = 2 }, + new UnmergeCellInfo { RowIndex = 7, ColumnIndex = 1 } + }); + } + + public async Task UnMergeAllCells() + { + await Grid.UnmergeAllAsync(); + } + + protected override void OnInitialized() + { + Orders = new List() + { + new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, + new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, + new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, + new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, + new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, + new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, + new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, + new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, + new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, + new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, + new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, + new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, + new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, + new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, + new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, + new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, + new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, + new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, + new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, + new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, + new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, + new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, + new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, + new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, + new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, + new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, + new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, + new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, + new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, + new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } + }; + } + + public class Order + { + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +## Limitations + +- The Row spanning is not compatible with the following features: + +1. Autofill +2. Inline Editing +3. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. \ No newline at end of file From bbcfe0205c72b2df9d58dfae9a357a97cc7355db Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Fri, 12 Dec 2025 18:19:46 +0530 Subject: [PATCH 03/10] 998591 : Documentation Samples added for RowSpanning and ColumnSpanning --- blazor/datagrid/column-spanning.md | 2 +- blazor/datagrid/row-spanning.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md index b77d4d5384..3fe6be6d3e 100644 --- a/blazor/datagrid/column-spanning.md +++ b/blazor/datagrid/column-spanning.md @@ -564,7 +564,7 @@ The following examples demonstrate how to use both overloads of MergeCellsAsync {% endhighlight %} {% endtabs %} -## Clearing Spanning via progammatically +## Clearing Spanning via programmatically The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when you need to restore individual cells. This is achieved using the `UnmergeCellsAsync` methods, which allow developers to unmerge specific areas. To reset all merges in the current view, the `UnmergeAllAsync` method can be used. diff --git a/blazor/datagrid/row-spanning.md b/blazor/datagrid/row-spanning.md index cfac3e3277..40997ad305 100644 --- a/blazor/datagrid/row-spanning.md +++ b/blazor/datagrid/row-spanning.md @@ -824,7 +824,7 @@ The following examples demonstrate how to use both overloads of MergeCellsAsync {% endhighlight %} {% endtabs %} -## Clearing Spanning via progammatically +## Clearing Spanning via programmatically The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when you need to restore individual cells. This is achieved using the `UnmergeCellsAsync` methods, which allow developers to unmerge specific areas. To reset all merges in the current view, the `UnmergeAllAsync` method can be used. From 9012b2fed511ddfa64582f6784cf181202526dd9 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Fri, 12 Dec 2025 18:34:54 +0530 Subject: [PATCH 04/10] 998591: Removed Bullet Points in Limitations --- blazor/datagrid/column-spanning.md | 2 +- blazor/datagrid/row-spanning.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md index 3fe6be6d3e..31228ddf95 100644 --- a/blazor/datagrid/column-spanning.md +++ b/blazor/datagrid/column-spanning.md @@ -704,7 +704,7 @@ The following examples demonstrate how to use both overloads of `UnmergeCellsAsy ## Limitations -- The Column spanning is not compatible with the following features: +The Column spanning is not compatible with the following features: 1. AutoFill 2. Hierarchy-Grid. diff --git a/blazor/datagrid/row-spanning.md b/blazor/datagrid/row-spanning.md index 40997ad305..5bff50e55e 100644 --- a/blazor/datagrid/row-spanning.md +++ b/blazor/datagrid/row-spanning.md @@ -964,7 +964,7 @@ The following examples demonstrate how to use both overloads of `UnmergeCellsAsy ## Limitations -- The Row spanning is not compatible with the following features: +The Row spanning is not compatible with the following features: 1. Autofill 2. Inline Editing From 029a91aa49dfdbfd425d5fd4be9a11b2113260a2 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Fri, 12 Dec 2025 19:04:56 +0530 Subject: [PATCH 05/10] 998591 : Modified Code Examples --- blazor/datagrid/column-spanning.md | 195 +++++++++++++++++----------- blazor/datagrid/row-spanning.md | 196 ++++++++++++++++++----------- 2 files changed, 243 insertions(+), 148 deletions(-) diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md index 31228ddf95..25ff628aee 100644 --- a/blazor/datagrid/column-spanning.md +++ b/blazor/datagrid/column-spanning.md @@ -517,48 +517,71 @@ The following examples demonstrate how to use both overloads of MergeCellsAsync protected override void OnInitialized() { - Orders = new List() - { - new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, - new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, - new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, - new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, - new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, - new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, - new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, - new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, - new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, - new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, - new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, - new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, - new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, - new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, - new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, - new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, - new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, - new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, - new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, - new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, - new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, - new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, - new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, - new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, - new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, - new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, - new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, - new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, - new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, - new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } - }; + Orders = Order.GetAllRecords(); } +} +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} - public class Order +public class Order +{ + public static List OrdersList = new List(); + + public Order() { } + + public Order(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) { - public int OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + + public static List GetAllRecords() + { + if (OrdersList.Count == 0) + { + OrdersList = new List() + { + new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, + new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, + new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, + new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, + new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, + new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, + new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, + new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, + new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, + new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, + new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, + new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, + new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, + new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, + new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, + new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, + new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, + new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, + new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, + new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, + new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, + new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, + new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, + new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, + new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, + new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, + new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, + new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, + new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, + new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } + }; + } + return OrdersList; } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } } {% endhighlight %} @@ -656,47 +679,71 @@ The following examples demonstrate how to use both overloads of `UnmergeCellsAsy protected override void OnInitialized() { - Orders = new List() - { - new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, - new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, - new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, - new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, - new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, - new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, - new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, - new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, - new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, - new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, - new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, - new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, - new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, - new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, - new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, - new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, - new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, - new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, - new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, - new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, - new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, - new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, - new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, - new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, - new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, - new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, - new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, - new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, - new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, - new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } - }; + Orders = Order.GetAllRecords(); } +} +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} - public class Order +public class Order +{ + public static List OrdersList = new List(); + + public Order() { } + + public Order(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) { - public int OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + + public static List GetAllRecords() + { + if (OrdersList.Count == 0) + { + OrdersList = new List() + { + new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, + new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, + new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, + new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, + new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, + new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, + new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, + new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, + new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, + new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, + new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, + new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, + new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, + new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, + new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, + new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, + new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, + new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, + new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, + new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, + new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, + new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, + new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, + new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, + new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, + new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, + new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, + new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, + new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, + new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } + }; + } + return OrdersList; } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } } {% endhighlight %} diff --git a/blazor/datagrid/row-spanning.md b/blazor/datagrid/row-spanning.md index 5bff50e55e..4289cf39bf 100644 --- a/blazor/datagrid/row-spanning.md +++ b/blazor/datagrid/row-spanning.md @@ -778,47 +778,71 @@ The following examples demonstrate how to use both overloads of MergeCellsAsync protected override void OnInitialized() { - Orders = new List() - { - new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, - new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, - new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, - new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, - new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, - new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, - new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, - new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, - new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, - new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, - new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, - new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, - new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, - new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, - new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, - new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, - new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, - new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, - new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, - new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, - new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, - new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, - new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, - new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, - new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, - new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, - new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, - new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, - new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, - new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } - }; + Orders = Order.GetAllRecords(); } +} +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + +public class Order +{ + public static List OrdersList = new List(); + + public Order() { } - public class Order + public Order(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) { - public int OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; } + + public static List GetAllRecords() + { + if (OrdersList.Count == 0) + { + OrdersList = new List() + { + new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, + new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, + new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, + new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, + new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, + new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, + new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, + new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, + new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, + new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, + new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, + new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, + new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, + new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, + new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, + new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, + new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, + new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, + new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, + new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, + new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, + new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, + new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, + new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, + new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, + new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, + new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, + new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, + new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, + new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } + }; + } + return OrdersList; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } } {% endhighlight %} @@ -916,47 +940,71 @@ The following examples demonstrate how to use both overloads of `UnmergeCellsAsy protected override void OnInitialized() { - Orders = new List() - { - new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, - new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, - new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, - new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, - new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, - new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, - new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, - new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, - new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, - new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, - new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, - new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, - new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, - new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, - new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, - new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, - new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, - new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, - new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, - new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, - new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, - new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, - new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, - new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, - new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, - new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, - new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, - new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, - new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, - new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } - }; + Orders = Order.GetAllRecords(); } +} +{% endhighlight %} +{% highlight c# tabtitle="Order.cs" %} + +public class Order +{ + public static List OrdersList = new List(); + + public Order() { } - public class Order + public Order(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) { - public int OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; } + + public static List GetAllRecords() + { + if (OrdersList.Count == 0) + { + OrdersList = new List() + { + new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, + new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, + new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, + new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, + new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, + new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, + new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, + new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, + new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, + new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, + new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, + new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, + new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, + new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, + new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, + new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, + new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, + new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, + new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, + new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, + new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, + new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, + new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, + new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, + new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, + new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, + new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, + new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, + new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, + new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } + }; + } + return OrdersList; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } } {% endhighlight %} From 887d7297f0d63752c3c89470eaf22dcef38bc70d Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Mon, 15 Dec 2025 18:09:43 +0530 Subject: [PATCH 06/10] 998591 : Addressed Comments --- blazor/datagrid/column-spanning.md | 46 +++++++++++------------- blazor/datagrid/row-spanning.md | 56 ++++++++++++++---------------- 2 files changed, 47 insertions(+), 55 deletions(-) diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md index 25ff628aee..b305be70bc 100644 --- a/blazor/datagrid/column-spanning.md +++ b/blazor/datagrid/column-spanning.md @@ -9,11 +9,11 @@ documentation: ug # Column Spanning in Blazor DataGrid -Column spanning in the Syncfusion Blazor DataGrid enables automatic vertical merging of adjacent cells within the same column when they contain identical values. This feature improves data readability by consolidating repeated values into a single, taller cell—ideal for grouped records or hierarchical data where the same value appears across consecutive rows. +Column spanning in the Syncfusion Blazor DataGrid provides automatic vertical merging of adjacent cells within the same column when identical values are detected. This feature enhances data readability by consolidating repeated values into a single, taller cell, making it particularly effective for scenarios where the same value appears across consecutive rows. -You can enable this behavior by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Column`. Once applied, the grid automatically scans each column and merges stacked cells that share the same value, reducing visual redundancy and presenting a cleaner, more structured layout. The merging logic is fully declarative and requires no additional code or preprocessing. +The functionality is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Column`. Once applied, the grid evaluates each column and merges stacked cells that share identical values, thereby reducing visual redundancy and presenting a cleaner, more structured layout. The merging process is fully declarative and requires no additional code or preprocessing. -Column spanning is part of the `AutoSpanMode` enumeration, which also includes `None`, `Row`, and `HorizontalAndVertical` options. These modes allow developers to control whether merging occurs vertically, horizontally, or in both directions—offering flexible layout customization to suit a wide range of data presentation needs. +Column spanning is part of the broader `AutoSpanMode` enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include `None`, `Row`, `Column`, and `HorizontalAndVertical`. ## AutoSpanMode Enumeration @@ -28,7 +28,7 @@ Column spanning is part of the `AutoSpanMode` enumeration, which also includes ` ## Enabling Column Spanning -To enable vertical merging of cells, set the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Column`. This instructs the grid to automatically merge stacked cells that share identical values within the same column. +Vertical cell merging in the Syncfusion Blazor DataGrid is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Column`. In this mode, the grid automatically merges stacked cells that share identical values within the same column. This reduces redundancy across consecutive rows and provides a cleaner, more structured layout for repeated data. The merging process is fully declarative and requires no additional code or preprocessing. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -97,7 +97,7 @@ To enable vertical merging of cells, set the `AutoSpan` property of the `SfGrid` ## Disable column spanning for specific column -Column spanning can also be disabled at the column level by setting the AutoSpan property of the GridColumn component to AutoSpanMode.None. This allows fine-grained control when spanning is required globally but should be excluded for specific columns. +Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level by setting the `AutoSpan` property of the `GridColumn` component to `AutoSpanMode.None`. This configuration provides fine-grained control, allowing automatic spanning to be applied globally while excluding specific columns where merging is not desired. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -426,7 +426,7 @@ public class EmployeeDetails {% endhighlight %} {% endtabs %} -The effective spanning behavior for a column is determined by the intersection of grid-level and column-level `AutoSpan` modes. The column can only narrow what the grid allows; it cannot enable a span direction that the grid disables. +The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level `AutoSpan` modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns. ### Complete Combination Matrix @@ -453,12 +453,14 @@ The effective spanning behavior for a column is determined by the intersection o ## Applying Column Spanning via programmatically -In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support to manually merge cells when custom layout behavior is required. This is achieved using the `MergeCellsAsync` method, which allows developers to define rectangular regions of cells to be merged programmatically. +In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the `MergeCellsAsync` method, which enables the definition of rectangular regions of cells to be merged programmatically. -The method supports two overloads: +Use `MergeCellsAsync` method to manually merge cells by defining rectangular regions. This method supports both single and batch merging, allowing precise control over layout customization when automatic spanning is insufficient. -- `MergeCellsAsync(MergeCellInfo info)` – Merges a single cell region as defined by the provided MergeCellInfo instance. -- `MergeCellsAsync(IEnumerable infos)` – Performs batch merging of multiple cell regions, each specified by a MergeCellInfo object. +| Parameter | Type | Description | +|-----------|------|-------------| +| info | `MergeCellInfo` | Defines a single rectangular cell region to be merged. | +| infos | `IEnumerable` | Specifies multiple cell regions to be merged in a batch operation. Each region is defined by a `MergeCellInfo` instance. | To define a merged region, use the following properties of the MergeCellInfo class, @@ -466,16 +468,12 @@ To define a merged region, use the following properties of the MergeCellInfo cla |--------------|------|-----------------------------------------------------------------------------| | RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | | ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | -| RowSpan | int | The number of rows to span, starting from the anchor cell. By default set to 1. | -| ColumnSpan | int | The number of columns to span, starting from the anchor cell. By default set to 1. | - -The following examples demonstrate how to use both overloads of MergeCellsAsync to perform row spanning manually. - +| RowSpan | int (optional) | The number of rows to span, starting from the anchor cell. By default set to 1. | +| ColumnSpan | int (optional) | The number of columns to span, starting from the anchor cell. By default set to 1. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} - @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @@ -589,13 +587,13 @@ public class Order ## Clearing Spanning via programmatically -The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when you need to restore individual cells. This is achieved using the `UnmergeCellsAsync` methods, which allow developers to unmerge specific areas. To reset all merges in the current view, the `UnmergeAllAsync` method can be used. +The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the `UnmergeCellsAsync` methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the `UnmergeAllAsync` method can be used to restore every cell to its original state. -The method supports two overloads: - -- `UnmergeCellsAsync(UnmergeCellInfo info)` – Removes a single merged area identified by its anchor cell (top‑left of the merged region). -- `UnmergeCellsAsync(IEnumerable infos)` – Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. -- `UnmergeAllAsync()` – Removes all merged regions in the current view, restoring every cell to its original state. +| Method | Parameter | Type | Description | +|--------|-----------|------|-------------| +| `UnmergeCellsAsync` | info | `UnmergeCellInfo` | Removes a single merged area identified by its anchor cell (top‑left of the merged region). | +| `UnmergeCellsAsync` | infos | `IEnumerable` | Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. | +| `UnmergeAllAsync` | – | – | Removes all merged regions in the current view, restoring every cell to its original state. | To identify a merged region, use the following properties of the UnmergeCellInfo class: @@ -604,8 +602,6 @@ To identify a merged region, use the following properties of the UnmergeCellInfo | RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | | ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | -The following examples demonstrate how to use both overloads of `UnmergeCellsAsync` and `UnmergeAllAsync` to unmerge row spanning manually. - {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -753,7 +749,7 @@ public class Order The Column spanning is not compatible with the following features: -1. AutoFill +1. AutoFill. 2. Hierarchy-Grid. 3. Detail-Template. 4. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. diff --git a/blazor/datagrid/row-spanning.md b/blazor/datagrid/row-spanning.md index 4289cf39bf..c5d6f246ec 100644 --- a/blazor/datagrid/row-spanning.md +++ b/blazor/datagrid/row-spanning.md @@ -1,21 +1,19 @@ --- layout: post title: Row Spanning in Blazor DataGrid Component | Syncfusion -description: Learn how to use the column spanning in Syncfusion Blazor DataGrid. +description: Learn how to use the row spanning in Syncfusion Blazor DataGrid. platform: Blazor control: DataGrid documentation: ug --- - # Row Spanning in Blazor DataGrid -Row spanning is a feature in the Syncfusion Blazor DataGrid that automatically merges adjacent cells with identical values horizontally across columns within the same row. This helps reduce visual repetition and presents grouped data in a more compact and readable format—ideal for scenarios where multiple columns in a row share the same value, such as repeated product details or status indicators. - -This functionality is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Row`. Once activated, the grid intelligently evaluates each row and merges neighboring cells that contain the same value, creating a single, wider cell. The merging process is fully automatic and declarative, requiring no manual logic or data transformation. +Row spanning in the Syncfusion Blazor DataGrid merges adjacent cells with identical values horizontally across columns within the same row. This feature reduces visual repetition and presents grouped data in a compact, readable format. It is particularly effective in scenarios where multiple columns share the same value, such as repeated product details or status indicators. -Row spanning is part of the broader `AutoSpanMode` enumeration, which also includes `None`, `Column`, and `HorizontalAndVertical` options. These modes allow developers to control whether merging occurs horizontally, vertically, or in both directions, offering flexible layout customization for enhanced data presentation +The functionality is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Row`. When activated, the grid evaluates each row and merges neighboring cells containing identical values, resulting in a single, wider cell. The merging process is automatic and declarative, requiring no manual logic or data transformation. +Row spanning is part of the broader `AutoSpanMode` enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include `None`, `Row`, `Column`, and `HorizontalAndVertical`. ## AutoSpanMode Enumeration @@ -29,8 +27,7 @@ Row spanning is part of the broader `AutoSpanMode` enumeration, which also inclu ## Enabling Row Spanning -To enable horizontal cell merging, set the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Row`. This mode merges adjacent cells across columns within the same row when they share the same value. - +Horizontal cell merging in the Syncfusion Blazor DataGrid is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Row`. In this mode, adjacent cells across columns within the same row are automatically merged when they contain identical values. This reduces redundancy and provides a cleaner, more compact presentation of repeated data. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -360,7 +357,7 @@ public class EmployeeDetails ## Disable spanning for specific column -Spanning can also be disabled at the column level by setting the `AutoSpan` property of the `GridColumn` component to `AutoSpanMode.None`. This allows fine-grained control when spanning is required globally but should be excluded for specific columns. +Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level by setting the `AutoSpan` property of the `GridColumn` component to `AutoSpanMode.None`. This configuration provides fine-grained control, allowing automatic spanning to be applied globally while excluding specific columns where merging is not desired. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -689,7 +686,8 @@ public class EmployeeDetails {% endhighlight %} {% endtabs %} -The effective spanning behavior for a column is determined by the intersection of grid-level and column-level `AutoSpan` modes. The column can only narrow what the grid allows; it cannot enable a span direction that the grid disables. +The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level `AutoSpan` modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns. + ### Complete Combination Matrix @@ -716,12 +714,14 @@ The effective spanning behavior for a column is determined by the intersection o ## Applying Row Spanning via programmatically -In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support to manually merge cells when custom layout behavior is required. This is achieved using the `MergeCellsAsync` method, which allows developers to define rectangular regions of cells to be merged programmatically. +In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the `MergeCellsAsync` method, which enables the definition of rectangular regions of cells to be merged programmatically. -The method supports two overloads: +Use `MergeCellsAsync` method to manually merge cells by defining rectangular regions. This method supports both single and batch merging, allowing precise control over layout customization when automatic spanning is insufficient. -- `MergeCellsAsync(MergeCellInfo info)` – Merges a single cell region as defined by the provided MergeCellInfo instance. -- `MergeCellsAsync(IEnumerable infos)` – Performs batch merging of multiple cell regions, each specified by a MergeCellInfo object. +| Parameter | Type | Description | +|-----------|------|-------------| +| info | `MergeCellInfo` | Defines a single rectangular cell region to be merged. | +| infos | `IEnumerable` | Specifies multiple cell regions to be merged in a batch operation. Each region is defined by a `MergeCellInfo` instance. | To define a merged region, use the following properties of the MergeCellInfo class, @@ -729,11 +729,8 @@ To define a merged region, use the following properties of the MergeCellInfo cla |--------------|------|-----------------------------------------------------------------------------| | RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | | ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | -| RowSpan | int | The number of rows to span, starting from the anchor cell. By default set to 1. | -| ColumnSpan | int | The number of columns to span, starting from the anchor cell. By default set to 1. | - -The following examples demonstrate how to use both overloads of MergeCellsAsync to perform row spanning manually. - +| RowSpan | int (optional) | The number of rows to span, starting from the anchor cell. By default set to 1. | +| ColumnSpan | int (optional) | The number of columns to span, starting from the anchor cell. By default set to 1. | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -850,13 +847,13 @@ public class Order ## Clearing Spanning via programmatically -The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when you need to restore individual cells. This is achieved using the `UnmergeCellsAsync` methods, which allow developers to unmerge specific areas. To reset all merges in the current view, the `UnmergeAllAsync` method can be used. +The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the `UnmergeCellsAsync` methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the `UnmergeAllAsync` method can be used to restore every cell to its original state. -The method supports two overloads: - -- `UnmergeCellsAsync(UnmergeCellInfo info)` – Removes a single merged area identified by its anchor cell (top‑left of the merged region). -- `UnmergeCellsAsync(IEnumerable infos)` – Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. -- `UnmergeAllAsync()` – Removes all merged regions in the current view, restoring every cell to its original state. +| Method | Parameter | Type | Description | +|--------|-----------|------|-------------| +| `UnmergeCellsAsync` | info | `UnmergeCellInfo` | Removes a single merged area identified by its anchor cell (top‑left of the merged region). | +| `UnmergeCellsAsync` | infos | `IEnumerable` | Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. | +| `UnmergeAllAsync` | – | – | Removes all merged regions in the current view, restoring every cell to its original state. | To identify a merged region, use the following properties of the UnmergeCellInfo class: @@ -865,8 +862,6 @@ To identify a merged region, use the following properties of the UnmergeCellInfo | RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | | ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | -The following examples demonstrate how to use both overloads of `UnmergeCellsAsync` and `UnmergeAllAsync` to unmerge row spanning manually. - {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1014,6 +1009,7 @@ public class Order The Row spanning is not compatible with the following features: -1. Autofill -2. Inline Editing -3. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. \ No newline at end of file +1. Autofill. +2. Inline Editing. +3. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. +4. Frozen Grid – When the `Freeze` property is set to `FreezeDirection.Fixed`, the concerned column will not be included for row spanning. From 5cbf3955df280ab7689ca12042be32f7f196fc72 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Tue, 16 Dec 2025 20:32:58 +0530 Subject: [PATCH 07/10] 998591 : Addressed Comments --- blazor/datagrid/column-spanning.md | 1459 +++++++++++++---- blazor/datagrid/row-spanning.md | 2458 +++++++++++++++++++--------- 2 files changed, 2794 insertions(+), 1123 deletions(-) diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md index b305be70bc..692cf9ee67 100644 --- a/blazor/datagrid/column-spanning.md +++ b/blazor/datagrid/column-spanning.md @@ -7,16 +7,15 @@ control: DataGrid documentation: ug --- -# Column Spanning in Blazor DataGrid +# Column spanning in Blazor DataGrid Column spanning in the Syncfusion Blazor DataGrid provides automatic vertical merging of adjacent cells within the same column when identical values are detected. This feature enhances data readability by consolidating repeated values into a single, taller cell, making it particularly effective for scenarios where the same value appears across consecutive rows. -The functionality is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Column`. Once applied, the grid evaluates each column and merges stacked cells that share identical values, thereby reducing visual redundancy and presenting a cleaner, more structured layout. The merging process is fully declarative and requires no additional code or preprocessing. +The functionality is enabled by setting the `AutoSpan` property of the `SfGrid` component to **AutoSpanMode.Column**. Once applied, the grid evaluates each column and merges stacked cells that share identical values, thereby reducing visual redundancy and presenting a cleaner, more structured layout. The merging process is fully declarative and requires no additional code or preprocessing. -Column spanning is part of the broader `AutoSpanMode` enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include `None`, `Row`, `Column`, and `HorizontalAndVertical`. +Column spanning is part of the broader `AutoSpanMode` enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**. - -## AutoSpanMode Enumeration +**AutoSpanMode Enumeration** | Enum Value | Description | |---------|-----| @@ -26,78 +25,10 @@ Column spanning is part of the broader `AutoSpanMode` enumeration, which provide | AutoSpanMode.HorizontalAndVertical | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. | -## Enabling Column Spanning - -Vertical cell merging in the Syncfusion Blazor DataGrid is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Column`. In this mode, the grid automatically merges stacked cells that share identical values within the same column. This reduces redundancy across consecutive rows and provides a cleaner, more structured layout for repeated data. The merging process is fully declarative and requires no additional code or preprocessing. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Grids - - - - - - - - - -@code { - public List Orders { get; set; } - - protected override void OnInitialized() - { - Orders = new List() - { - new Order { OrderID = 10001, CustomerID = "ALFKI", Freight = 32.38 }, - new Order { OrderID = 10002, CustomerID = "ALFKI", Freight = 32.38 }, - new Order { OrderID = 10003, CustomerID = "ALFKI", Freight = 32.38 }, - new Order { OrderID = 10004, CustomerID = "ANATR", Freight = 11.61 }, - new Order { OrderID = 10005, CustomerID = "ANATR", Freight = 11.61 }, - new Order { OrderID = 10006, CustomerID = "ANATR", Freight = 11.61 }, - new Order { OrderID = 10007, CustomerID = "BERGS", Freight = 45.12 }, - new Order { OrderID = 10008, CustomerID = "BERGS", Freight = 45.12 }, - new Order { OrderID = 10009, CustomerID = "BERGS", Freight = 45.12 }, - new Order { OrderID = 10010, CustomerID = "BLAUS", Freight = 18.77 }, - new Order { OrderID = 10011, CustomerID = "BLAUS", Freight = 18.77 }, - new Order { OrderID = 10012, CustomerID = "BLAUS", Freight = 18.77 }, - new Order { OrderID = 10013, CustomerID = "BONAP", Freight = 67.23 }, - new Order { OrderID = 10014, CustomerID = "BONAP", Freight = 67.23 }, - new Order { OrderID = 10015, CustomerID = "BONAP", Freight = 67.23 }, - new Order { OrderID = 10016, CustomerID = "CACTU", Freight = 22.45 }, - new Order { OrderID = 10017, CustomerID = "CACTU", Freight = 22.45 }, - new Order { OrderID = 10018, CustomerID = "CACTU", Freight = 22.45 }, - new Order { OrderID = 10019, CustomerID = "FRANK", Freight = 39.99 }, - new Order { OrderID = 10020, CustomerID = "FRANK", Freight = 39.99 }, - new Order { OrderID = 10021, CustomerID = "FRANK", Freight = 39.99 }, - new Order { OrderID = 10022, CustomerID = "HUNGO", Freight = 55.50 }, - new Order { OrderID = 10023, CustomerID = "HUNGO", Freight = 55.50 }, - new Order { OrderID = 10024, CustomerID = "HUNGO", Freight = 55.50 }, - new Order { OrderID = 10025, CustomerID = "LILAS", Freight = 27.80 }, - new Order { OrderID = 10026, CustomerID = "LILAS", Freight = 27.80 }, - new Order { OrderID = 10027, CustomerID = "LILAS", Freight = 27.80 }, - new Order { OrderID = 10028, CustomerID = "SEVES", Freight = 14.65 }, - new Order { OrderID = 10029, CustomerID = "SEVES", Freight = 14.65 }, - new Order { OrderID = 10030, CustomerID = "SEVES", Freight = 14.65 } - }; - } - - public class Order - { - public int OrderID { get; set; } - public string CustomerID { get; set; } - public double Freight { get; set; } - } -} - -{% endhighlight %} -{% endtabs %} - +## Enable column spanning -## Disable column spanning for specific column +Vertical cell merging in the Syncfusion Blazor DataGrid is enabled by setting the `AutoSpan` property of the `SfGrid` component to **AutoSpanMode.Column**. In this mode, the grid automatically merges stacked cells that share identical values within the same column. This reduces redundancy across consecutive rows and provides a cleaner, more structured layout for repeated data. -Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level by setting the `AutoSpan` property of the `GridColumn` component to `AutoSpanMode.None`. This configuration provides fine-grained control, allowing automatic spanning to be applied globally while excluding specific columns where merging is not desired. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -106,9 +37,8 @@ Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level b @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Buttons - - + @@ -125,15 +55,12 @@ Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level b - - - - - + + + - @code { private bool enableFrozen { get; set; } = true; public List? EmployeeTimeSheet { get; set; } @@ -142,7 +69,6 @@ Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level b { EmployeeTimeSheet = EmployeeDetails.GetAllRecords(); } - } {% endhighlight %} @@ -196,6 +122,7 @@ public class EmployeeDetails public string? Time_4_00 { get; set; } public string? Time_4_30 { get; set; } public string? Time_5_00 { get; set; } + public static List GetAllRecords() { List data = new List(); @@ -426,331 +353,1137 @@ public class EmployeeDetails {% endhighlight %} {% endtabs %} -The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level `AutoSpan` modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns. - -### Complete Combination Matrix - -| Grid AutoSpan | Column AutoSpan | Effective Behavior | -|---|---|---| -| None | None | No spanning. Both grid and column explicitly disable spanning. | -| None | Row | No spanning. Grid-level None overrides column-level Row. | -| None | Column | No spanning. Grid-level None overrides column-level Column. | -| None | HorizontalAndVertical | No spanning. Grid-level None overrides all spanning modes. | -| Row | None | No spanning. Column explicitly disables spanning. | -| Row | Row | Row spanning only. Both grid and column enable row spanning. | -| Row | Column | No spanning. Grid only allows row spanning; column cannot enable column spanning. | -| Row | HorizontalAndVertical | Row spanning only. Grid only allows row spanning. | -| Column | None | No spanning. Column explicitly disables spanning. | -| Column | Row | No spanning. Grid only allows column spanning; column cannot enable row spanning. | -| Column | Column | Column spanning only. Both grid and column enable column spanning. | -| Column | HorizontalAndVertical | Column spanning only. Grid only allows column spanning. | -| HorizontalAndVertical | None | No spanning. Column explicitly disables both directions. | -| HorizontalAndVertical | Row | Row spanning only. Grid allows both; column narrows to Row. | -| HorizontalAndVertical | Column | Column spanning only. Grid allows both; column narrows to Column. | -| HorizontalAndVertical | HorizontalAndVertical | Row and Column spanning. Both grid and column enable both directions. | - ---- - -## Applying Column Spanning via programmatically - -In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the `MergeCellsAsync` method, which enables the definition of rectangular regions of cells to be merged programmatically. - -Use `MergeCellsAsync` method to manually merge cells by defining rectangular regions. This method supports both single and batch merging, allowing precise control over layout customization when automatic spanning is insufficient. - -| Parameter | Type | Description | -|-----------|------|-------------| -| info | `MergeCellInfo` | Defines a single rectangular cell region to be merged. | -| infos | `IEnumerable` | Specifies multiple cell regions to be merged in a batch operation. Each region is defined by a `MergeCellInfo` instance. | +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLSiVidohlTweYa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -To define a merged region, use the following properties of the MergeCellInfo class, +## Disable column spanning for specific column -| Property | Type | Description | -|--------------|------|-----------------------------------------------------------------------------| -| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | -| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | -| RowSpan | int (optional) | The number of rows to span, starting from the anchor cell. By default set to 1. | -| ColumnSpan | int (optional) | The number of columns to span, starting from the anchor cell. By default set to 1. | +Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific column by setting the `AutoSpan` property of the `GridColumn` component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding columns where merging is not required. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Buttons -Merge Cell -Merge Multiple Cells - - - - - - + + + + + + + + + + + + + + + + + + + + + -@code -{ - private SfGrid Grid; - public List Orders { get; set; } - - public async Task MergeCellsAsync() - { - await Grid.MergeCellsAsync(new MergeCellInfo - { - RowIndex = 1, - ColumnIndex = 1, - ColumnSpan = 2, - }); - } - - public async Task MergeMultipleCellsAsync() - { - await Grid.MergeCellsAsync(new[] - { - new MergeCellInfo { RowIndex = 0, ColumnIndex = 0, ColumnSpan = 2 }, - new MergeCellInfo { RowIndex = 5, ColumnIndex = 0, ColumnSpan = 3 }, - new MergeCellInfo { RowIndex = 7, ColumnIndex = 0, ColumnSpan = 2 } - }); - } +@code { + private bool enableFrozen { get; set; } = true; + public List? EmployeeTimeSheet { get; set; } protected override void OnInitialized() { - Orders = Order.GetAllRecords(); - } -} -{% endhighlight %} -{% highlight c# tabtitle="Order.cs" %} - -public class Order -{ - public static List OrdersList = new List(); - - public Order() { } - - public Order(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 (OrdersList.Count == 0) - { - OrdersList = new List() - { - new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, - new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, - new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, - new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, - new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, - new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, - new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, - new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, - new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, - new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, - new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, - new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, - new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, - new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, - new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, - new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, - new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, - new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, - new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, - new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, - new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, - new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, - new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, - new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, - new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, - new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, - new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, - new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, - new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, - new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } - }; - } - return OrdersList; + EmployeeTimeSheet = EmployeeDetails.GetAllRecords(); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } } {% endhighlight %} -{% endtabs %} - -## Clearing Spanning via programmatically - -The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the `UnmergeCellsAsync` methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the `UnmergeAllAsync` method can be used to restore every cell to its original state. - -| Method | Parameter | Type | Description | -|--------|-----------|------|-------------| -| `UnmergeCellsAsync` | info | `UnmergeCellInfo` | Removes a single merged area identified by its anchor cell (top‑left of the merged region). | -| `UnmergeCellsAsync` | infos | `IEnumerable` | Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. | -| `UnmergeAllAsync` | – | – | Removes all merged regions in the current view, restoring every cell to its original state. | - -To identify a merged region, use the following properties of the UnmergeCellInfo class: - -| Property | Type | Description | -|--------------|------|-----------------------------------------------------------------------------| -| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | -| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Buttons - -Merge Cell -UnMerge Cell - -Merge Multiple Cells -UnMerge Multiple Cells - -UnMerge All Cells - - - - - - - - +{% highlight c# tabtitle="EmployeeDetails.cs" %} -@code +public class EmployeeDetails { - private SfGrid Grid; - public List Orders { get; set; } - - public async Task MergeCellsAsync() + public EmployeeDetails() { - await Grid.MergeCellsAsync(new MergeCellInfo - { - RowIndex = 1, - ColumnIndex = 1, - ColumnSpan = 2, - }); } - - public async Task UnMergeCell() + public EmployeeDetails(int employeeid, string employeename, string time_9_00, string time_9_30, string time_10_00, string time_10_30, string time_11_00, string time_11_30, + string time_12_00, string time_12_30, string time_1_00, string time_1_30, string time_2_00, string time_2_30, string time_3_00, string time_3_30, string time_4_00, string time_4_30, + string time_5_00) { - await Grid.UnmergeCellsAsync(new UnmergeCellInfo - { - RowIndex = 1, - ColumnIndex = 1, - }); + this.EmployeeID = employeeid; + this.EmployeeName = employeename; + this.Time_9_00 = time_9_00; + this.Time_9_00 = time_9_30; + this.Time_10_00 = time_10_00; + this.Time_10_30 = time_10_30; + this.Time_11_00 = time_11_00; + this.Time_11_30 = time_11_30; + this.Time_12_00 = time_12_00; + this.Time_12_30 = time_12_30; + this.Time_1_00 = time_1_00; + this.Time_1_30 = time_1_30; + this.Time_2_00 = time_2_00; + this.Time_2_30 = time_2_30; + this.Time_3_00 = time_3_00; + this.Time_3_30 = time_3_30; + this.Time_4_00 = time_4_00; + this.Time_4_30 = time_4_30; + this.Time_5_00 = time_5_00; } - - public async Task MergeMultipleCellsAsync() + public int EmployeeID { get; set; } + public string? EmployeeName { get; set; } + public string? Time_9_00 { get; set; } + public string? Time_9_30 { get; set; } + public string? Time_10_00 { get; set; } + public string? Time_10_30 { get; set; } + public string? Time_11_00 { get; set; } + public string? Time_11_30 { get; set; } + public string? Time_12_00 { get; set; } + public string? Time_12_30 { get; set; } + public string? Time_1_00 { get; set; } + public string? Time_1_30 { get; set; } + public string? Time_2_00 { get; set; } + public string? Time_2_30 { get; set; } + public string? Time_3_00 { get; set; } + public string? Time_3_30 { get; set; } + public string? Time_4_00 { get; set; } + public string? Time_4_30 { get; set; } + public string? Time_5_00 { get; set; } + public static List GetAllRecords() { - await Grid.MergeCellsAsync(new[] + List data = new List(); + data.Add(new EmployeeDetails { - new MergeCellInfo { RowIndex = 0, ColumnIndex = 0, ColumnSpan = 2 }, - new MergeCellInfo { RowIndex = 5, ColumnIndex = 0, ColumnSpan = 3 }, - new MergeCellInfo { RowIndex = 7, ColumnIndex = 0, ColumnSpan = 2 } + EmployeeID = 10001, + EmployeeName = "Nancy Davolio", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Team Meeting", + Time_10_30 = "Testing", + Time_11_00 = "Development", + Time_11_30 = "Code Review", + Time_12_00 = "Development", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Development", + Time_4_00 = "Conference", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" }); - } - - public async Task UnMergeCells() - { - await Grid.UnmergeCellsAsync(new[] + data.Add(new EmployeeDetails { - new UnmergeCellInfo { RowIndex = 0, ColumnIndex = 0 }, - new UnmergeCellInfo { RowIndex = 5, ColumnIndex = 0 }, - new UnmergeCellInfo { RowIndex = 7, ColumnIndex = 0 } - }); - } - - public async Task UnMergeAllCells() - { - await Grid.UnmergeAllAsync(); - } - - protected override void OnInitialized() - { - Orders = Order.GetAllRecords(); - } -} -{% endhighlight %} -{% highlight c# tabtitle="Order.cs" %} + EmployeeID = 10002, + EmployeeName = "Steven Buchanan", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Support", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Code Review", + Time_3_00 = "Development", + Time_3_30 = "Documentation", + Time_4_00 = "Documentation", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10003, + EmployeeName = "Andrew Fuller", + Time_9_00 = "Documentation", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10004, + EmployeeName = "Janet Leverling", + Time_9_00 = "Testing", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Documentation", + Time_4_00 = "Conference", + Time_4_30 = "Conference", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10005, + EmployeeName = "Margaret Parker", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Task Assign", + Time_11_00 = "Documentation", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Testing", + Time_5_00 = "Testing" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10006, + EmployeeName = "Janet King", + Time_9_00 = "Testing", + Time_9_30 = "Testing", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Support", + Time_11_30 = "Team Meeting", + Time_12_00 = "Team Meeting", + Time_12_30 = "Team Meeting", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10007, + EmployeeName = "Michael Suyama", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Testing", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Support", + Time_3_00 = "Build", + Time_3_30 = "Build", + Time_4_00 = "Documentation", + Time_4_30 = "Documentation", + Time_5_00 = "Documentation" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10008, + EmployeeName = "Robert King", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Development", + Time_12_00 = "Testing", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Team Meeting", + Time_5_00 = "Build" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10009, + EmployeeName = "Andrew Callahan", + Time_9_00 = "Documentation", + Time_9_30 = "Team Meeting", + Time_10_00 = "Team Meeting", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Development", + Time_12_00 = "Development", + Time_12_30 = "Development", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10010, + EmployeeName = "Michael Dodsworth", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Testing", + Time_12_00 = "Build", + Time_12_30 = "Task Assign", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Testing", + Time_4_00 = "Build", + Time_4_30 = "Build", + Time_5_00 = "Testing" + }); + return data; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBSshCRIKBMHUsU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level `AutoSpan` modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns. + +**Complete combination matrix** + +| Grid AutoSpan | Column AutoSpan | Effective Behavior | +|---|---|---| +| None | None | No spanning. Both grid and column explicitly disable spanning. | +| None | Row | No spanning. Grid-level None overrides column-level Row. | +| None | Column | No spanning. Grid-level None overrides column-level Column. | +| None | HorizontalAndVertical | No spanning. Grid-level None overrides all spanning modes. | +| Row | None | No spanning. Column explicitly disables spanning. | +| Row | Row | Row spanning only. Both grid and column enable row spanning. | +| Row | Column | No spanning. Grid only allows row spanning; column cannot enable column spanning. | +| Row | HorizontalAndVertical | Row spanning only. Grid only allows row spanning. | +| Column | None | No spanning. Column explicitly disables spanning. | +| Column | Row | No spanning. Grid only allows column spanning; column cannot enable row spanning. | +| Column | Column | Column spanning only. Both grid and column enable column spanning. | +| Column | HorizontalAndVertical | Column spanning only. Grid only allows column spanning. | +| HorizontalAndVertical | None | No spanning. Column explicitly disables both directions. | +| HorizontalAndVertical | Row | Row spanning only. Grid allows both; column narrows to Row. | +| HorizontalAndVertical | Column | Column spanning only. Grid allows both; column narrows to Column. | +| HorizontalAndVertical | HorizontalAndVertical | Row and Column spanning. Both grid and column enable both directions. | + +--- + +## Apply column spanning via programmatically + +In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the `MergeCellsAsync` method, which enables the definition of rectangular regions of cells to be merged programmatically. + +Use `MergeCellsAsync` method to manually merge cells by defining rectangular regions. This method supports both single and batch merging, allowing precise control over layout customization when automatic spanning is insufficient. + +The `MergeCellsAsync` method is overloaded, meaning multiple versions of the same method name exist, but each accepts different parameter types to handle different use cases. This approach provides flexibility while maintaining a consistent API design. + +| Parameter | Type | Description | +|-----------|------|-------------| +| info | `MergeCellInfo` | Defines a single rectangular cell region to be merged. | +| infos | `IEnumerable` | Specifies multiple cell regions to be merged in a batch operation. Each region is defined by a `MergeCellInfo` instance. | + +To define a merged region, use the following properties of the `MergeCellInfo` class, + +| Property | Type | Description | +|--------------|------|-----------------------------------------------------------------------------| +| RowIndex | int | The zero-based index of the anchor row. | +| ColumnIndex | int | The zero-based index of the anchor column (**top-left cell of the merged region**). | +| RowSpan | int (optional) | The number of rows to span, starting from the anchor cell. By default set to 1. | +| ColumnSpan | int (optional) | The number of columns to span, starting from the anchor cell. By default set to 1. | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Buttons + +Merge Cell +Merge Multiple Cells + + + + + + + + + + + + + + + + + + + + + + + + + + +@code +{ + private bool enableFrozen { get; set; } = true; + public List? EmployeeTimeSheet { get; set; } + public SfGrid? Grid; + + protected override void OnInitialized() + { + EmployeeTimeSheet = EmployeeDetails.GetAllRecords(); + } + + public async Task MergeCellsAsync() + { + await Grid.MergeCellsAsync(new MergeCellInfo + { + RowIndex = 1, + ColumnIndex = 2, + ColumnSpan = 2, + }); + } + + public async Task MergeMultipleCellsAsync() + { + await Grid.MergeCellsAsync(new[] + { + new MergeCellInfo { RowIndex = 0, ColumnIndex = 2, ColumnSpan = 2 }, + new MergeCellInfo { RowIndex = 5, ColumnIndex = 3, ColumnSpan = 3 }, + new MergeCellInfo { RowIndex = 7, ColumnIndex = 4, ColumnSpan = 2 } + }); + } +} +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} + +public class EmployeeDetails +{ + public EmployeeDetails() + { + } + public EmployeeDetails(int employeeid, string employeename, string time_9_00, string time_9_30, string time_10_00, string time_10_30, string time_11_00, string time_11_30, + string time_12_00, string time_12_30, string time_1_00, string time_1_30, string time_2_00, string time_2_30, string time_3_00, string time_3_30, string time_4_00, string time_4_30, + string time_5_00) + { + this.EmployeeID = employeeid; + this.EmployeeName = employeename; + this.Time_9_00 = time_9_00; + this.Time_9_00 = time_9_30; + this.Time_10_00 = time_10_00; + this.Time_10_30 = time_10_30; + this.Time_11_00 = time_11_00; + this.Time_11_30 = time_11_30; + this.Time_12_00 = time_12_00; + this.Time_12_30 = time_12_30; + this.Time_1_00 = time_1_00; + this.Time_1_30 = time_1_30; + this.Time_2_00 = time_2_00; + this.Time_2_30 = time_2_30; + this.Time_3_00 = time_3_00; + this.Time_3_30 = time_3_30; + this.Time_4_00 = time_4_00; + this.Time_4_30 = time_4_30; + this.Time_5_00 = time_5_00; + } + public int EmployeeID { get; set; } + public string? EmployeeName { get; set; } + public string? Time_9_00 { get; set; } + public string? Time_9_30 { get; set; } + public string? Time_10_00 { get; set; } + public string? Time_10_30 { get; set; } + public string? Time_11_00 { get; set; } + public string? Time_11_30 { get; set; } + public string? Time_12_00 { get; set; } + public string? Time_12_30 { get; set; } + public string? Time_1_00 { get; set; } + public string? Time_1_30 { get; set; } + public string? Time_2_00 { get; set; } + public string? Time_2_30 { get; set; } + public string? Time_3_00 { get; set; } + public string? Time_3_30 { get; set; } + public string? Time_4_00 { get; set; } + public string? Time_4_30 { get; set; } + public string? Time_5_00 { get; set; } + + public static List GetAllRecords() + { + List data = new List(); + data.Add(new EmployeeDetails + { + EmployeeID = 10001, + EmployeeName = "Nancy Davolio", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Team Meeting", + Time_10_30 = "Testing", + Time_11_00 = "Development", + Time_11_30 = "Code Review", + Time_12_00 = "Development", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Development", + Time_4_00 = "Conference", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10002, + EmployeeName = "Steven Buchanan", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Support", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Code Review", + Time_3_00 = "Development", + Time_3_30 = "Documentation", + Time_4_00 = "Documentation", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10003, + EmployeeName = "Andrew Fuller", + Time_9_00 = "Documentation", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10004, + EmployeeName = "Janet Leverling", + Time_9_00 = "Testing", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Documentation", + Time_4_00 = "Conference", + Time_4_30 = "Conference", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10005, + EmployeeName = "Margaret Parker", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Task Assign", + Time_11_00 = "Documentation", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Testing", + Time_5_00 = "Testing" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10006, + EmployeeName = "Janet King", + Time_9_00 = "Testing", + Time_9_30 = "Testing", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Support", + Time_11_30 = "Team Meeting", + Time_12_00 = "Team Meeting", + Time_12_30 = "Team Meeting", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10007, + EmployeeName = "Michael Suyama", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Testing", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Support", + Time_3_00 = "Build", + Time_3_30 = "Build", + Time_4_00 = "Documentation", + Time_4_30 = "Documentation", + Time_5_00 = "Documentation" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10008, + EmployeeName = "Robert King", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Development", + Time_12_00 = "Testing", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Team Meeting", + Time_5_00 = "Build" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10009, + EmployeeName = "Andrew Callahan", + Time_9_00 = "Documentation", + Time_9_30 = "Team Meeting", + Time_10_00 = "Team Meeting", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Development", + Time_12_00 = "Development", + Time_12_30 = "Development", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10010, + EmployeeName = "Michael Dodsworth", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Testing", + Time_12_00 = "Build", + Time_12_30 = "Task Assign", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Testing", + Time_4_00 = "Build", + Time_4_30 = "Build", + Time_5_00 = "Testing" + }); + return data; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLSWBiRygfOdbUd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Clear spanning via programmatically + +The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the `UnmergeCellsAsync` methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the `UnmergeAllAsync` method can be used to restore every cell to its original state. + +The `UnmergeCellsAsync` method is overloaded to provide flexibility for different scenarios. Both overloads share the same method name but accept different parameter types, allowing removal of either a single merged region or multiple merged regions in one operation. + +| Method | Parameter | Type | Description | +|--------|-----------|------|-------------| +| `UnmergeCellsAsync` | info | `UnmergeCellInfo` | Removes a single merged area identified by its anchor cell (top‑left of the merged region). | +| `UnmergeCellsAsync` | infos | `IEnumerable` | Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. | +| `UnmergeAllAsync` | – | – | Removes all merged regions in the current view, restoring every cell to its original state. | + +To identify a merged region, use the following properties of the `UnmergeCellInfo` class: + +| Property | Type | Description | +|--------------|------|-----------------------------------------------------------------------------| +| RowIndex | int | The zero-based index of the anchor row. | +| ColumnIndex | int | The zero-based index of the anchor column (**top-left cell of the merged region**). | + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Buttons + +Merge Cell +UnMerge Cell + +Merge Multiple Cells +UnMerge Multiple Cells + +UnMerge All Cells -public class Order + + + + + + + + + + + + + + + + + + + + + + + +@code { - public static List OrdersList = new List(); + private bool enableFrozen { get; set; } = true; + public List? EmployeeTimeSheet { get; set; } + public SfGrid? Grid; + + protected override void OnInitialized() + { + EmployeeTimeSheet = EmployeeDetails.GetAllRecords(); + } + + public async Task MergeCellsAsync() + { + await Grid.MergeCellsAsync(new MergeCellInfo + { + RowIndex = 1, + ColumnIndex = 5, + ColumnSpan = 2, + }); + } + + public async Task UnMergeCell() + { + await Grid.UnmergeCellsAsync(new UnmergeCellInfo + { + RowIndex = 1, + ColumnIndex = 5, + }); + } + + public async Task MergeMultipleCellsAsync() + { + await Grid.MergeCellsAsync(new[] + { + new MergeCellInfo { RowIndex = 0, ColumnIndex = 2, ColumnSpan = 2 }, + new MergeCellInfo { RowIndex = 5, ColumnIndex = 3, ColumnSpan = 3 }, + new MergeCellInfo { RowIndex = 7, ColumnIndex = 4, ColumnSpan = 2 } + }); + } + + public async Task UnMergeCells() + { + await Grid.UnmergeCellsAsync(new[] + { + new UnmergeCellInfo { RowIndex = 0, ColumnIndex = 2 }, + new UnmergeCellInfo { RowIndex = 5, ColumnIndex = 3 }, + new UnmergeCellInfo { RowIndex = 7, ColumnIndex = 4 } + }); + } - public Order() { } + public async Task UnMergeAllCells() + { + await Grid.UnmergeAllAsync(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="EmployeeDetails.cs" %} - public Order(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) +public class EmployeeDetails +{ + public EmployeeDetails() + { + } + public EmployeeDetails(int employeeid, string employeename, string time_9_00, string time_9_30, string time_10_00, string time_10_30, string time_11_00, string time_11_30, + string time_12_00, string time_12_30, string time_1_00, string time_1_30, string time_2_00, string time_2_30, string time_3_00, string time_3_30, string time_4_00, string time_4_30, + string time_5_00) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.OrderDate = OrderDate; - this.Freight = Freight; + this.EmployeeID = employeeid; + this.EmployeeName = employeename; + this.Time_9_00 = time_9_00; + this.Time_9_00 = time_9_30; + this.Time_10_00 = time_10_00; + this.Time_10_30 = time_10_30; + this.Time_11_00 = time_11_00; + this.Time_11_30 = time_11_30; + this.Time_12_00 = time_12_00; + this.Time_12_30 = time_12_30; + this.Time_1_00 = time_1_00; + this.Time_1_30 = time_1_30; + this.Time_2_00 = time_2_00; + this.Time_2_30 = time_2_30; + this.Time_3_00 = time_3_00; + this.Time_3_30 = time_3_30; + this.Time_4_00 = time_4_00; + this.Time_4_30 = time_4_30; + this.Time_5_00 = time_5_00; } + public int EmployeeID { get; set; } + public string? EmployeeName { get; set; } + public string? Time_9_00 { get; set; } + public string? Time_9_30 { get; set; } + public string? Time_10_00 { get; set; } + public string? Time_10_30 { get; set; } + public string? Time_11_00 { get; set; } + public string? Time_11_30 { get; set; } + public string? Time_12_00 { get; set; } + public string? Time_12_30 { get; set; } + public string? Time_1_00 { get; set; } + public string? Time_1_30 { get; set; } + public string? Time_2_00 { get; set; } + public string? Time_2_30 { get; set; } + public string? Time_3_00 { get; set; } + public string? Time_3_30 { get; set; } + public string? Time_4_00 { get; set; } + public string? Time_4_30 { get; set; } + public string? Time_5_00 { get; set; } - public static List GetAllRecords() + public static List GetAllRecords() { - if (OrdersList.Count == 0) - { - OrdersList = new List() - { - new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, - new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, - new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, - new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, - new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, - new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, - new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, - new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, - new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, - new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, - new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, - new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, - new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, - new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, - new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, - new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, - new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, - new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, - new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, - new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, - new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, - new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, - new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, - new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, - new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, - new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, - new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, - new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, - new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, - new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } - }; - } - return OrdersList; + List data = new List(); + data.Add(new EmployeeDetails + { + EmployeeID = 10001, + EmployeeName = "Nancy Davolio", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Team Meeting", + Time_10_30 = "Testing", + Time_11_00 = "Development", + Time_11_30 = "Code Review", + Time_12_00 = "Development", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Development", + Time_4_00 = "Conference", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10002, + EmployeeName = "Steven Buchanan", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Support", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Code Review", + Time_3_00 = "Development", + Time_3_30 = "Documentation", + Time_4_00 = "Documentation", + Time_4_30 = "Team Meeting", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10003, + EmployeeName = "Andrew Fuller", + Time_9_00 = "Documentation", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10004, + EmployeeName = "Janet Leverling", + Time_9_00 = "Testing", + Time_9_30 = "Documentation", + Time_10_00 = "Documentation", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Documentation", + Time_4_00 = "Conference", + Time_4_30 = "Conference", + Time_5_00 = "Team Meeting" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10005, + EmployeeName = "Margaret Parker", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Task Assign", + Time_11_00 = "Documentation", + Time_11_30 = "Support", + Time_12_00 = "Support", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Development", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Testing", + Time_5_00 = "Testing" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10006, + EmployeeName = "Janet King", + Time_9_00 = "Testing", + Time_9_30 = "Testing", + Time_10_00 = "Support", + Time_10_30 = "Support", + Time_11_00 = "Support", + Time_11_30 = "Team Meeting", + Time_12_00 = "Team Meeting", + Time_12_30 = "Team Meeting", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Development", + Time_3_00 = "Code Review", + Time_3_30 = "Team Meeting", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10007, + EmployeeName = "Michael Suyama", + Time_9_00 = "Analysis Tasks", + Time_9_30 = "Analysis Tasks", + Time_10_00 = "Testing", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Testing", + Time_12_00 = "Testing", + Time_12_30 = "Testing", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Support", + Time_3_00 = "Build", + Time_3_30 = "Build", + Time_4_00 = "Documentation", + Time_4_30 = "Documentation", + Time_5_00 = "Documentation" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10008, + EmployeeName = "Robert King", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Development", + Time_11_00 = "Development", + Time_11_30 = "Development", + Time_12_00 = "Testing", + Time_12_30 = "Support", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Team Meeting", + Time_5_00 = "Build" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10009, + EmployeeName = "Andrew Callahan", + Time_9_00 = "Documentation", + Time_9_30 = "Team Meeting", + Time_10_00 = "Team Meeting", + Time_10_30 = "Support", + Time_11_00 = "Testing", + Time_11_30 = "Development", + Time_12_00 = "Development", + Time_12_30 = "Development", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Documentation", + Time_3_00 = "Documentation", + Time_3_30 = "Documentation", + Time_4_00 = "Team Meeting", + Time_4_30 = "Development", + Time_5_00 = "Development" + }); + data.Add(new EmployeeDetails + { + EmployeeID = 10010, + EmployeeName = "Michael Dodsworth", + Time_9_00 = "Task Assign", + Time_9_30 = "Task Assign", + Time_10_00 = "Task Assign", + Time_10_30 = "Analysis Tasks", + Time_11_00 = "Analysis Tasks", + Time_11_30 = "Testing", + Time_12_00 = "Build", + Time_12_30 = "Task Assign", + Time_1_00 = "Lunch Break", + Time_1_30 = "Lunch Break", + Time_2_00 = "Lunch Break", + Time_2_30 = "Testing", + Time_3_00 = "Testing", + Time_3_30 = "Testing", + Time_4_00 = "Build", + Time_4_30 = "Build", + Time_5_00 = "Testing" + }); + return data; } - - 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/BtrSirixoAuQxHZe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Limitations The Column spanning is not compatible with the following features: 1. AutoFill. -2. Hierarchy-Grid. -3. Detail-Template. -4. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. +2. Detail-Template. +3. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (**caption row**). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. diff --git a/blazor/datagrid/row-spanning.md b/blazor/datagrid/row-spanning.md index c5d6f246ec..c2cff3d6a1 100644 --- a/blazor/datagrid/row-spanning.md +++ b/blazor/datagrid/row-spanning.md @@ -7,27 +7,26 @@ control: DataGrid documentation: ug --- -# Row Spanning in Blazor DataGrid +# Row spanning in Blazor DataGrid Row spanning in the Syncfusion Blazor DataGrid merges adjacent cells with identical values horizontally across columns within the same row. This feature reduces visual repetition and presents grouped data in a compact, readable format. It is particularly effective in scenarios where multiple columns share the same value, such as repeated product details or status indicators. -The functionality is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Row`. When activated, the grid evaluates each row and merges neighboring cells containing identical values, resulting in a single, wider cell. The merging process is automatic and declarative, requiring no manual logic or data transformation. +The functionality is enabled by setting the `AutoSpan` property of the `SfGrid` component to **AutoSpanMode.Row**. When activated, the grid evaluates each row and merges neighboring cells containing identical values, resulting in a single, wider cell. The merging process is automatic and declarative, requiring no manual logic or data transformation. -Row spanning is part of the broader `AutoSpanMode` enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include `None`, `Row`, `Column`, and `HorizontalAndVertical`. +Row spanning is part of the broader **AutoSpanMode** enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**. -## AutoSpanMode Enumeration +**AutoSpanMode Enumeration** | Enum Value | Description | |---------|-----| -| AutoSpanMode.None | Disables automatic cell spanning. Every cell remains isolated. (Default Mode) | -| AutoSpanMode.Row | Enables horizontal merging across columns within the same row. | -| AutoSpanMode.Column | Enables vertical merging of adjacent cells with identical values in the same column. | -| AutoSpanMode.HorizontalAndVertical | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. | +| **AutoSpanMode.None** | Disables automatic cell spanning. Every cell remains isolated. (Default Mode) | +| **AutoSpanMode.Row** | Enables horizontal merging across columns within the same row. | +| **AutoSpanMode.Column** | Enables vertical merging of adjacent cells with identical values in the same column. | +| **AutoSpanMode.HorizontalAndVertical** | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. | +## Enable row spanning -## Enabling Row Spanning - -Horizontal cell merging in the Syncfusion Blazor DataGrid is enabled by setting the `AutoSpan` property of the `SfGrid` component to `AutoSpanMode.Row`. In this mode, adjacent cells across columns within the same row are automatically merged when they contain identical values. This reduces redundancy and provides a cleaner, more compact presentation of repeated data. +Horizontal cell merging in the Syncfusion Blazor DataGrid is enabled by setting the `AutoSpan` property of the `SfGrid` component to **AutoSpanMode.Row**. In this mode, adjacent cells across columns within the same row are automatically merged when they contain identical values. This reduces redundancy and provides a cleaner, more compact presentation of repeated data. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -36,328 +35,444 @@ Horizontal cell merging in the Syncfusion Blazor DataGrid is enabled by setting @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Buttons - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + -@code { - private bool enableFrozen { get; set; } = true; - public List? EmployeeTimeSheet { get; set; } +@code +{ + public List? TeleCastDataList { get; set; } protected override void OnInitialized() { - EmployeeTimeSheet = EmployeeDetails.GetAllRecords(); + TeleCastDataList = TelecastData.GetTelecastData(); } - } {% endhighlight %} -{% highlight c# tabtitle="EmployeeDetails.cs" %} +{% highlight c# tabtitle="TelecastData.cs" %} -public class EmployeeDetails +public class TelecastData { - public EmployeeDetails() + public string Channel { get; set; } + public string Genre { get; set; } + public string Program12AM { get; set; } + public string Program1AM { get; set; } + public string Program2AM { get; set; } + public string Program3AM { get; set; } + public string Program4AM { get; set; } + public string Program5AM { get; set; } + public string Program6AM { get; set; } + public string Program7AM { get; set; } + public string Program8AM { get; set; } + public string Program9AM { get; set; } + public string Program10AM { get; set; } + public string Program11AM { get; set; } + public string Program12PM { get; set; } + public string Program1PM { get; set; } + public string Program2PM { get; set; } + public string Program3PM { get; set; } + public string Program4PM { get; set; } + public string Program5PM { get; set; } + public string Program6PM { get; set; } + public string Program7PM { get; set; } + public string Program8PM { get; set; } + public string Program9PM { get; set; } + public string Program10PM { get; set; } + public string Program11PM { get; set; } + + public static List GetTelecastData() { - } - public EmployeeDetails(int employeeid, string employeename, string time_9_00, string time_9_30, string time_10_00, string time_10_30, string time_11_00, string time_11_30, - string time_12_00, string time_12_30, string time_1_00, string time_1_30, string time_2_00, string time_2_30, string time_3_00, string time_3_30, string time_4_00, string time_4_30, - string time_5_00) - { - this.EmployeeID = employeeid; - this.EmployeeName = employeename; - this.Time_9_00 = time_9_00; - this.Time_9_00 = time_9_30; - this.Time_10_00 = time_10_00; - this.Time_10_30 = time_10_30; - this.Time_11_00 = time_11_00; - this.Time_11_30 = time_11_30; - this.Time_12_00 = time_12_00; - this.Time_12_30 = time_12_30; - this.Time_1_00 = time_1_00; - this.Time_1_30 = time_1_30; - this.Time_2_00 = time_2_00; - this.Time_2_30 = time_2_30; - this.Time_3_00 = time_3_00; - this.Time_3_30 = time_3_30; - this.Time_4_00 = time_4_00; - this.Time_4_30 = time_4_30; - this.Time_5_00 = time_5_00; - } - public int EmployeeID { get; set; } - public string? EmployeeName { get; set; } - public string? Time_9_00 { get; set; } - public string? Time_9_30 { get; set; } - public string? Time_10_00 { get; set; } - public string? Time_10_30 { get; set; } - public string? Time_11_00 { get; set; } - public string? Time_11_30 { get; set; } - public string? Time_12_00 { get; set; } - public string? Time_12_30 { get; set; } - public string? Time_1_00 { get; set; } - public string? Time_1_30 { get; set; } - public string? Time_2_00 { get; set; } - public string? Time_2_30 { get; set; } - public string? Time_3_00 { get; set; } - public string? Time_3_30 { get; set; } - public string? Time_4_00 { get; set; } - public string? Time_4_30 { get; set; } - public string? Time_5_00 { get; set; } - public static List GetAllRecords() - { - List data = new List(); - data.Add(new EmployeeDetails - { - EmployeeID = 10001, - EmployeeName = "Nancy Davolio", - Time_9_00 = "Analysis Tasks", - Time_9_30 = "Analysis Tasks", - Time_10_00 = "Team Meeting", - Time_10_30 = "Testing", - Time_11_00 = "Development", - Time_11_30 = "Code Review", - Time_12_00 = "Development", - Time_12_30 = "Support", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Testing", - Time_3_00 = "Testing", - Time_3_30 = "Development", - Time_4_00 = "Conference", - Time_4_30 = "Team Meeting", - Time_5_00 = "Team Meeting" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10002, - EmployeeName = "Steven Buchanan", - Time_9_00 = "Analysis Tasks", - Time_9_30 = "Support", - Time_10_00 = "Support", - Time_10_30 = "Support", - Time_11_00 = "Testing", - Time_11_30 = "Testing", - Time_12_00 = "Testing", - Time_12_30 = "Testing", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Code Review", - Time_3_00 = "Development", - Time_3_30 = "Documentation", - Time_4_00 = "Documentation", - Time_4_30 = "Team Meeting", - Time_5_00 = "Team Meeting" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10003, - EmployeeName = "Andrew Fuller", - Time_9_00 = "Documentation", - Time_9_30 = "Documentation", - Time_10_00 = "Documentation", - Time_10_30 = "Analysis Tasks", - Time_11_00 = "Analysis Tasks", - Time_11_30 = "Support", - Time_12_00 = "Support", - Time_12_30 = "Support", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Development", - Time_3_00 = "Development", - Time_3_30 = "Team Meeting", - Time_4_00 = "Team Meeting", - Time_4_30 = "Development", - Time_5_00 = "Development" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10004, - EmployeeName = "Janet Leverling", - Time_9_00 = "Testing", - Time_9_30 = "Documentation", - Time_10_00 = "Documentation", - Time_10_30 = "Support", - Time_11_00 = "Testing", - Time_11_30 = "Testing", - Time_12_00 = "Testing", - Time_12_30 = "Testing", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Development", - Time_3_00 = "Code Review", - Time_3_30 = "Documentation", - Time_4_00 = "Conference", - Time_4_30 = "Conference", - Time_5_00 = "Team Meeting" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10005, - EmployeeName = "Margaret Parker", - Time_9_00 = "Task Assign", - Time_9_30 = "Task Assign", - Time_10_00 = "Task Assign", - Time_10_30 = "Task Assign", - Time_11_00 = "Documentation", - Time_11_30 = "Support", - Time_12_00 = "Support", - Time_12_30 = "Support", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Development", - Time_3_00 = "Development", - Time_3_30 = "Team Meeting", - Time_4_00 = "Team Meeting", - Time_4_30 = "Testing", - Time_5_00 = "Testing" - }); - data.Add(new EmployeeDetails + return new List { - EmployeeID = 10006, - EmployeeName = "Janet King", - Time_9_00 = "Testing", - Time_9_30 = "Testing", - Time_10_00 = "Support", - Time_10_30 = "Support", - Time_11_00 = "Support", - Time_11_30 = "Team Meeting", - Time_12_00 = "Team Meeting", - Time_12_30 = "Team Meeting", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Development", - Time_3_00 = "Code Review", - Time_3_30 = "Team Meeting", - Time_4_00 = "Team Meeting", - Time_4_30 = "Development", - Time_5_00 = "Development" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10007, - EmployeeName = "Michael Suyama", - Time_9_00 = "Analysis Tasks", - Time_9_30 = "Analysis Tasks", - Time_10_00 = "Testing", - Time_10_30 = "Development", - Time_11_00 = "Development", - Time_11_30 = "Testing", - Time_12_00 = "Testing", - Time_12_30 = "Testing", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Support", - Time_3_00 = "Build", - Time_3_30 = "Build", - Time_4_00 = "Documentation", - Time_4_30 = "Documentation", - Time_5_00 = "Documentation" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10008, - EmployeeName = "Robert King", - Time_9_00 = "Task Assign", - Time_9_30 = "Task Assign", - Time_10_00 = "Task Assign", - Time_10_30 = "Development", - Time_11_00 = "Development", - Time_11_30 = "Development", - Time_12_00 = "Testing", - Time_12_30 = "Support", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Documentation", - Time_3_00 = "Documentation", - Time_3_30 = "Documentation", - Time_4_00 = "Team Meeting", - Time_4_30 = "Team Meeting", - Time_5_00 = "Build" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10009, - EmployeeName = "Andrew Callahan", - Time_9_00 = "Documentation", - Time_9_30 = "Team Meeting", - Time_10_00 = "Team Meeting", - Time_10_30 = "Support", - Time_11_00 = "Testing", - Time_11_30 = "Development", - Time_12_00 = "Development", - Time_12_30 = "Development", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Documentation", - Time_3_00 = "Documentation", - Time_3_30 = "Documentation", - Time_4_00 = "Team Meeting", - Time_4_30 = "Development", - Time_5_00 = "Development" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10010, - EmployeeName = "Michael Dodsworth", - Time_9_00 = "Task Assign", - Time_9_30 = "Task Assign", - Time_10_00 = "Task Assign", - Time_10_30 = "Analysis Tasks", - Time_11_00 = "Analysis Tasks", - Time_11_30 = "Testing", - Time_12_00 = "Build", - Time_12_30 = "Task Assign", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Testing", - Time_3_00 = "Testing", - Time_3_30 = "Testing", - Time_4_00 = "Build", - Time_4_30 = "Build", - Time_5_00 = "Testing" - }); - return data; + new TelecastData + { + Channel = "USA News Network", + Genre = "News", + Program12AM = "Late Night News", + Program1AM = "Overnight Brief", + Program2AM = "Overnight Brief", + Program3AM = "World Recap", + Program4AM = "Early Report", + Program5AM = "Morning Preview", + Program6AM = "Morning Dispatch", + Program7AM = "Daily Brief", + Program8AM = "National Update", + Program9AM = "National Update", + Program10AM = "Midday Report", + Program11AM = "Breaking Stories", + Program12PM = "Global Roundup", + Program1PM = "Current Affairs", + Program2PM = "News Desk", + Program3PM = "Afternoon Digest", + Program4PM = "City Beat", + Program5PM = "Evening News", + Program6PM = "Evening News", + Program7PM = "World Tonight", + Program8PM = "Prime Report", + Program9PM = "Nightly Brief", + Program10PM = "Late Edition", + Program11PM = "News Wrap" + }, + new TelecastData + { + Channel = "American News Channel", + Genre = "News", + Program12AM = "Midnight Update", + Program1AM = "Global Overnight", + Program2AM = "Global Overnight", + Program3AM = "News Replay", + Program4AM = "Dawn Dispatch", + Program5AM = "Business Early", + Program6AM = "Early Edition", + Program7AM = "Business Beat", + Program8AM = "National Update", + Program9AM = "National Update", + Program10AM = "In Focus", + Program11AM = "Market Pulse", + Program12PM = "News Today", + Program1PM = "World Matters", + Program2PM = "Regional Review", + Program3PM = "Evening Preview", + Program4PM = "Local Stories", + Program5PM = "Evening News", + Program6PM = "Evening News", + Program7PM = "Global Insight", + Program8PM = "Prime Focus", + Program9PM = "Night Desk", + Program10PM = "Late News", + Program11PM = "Final Report" + }, + new TelecastData + { + Channel = "Science Frontier TV", + Genre = "Science", + Program12AM = "Tech Rewind", + Program1AM = "Cosmic Replay", + Program2AM = "Cosmic Replay", + Program3AM = "Science Vault", + Program4AM = "Tech Bits", + Program5AM = "Nature Shorts", + Program6AM = "How It's Built", + Program7AM = "Nature Unveiled", + Program8AM = "Tech Titans", + Program9AM = "Future Innovators", + Program10AM = "Unknown Worlds", + Program11AM = "Planet Secrets", + Program12PM = "Tomorrow's Tech", + Program1PM = "Space Frontiers", + Program2PM = "Myth Crackers", + Program3PM = "Cosmic Discoveries", + Program4PM = "Tech Lab", + Program5PM = "Science Now", + Program6PM = "Innovate Today", + Program7PM = "Future Worlds", + Program8PM = "Star Explorers", + Program9PM = "Tech Deep Dive", + Program10PM = "Science Spotlight", + Program11PM = "Night Lab" + }, + new TelecastData + { + Channel = "Explore America", + Genre = "Science", + Program12AM = "Wild Nights", + Program1AM = "Explorer Vault", + Program2AM = "Explorer Vault", + Program3AM = "Hidden Gems", + Program4AM = "Wild Shorts", + Program5AM = "Nature Dawn", + Program6AM = "Wild Expeditions", + Program7AM = "American Wilderness", + Program8AM = "Tech Titans", + Program9AM = "Future Innovators", + Program10AM = "Hidden Histories", + Program11AM = "Mega Projects", + Program12PM = "Great Minds", + Program1PM = "Beyond Earth", + Program2PM = "Star Journey", + Program3PM = "Unique Planet", + Program4PM = "Adventure Now", + Program5PM = "Wild America", + Program6PM = "Explorer's Log", + Program7PM = "Nature Quest", + Program8PM = "Epic Journeys", + Program9PM = "Lost Worlds", + Program10PM = "Planet Stories", + Program11PM = "Night Trek" + }, + new TelecastData + { + Channel = "Silver Screen Network", + Genre = "Movies", + Program12AM = "Movie", + Program1AM = "Movie", + Program2AM = "Movie", + Program3AM = "Late Classic", + Program4AM = "Late Classic", + Program5AM = "Early Feature", + Program6AM = "Shadow of Truth", + Program7AM = "Shadow of Truth", + Program8AM = "Shadow of Truth", + Program9AM = "Power Play", + Program10AM = "Power Play", + Program11AM = "Power Play", + Program12PM = "Power Play", + Program1PM = "City Vigilante", + Program2PM = "City Vigilante", + Program3PM = "City Vigilante", + Program4PM = "Hero Saga", + Program5PM = "Hero Saga", + Program6PM = "Prime Movie", + Program7PM = "Prime Movie", + Program8PM = "Blockbuster Night", + Program9PM = "Blockbuster Night", + Program10PM = "Late Show", + Program11PM = "Late Show" + }, + new TelecastData + { + Channel = "Sports USA", + Genre = "Sports", + Program12AM = "Sports Replay", + Program1AM = "Game Highlights", + Program2AM = "Game Highlights", + Program3AM = "Sports Vault", + Program4AM = "Early Recap", + Program5AM = "Morning Warmup", + Program6AM = "Morning Kickoff", + Program7AM = "Football Classics", + Program8AM = "Live Game Day", + Program9AM = "Live Game Day", + Program10AM = "Top Plays", + Program11AM = "Sports Talk", + Program12PM = "Hoops Highlights", + Program1PM = "Game Plan", + Program2PM = "Sports Roundup", + Program3PM = "NFL Breakdown", + Program4PM = "Sports Desk", + Program5PM = "Live Coverage", + Program6PM = "Game Night", + Program7PM = "Prime Sports", + Program8PM = "Big Match", + Program9PM = "Sports Wrap", + Program10PM = "Late Game", + Program11PM = "Night Recap" + }, + new TelecastData + { + Channel = "All Sports Network", + Genre = "Sports", + Program12AM = "Late Highlights", + Program1AM = "Sports Classics", + Program2AM = "Sports Classics", + Program3AM = "Game Rewind", + Program4AM = "Early Games", + Program5AM = "Sports Warmup", + Program6AM = "Morning Kickoff", + Program7AM = "Classic Matchups", + Program8AM = "Live Game Day", + Program9AM = "Live Game Day", + Program10AM = "Top Plays", + Program11AM = "Sports Talk", + Program12PM = "Baseball Recap", + Program1PM = "Game Plan", + Program2PM = "Sports Roundup", + Program3PM = "Soccer Highlights", + Program4PM = "Sports Central", + Program5PM = "Live Action", + Program6PM = "Prime Match", + Program7PM = "Sports Night", + Program8PM = "Big Game", + Program9PM = "Game Recap", + Program10PM = "Late Sports", + Program11PM = "Final Score" + }, + new TelecastData + { + Channel = "Kids Fun Zone", + Genre = "Kids", + Program12AM = "Cartoon Rewind", + Program1AM = "Late Toons", + Program2AM = "Late Toons", + Program3AM = "Kid Classics", + Program4AM = "Kid Classics", + Program5AM = "Early Toons", + Program6AM = "Adventure Pals", + Program7AM = "Super Heroes", + Program8AM = "Super Heroes", + Program9AM = "Super Heroes", + Program10AM = "Mystery Crew", + Program11AM = "Funny Chase", + Program12PM = "Cartoon Craze", + Program1PM = "Quest Buddies", + Program2PM = "Quest Buddies", + Program3PM = "Team Turbo", + Program4PM = "Fun Factory", + Program5PM = "Kid Quest", + Program6PM = "Toon Time", + Program7PM = "Family Flicks", + Program8PM = "Adventure Hour", + Program9PM = "Night Toons", + Program10PM = "Night Toons", + Program11PM = "Sleepy Stories" + }, + new TelecastData + { + Channel = "Family Playhouse", + Genre = "Kids", + Program12AM = "Late Kid Show", + Program1AM = "Moonlit Tales", + Program2AM = "Moonlit Tales", + Program3AM = "Classic Cartoons", + Program4AM = "Classic Cartoons", + Program5AM = "Morning Pals", + Program6AM = "Little Explorers", + Program7AM = "Rescue Pals", + Program8AM = "House of Laughs", + Program9AM = "House of Laughs", + Program10AM = "Mystery Crew", + Program11AM = "Magic Wishes", + Program12PM = "Teen Spotlight", + Program1PM = "Ocean Adventures", + Program2PM = "Ocean Adventures", + Program3PM = "Rescue Pals", + Program4PM = "Family Fun", + Program5PM = "Kid Adventures", + Program6PM = "Toon Party", + Program7PM = "Family Time", + Program8PM = "Magic Hour", + Program9PM = "Evening Toons", + Program10PM = "Evening Toons", + Program11PM = "Bedtime Tales" + }, + new TelecastData + { + Channel = "Magic Youth TV", + Genre = "Kids", + Program12AM = "Midnight Toons", + Program1AM = "Starlight Stories", + Program2AM = "Starlight Stories", + Program3AM = "Toon Vault", + Program4AM = "Toon Vault", + Program5AM = "Early Adventures", + Program6AM = "Mouse Playhouse", + Program7AM = "City Kids", + Program8AM = "Mystery Town", + Program9AM = "Mystery Town", + Program10AM = "Mystery Crew", + Program11AM = "Witch Cottage", + Program12PM = "Swamp Tales", + Program1PM = "Stepbrothers", + Program2PM = "Stepbrothers", + Program3PM = "City Kids", + Program4PM = "Youth Quest", + Program5PM = "Fun Tales", + Program6PM = "Cartoon Club", + Program7PM = "Kid Heroes", + Program8PM = "Magic Night", + Program9PM = "Toon Dreams", + Program10PM = "Toon Dreams", + Program11PM = "Night Stories" + }, + new TelecastData + { + Channel = "Wild America TV", + Genre = "Wildlife", + Program12AM = "Night Creatures", + Program1AM = "Wild Rewind", + Program2AM = "Wild Rewind", + Program3AM = "Animal Vault", + Program4AM = "Nature Clips", + Program5AM = "Wild Dawn", + Program6AM = "Nature Guide", + Program7AM = "Wild Trails", + Program8AM = "Predator Watch", + Program9AM = "Predator Watch", + Program10AM = "Ocean Titans", + Program11AM = "Safari Quest", + Program12PM = "Big Beasts", + Program1PM = "Night Safari", + Program2PM = "Night Safari", + Program3PM = "Nature Guide", + Program4PM = "Wild Tracks", + Program5PM = "Animal Planet", + Program6PM = "Safari Nights", + Program7PM = "Wild World", + Program8PM = "Beast Hunters", + Program9PM = "Nature Nights", + Program10PM = "Wild Chronicles", + Program11PM = "Night Beasts" + }, + new TelecastData + { + Channel = "Earth Discovery", + Genre = "Nature", + Program12AM = "Planet Replay", + Program1AM = "Earth After Dark", + Program2AM = "Earth After Dark", + Program3AM = "Nature Classics", + Program4AM = "Earth Early", + Program5AM = "Dawn Planet", + Program6AM = "Planet Wonders", + Program7AM = "Frozen Lands", + Program8AM = "Life on Earth", + Program9AM = "Life on Earth", + Program10AM = "Blue Seas", + Program11AM = "Nature Marvels", + Program12PM = "Earth Insights", + Program1PM = "Night Safari", + Program2PM = "Night Safari", + Program3PM = "Planet Wonders", + Program4PM = "Eco Quest", + Program5PM = "Nature Now", + Program6PM = "Planet Pulse", + Program7PM = "Earth Stories", + Program8PM = "Wild Horizons", + Program9PM = "Nature Deep", + Program10PM = "Earth Night", + Program11PM = "Planet Recap" + } + }; } } {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBoChWHeiPSwUHb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Disable spanning for specific column -Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level by setting the `AutoSpan` property of the `GridColumn` component to `AutoSpanMode.None`. This configuration provides fine-grained control, allowing automatic spanning to be applied globally while excluding specific columns where merging is not desired. +Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level by setting the `AutoSpan` property of the `GridColumn` component to **AutoSpanMode.None**. This configuration provides fine-grained control, allowing automatic spanning to be applied globally while excluding specific columns where merging is not desired. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -366,330 +481,446 @@ Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level b @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Buttons - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + -@code { - private bool enableFrozen { get; set; } = true; - public List? EmployeeTimeSheet { get; set; } +@code +{ + public List? TeleCastDataList { get; set; } protected override void OnInitialized() { - EmployeeTimeSheet = EmployeeDetails.GetAllRecords(); + TeleCastDataList = TelecastData.GetTelecastData(); } - } {% endhighlight %} -{% highlight c# tabtitle="EmployeeDetails.cs" %} +{% highlight c# tabtitle="TelecastData.cs" %} -public class EmployeeDetails +public class TelecastData { - public EmployeeDetails() - { - } - public EmployeeDetails(int employeeid, string employeename, string time_9_00, string time_9_30, string time_10_00, string time_10_30, string time_11_00, string time_11_30, - string time_12_00, string time_12_30, string time_1_00, string time_1_30, string time_2_00, string time_2_30, string time_3_00, string time_3_30, string time_4_00, string time_4_30, - string time_5_00) - { - this.EmployeeID = employeeid; - this.EmployeeName = employeename; - this.Time_9_00 = time_9_00; - this.Time_9_00 = time_9_30; - this.Time_10_00 = time_10_00; - this.Time_10_30 = time_10_30; - this.Time_11_00 = time_11_00; - this.Time_11_30 = time_11_30; - this.Time_12_00 = time_12_00; - this.Time_12_30 = time_12_30; - this.Time_1_00 = time_1_00; - this.Time_1_30 = time_1_30; - this.Time_2_00 = time_2_00; - this.Time_2_30 = time_2_30; - this.Time_3_00 = time_3_00; - this.Time_3_30 = time_3_30; - this.Time_4_00 = time_4_00; - this.Time_4_30 = time_4_30; - this.Time_5_00 = time_5_00; - } - public int EmployeeID { get; set; } - public string? EmployeeName { get; set; } - public string? Time_9_00 { get; set; } - public string? Time_9_30 { get; set; } - public string? Time_10_00 { get; set; } - public string? Time_10_30 { get; set; } - public string? Time_11_00 { get; set; } - public string? Time_11_30 { get; set; } - public string? Time_12_00 { get; set; } - public string? Time_12_30 { get; set; } - public string? Time_1_00 { get; set; } - public string? Time_1_30 { get; set; } - public string? Time_2_00 { get; set; } - public string? Time_2_30 { get; set; } - public string? Time_3_00 { get; set; } - public string? Time_3_30 { get; set; } - public string? Time_4_00 { get; set; } - public string? Time_4_30 { get; set; } - public string? Time_5_00 { get; set; } - public static List GetAllRecords() + public string Channel { get; set; } + public string Genre { get; set; } + public string Program12AM { get; set; } + public string Program1AM { get; set; } + public string Program2AM { get; set; } + public string Program3AM { get; set; } + public string Program4AM { get; set; } + public string Program5AM { get; set; } + public string Program6AM { get; set; } + public string Program7AM { get; set; } + public string Program8AM { get; set; } + public string Program9AM { get; set; } + public string Program10AM { get; set; } + public string Program11AM { get; set; } + public string Program12PM { get; set; } + public string Program1PM { get; set; } + public string Program2PM { get; set; } + public string Program3PM { get; set; } + public string Program4PM { get; set; } + public string Program5PM { get; set; } + public string Program6PM { get; set; } + public string Program7PM { get; set; } + public string Program8PM { get; set; } + public string Program9PM { get; set; } + public string Program10PM { get; set; } + public string Program11PM { get; set; } + + public static List GetTelecastData() { - List data = new List(); - data.Add(new EmployeeDetails - { - EmployeeID = 10001, - EmployeeName = "Nancy Davolio", - Time_9_00 = "Analysis Tasks", - Time_9_30 = "Analysis Tasks", - Time_10_00 = "Team Meeting", - Time_10_30 = "Testing", - Time_11_00 = "Development", - Time_11_30 = "Code Review", - Time_12_00 = "Development", - Time_12_30 = "Support", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Testing", - Time_3_00 = "Testing", - Time_3_30 = "Development", - Time_4_00 = "Conference", - Time_4_30 = "Team Meeting", - Time_5_00 = "Team Meeting" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10002, - EmployeeName = "Steven Buchanan", - Time_9_00 = "Analysis Tasks", - Time_9_30 = "Support", - Time_10_00 = "Support", - Time_10_30 = "Support", - Time_11_00 = "Testing", - Time_11_30 = "Testing", - Time_12_00 = "Testing", - Time_12_30 = "Testing", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Code Review", - Time_3_00 = "Development", - Time_3_30 = "Documentation", - Time_4_00 = "Documentation", - Time_4_30 = "Team Meeting", - Time_5_00 = "Team Meeting" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10003, - EmployeeName = "Andrew Fuller", - Time_9_00 = "Documentation", - Time_9_30 = "Documentation", - Time_10_00 = "Documentation", - Time_10_30 = "Analysis Tasks", - Time_11_00 = "Analysis Tasks", - Time_11_30 = "Support", - Time_12_00 = "Support", - Time_12_30 = "Support", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Development", - Time_3_00 = "Development", - Time_3_30 = "Team Meeting", - Time_4_00 = "Team Meeting", - Time_4_30 = "Development", - Time_5_00 = "Development" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10004, - EmployeeName = "Janet Leverling", - Time_9_00 = "Testing", - Time_9_30 = "Documentation", - Time_10_00 = "Documentation", - Time_10_30 = "Support", - Time_11_00 = "Testing", - Time_11_30 = "Testing", - Time_12_00 = "Testing", - Time_12_30 = "Testing", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Development", - Time_3_00 = "Code Review", - Time_3_30 = "Documentation", - Time_4_00 = "Conference", - Time_4_30 = "Conference", - Time_5_00 = "Team Meeting" - }); - data.Add(new EmployeeDetails + return new List { - EmployeeID = 10005, - EmployeeName = "Margaret Parker", - Time_9_00 = "Task Assign", - Time_9_30 = "Task Assign", - Time_10_00 = "Task Assign", - Time_10_30 = "Task Assign", - Time_11_00 = "Documentation", - Time_11_30 = "Support", - Time_12_00 = "Support", - Time_12_30 = "Support", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Development", - Time_3_00 = "Development", - Time_3_30 = "Team Meeting", - Time_4_00 = "Team Meeting", - Time_4_30 = "Testing", - Time_5_00 = "Testing" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10006, - EmployeeName = "Janet King", - Time_9_00 = "Testing", - Time_9_30 = "Testing", - Time_10_00 = "Support", - Time_10_30 = "Support", - Time_11_00 = "Support", - Time_11_30 = "Team Meeting", - Time_12_00 = "Team Meeting", - Time_12_30 = "Team Meeting", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Development", - Time_3_00 = "Code Review", - Time_3_30 = "Team Meeting", - Time_4_00 = "Team Meeting", - Time_4_30 = "Development", - Time_5_00 = "Development" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10007, - EmployeeName = "Michael Suyama", - Time_9_00 = "Analysis Tasks", - Time_9_30 = "Analysis Tasks", - Time_10_00 = "Testing", - Time_10_30 = "Development", - Time_11_00 = "Development", - Time_11_30 = "Testing", - Time_12_00 = "Testing", - Time_12_30 = "Testing", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Support", - Time_3_00 = "Build", - Time_3_30 = "Build", - Time_4_00 = "Documentation", - Time_4_30 = "Documentation", - Time_5_00 = "Documentation" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10008, - EmployeeName = "Robert King", - Time_9_00 = "Task Assign", - Time_9_30 = "Task Assign", - Time_10_00 = "Task Assign", - Time_10_30 = "Development", - Time_11_00 = "Development", - Time_11_30 = "Development", - Time_12_00 = "Testing", - Time_12_30 = "Support", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Documentation", - Time_3_00 = "Documentation", - Time_3_30 = "Documentation", - Time_4_00 = "Team Meeting", - Time_4_30 = "Team Meeting", - Time_5_00 = "Build" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10009, - EmployeeName = "Andrew Callahan", - Time_9_00 = "Documentation", - Time_9_30 = "Team Meeting", - Time_10_00 = "Team Meeting", - Time_10_30 = "Support", - Time_11_00 = "Testing", - Time_11_30 = "Development", - Time_12_00 = "Development", - Time_12_30 = "Development", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Documentation", - Time_3_00 = "Documentation", - Time_3_30 = "Documentation", - Time_4_00 = "Team Meeting", - Time_4_30 = "Development", - Time_5_00 = "Development" - }); - data.Add(new EmployeeDetails - { - EmployeeID = 10010, - EmployeeName = "Michael Dodsworth", - Time_9_00 = "Task Assign", - Time_9_30 = "Task Assign", - Time_10_00 = "Task Assign", - Time_10_30 = "Analysis Tasks", - Time_11_00 = "Analysis Tasks", - Time_11_30 = "Testing", - Time_12_00 = "Build", - Time_12_30 = "Task Assign", - Time_1_00 = "Lunch Break", - Time_1_30 = "Lunch Break", - Time_2_00 = "Lunch Break", - Time_2_30 = "Testing", - Time_3_00 = "Testing", - Time_3_30 = "Testing", - Time_4_00 = "Build", - Time_4_30 = "Build", - Time_5_00 = "Testing" - }); - return data; + new TelecastData + { + Channel = "USA News Network", + Genre = "News", + Program12AM = "Late Night News", + Program1AM = "Overnight Brief", + Program2AM = "Overnight Brief", + Program3AM = "World Recap", + Program4AM = "Early Report", + Program5AM = "Morning Preview", + Program6AM = "Morning Dispatch", + Program7AM = "Daily Brief", + Program8AM = "National Update", + Program9AM = "National Update", + Program10AM = "Midday Report", + Program11AM = "Breaking Stories", + Program12PM = "Global Roundup", + Program1PM = "Current Affairs", + Program2PM = "News Desk", + Program3PM = "Afternoon Digest", + Program4PM = "City Beat", + Program5PM = "Evening News", + Program6PM = "Evening News", + Program7PM = "World Tonight", + Program8PM = "Prime Report", + Program9PM = "Nightly Brief", + Program10PM = "Late Edition", + Program11PM = "News Wrap" + }, + new TelecastData + { + Channel = "American News Channel", + Genre = "News", + Program12AM = "Midnight Update", + Program1AM = "Global Overnight", + Program2AM = "Global Overnight", + Program3AM = "News Replay", + Program4AM = "Dawn Dispatch", + Program5AM = "Business Early", + Program6AM = "Early Edition", + Program7AM = "Business Beat", + Program8AM = "National Update", + Program9AM = "National Update", + Program10AM = "In Focus", + Program11AM = "Market Pulse", + Program12PM = "News Today", + Program1PM = "World Matters", + Program2PM = "Regional Review", + Program3PM = "Evening Preview", + Program4PM = "Local Stories", + Program5PM = "Evening News", + Program6PM = "Evening News", + Program7PM = "Global Insight", + Program8PM = "Prime Focus", + Program9PM = "Night Desk", + Program10PM = "Late News", + Program11PM = "Final Report" + }, + new TelecastData + { + Channel = "Science Frontier TV", + Genre = "Science", + Program12AM = "Tech Rewind", + Program1AM = "Cosmic Replay", + Program2AM = "Cosmic Replay", + Program3AM = "Science Vault", + Program4AM = "Tech Bits", + Program5AM = "Nature Shorts", + Program6AM = "How It's Built", + Program7AM = "Nature Unveiled", + Program8AM = "Tech Titans", + Program9AM = "Future Innovators", + Program10AM = "Unknown Worlds", + Program11AM = "Planet Secrets", + Program12PM = "Tomorrow's Tech", + Program1PM = "Space Frontiers", + Program2PM = "Myth Crackers", + Program3PM = "Cosmic Discoveries", + Program4PM = "Tech Lab", + Program5PM = "Science Now", + Program6PM = "Innovate Today", + Program7PM = "Future Worlds", + Program8PM = "Star Explorers", + Program9PM = "Tech Deep Dive", + Program10PM = "Science Spotlight", + Program11PM = "Night Lab" + }, + new TelecastData + { + Channel = "Explore America", + Genre = "Science", + Program12AM = "Wild Nights", + Program1AM = "Explorer Vault", + Program2AM = "Explorer Vault", + Program3AM = "Hidden Gems", + Program4AM = "Wild Shorts", + Program5AM = "Nature Dawn", + Program6AM = "Wild Expeditions", + Program7AM = "American Wilderness", + Program8AM = "Tech Titans", + Program9AM = "Future Innovators", + Program10AM = "Hidden Histories", + Program11AM = "Mega Projects", + Program12PM = "Great Minds", + Program1PM = "Beyond Earth", + Program2PM = "Star Journey", + Program3PM = "Unique Planet", + Program4PM = "Adventure Now", + Program5PM = "Wild America", + Program6PM = "Explorer's Log", + Program7PM = "Nature Quest", + Program8PM = "Epic Journeys", + Program9PM = "Lost Worlds", + Program10PM = "Planet Stories", + Program11PM = "Night Trek" + }, + new TelecastData + { + Channel = "Silver Screen Network", + Genre = "Movies", + Program12AM = "Movie", + Program1AM = "Movie", + Program2AM = "Movie", + Program3AM = "Late Classic", + Program4AM = "Late Classic", + Program5AM = "Early Feature", + Program6AM = "Shadow of Truth", + Program7AM = "Shadow of Truth", + Program8AM = "Shadow of Truth", + Program9AM = "Power Play", + Program10AM = "Power Play", + Program11AM = "Power Play", + Program12PM = "Power Play", + Program1PM = "City Vigilante", + Program2PM = "City Vigilante", + Program3PM = "City Vigilante", + Program4PM = "Hero Saga", + Program5PM = "Hero Saga", + Program6PM = "Prime Movie", + Program7PM = "Prime Movie", + Program8PM = "Blockbuster Night", + Program9PM = "Blockbuster Night", + Program10PM = "Late Show", + Program11PM = "Late Show" + }, + new TelecastData + { + Channel = "Sports USA", + Genre = "Sports", + Program12AM = "Sports Replay", + Program1AM = "Game Highlights", + Program2AM = "Game Highlights", + Program3AM = "Sports Vault", + Program4AM = "Early Recap", + Program5AM = "Morning Warmup", + Program6AM = "Morning Kickoff", + Program7AM = "Football Classics", + Program8AM = "Live Game Day", + Program9AM = "Live Game Day", + Program10AM = "Top Plays", + Program11AM = "Sports Talk", + Program12PM = "Hoops Highlights", + Program1PM = "Game Plan", + Program2PM = "Sports Roundup", + Program3PM = "NFL Breakdown", + Program4PM = "Sports Desk", + Program5PM = "Live Coverage", + Program6PM = "Game Night", + Program7PM = "Prime Sports", + Program8PM = "Big Match", + Program9PM = "Sports Wrap", + Program10PM = "Late Game", + Program11PM = "Night Recap" + }, + new TelecastData + { + Channel = "All Sports Network", + Genre = "Sports", + Program12AM = "Late Highlights", + Program1AM = "Sports Classics", + Program2AM = "Sports Classics", + Program3AM = "Game Rewind", + Program4AM = "Early Games", + Program5AM = "Sports Warmup", + Program6AM = "Morning Kickoff", + Program7AM = "Classic Matchups", + Program8AM = "Live Game Day", + Program9AM = "Live Game Day", + Program10AM = "Top Plays", + Program11AM = "Sports Talk", + Program12PM = "Baseball Recap", + Program1PM = "Game Plan", + Program2PM = "Sports Roundup", + Program3PM = "Soccer Highlights", + Program4PM = "Sports Central", + Program5PM = "Live Action", + Program6PM = "Prime Match", + Program7PM = "Sports Night", + Program8PM = "Big Game", + Program9PM = "Game Recap", + Program10PM = "Late Sports", + Program11PM = "Final Score" + }, + new TelecastData + { + Channel = "Kids Fun Zone", + Genre = "Kids", + Program12AM = "Cartoon Rewind", + Program1AM = "Late Toons", + Program2AM = "Late Toons", + Program3AM = "Kid Classics", + Program4AM = "Kid Classics", + Program5AM = "Early Toons", + Program6AM = "Adventure Pals", + Program7AM = "Super Heroes", + Program8AM = "Super Heroes", + Program9AM = "Super Heroes", + Program10AM = "Mystery Crew", + Program11AM = "Funny Chase", + Program12PM = "Cartoon Craze", + Program1PM = "Quest Buddies", + Program2PM = "Quest Buddies", + Program3PM = "Team Turbo", + Program4PM = "Fun Factory", + Program5PM = "Kid Quest", + Program6PM = "Toon Time", + Program7PM = "Family Flicks", + Program8PM = "Adventure Hour", + Program9PM = "Night Toons", + Program10PM = "Night Toons", + Program11PM = "Sleepy Stories" + }, + new TelecastData + { + Channel = "Family Playhouse", + Genre = "Kids", + Program12AM = "Late Kid Show", + Program1AM = "Moonlit Tales", + Program2AM = "Moonlit Tales", + Program3AM = "Classic Cartoons", + Program4AM = "Classic Cartoons", + Program5AM = "Morning Pals", + Program6AM = "Little Explorers", + Program7AM = "Rescue Pals", + Program8AM = "House of Laughs", + Program9AM = "House of Laughs", + Program10AM = "Mystery Crew", + Program11AM = "Magic Wishes", + Program12PM = "Teen Spotlight", + Program1PM = "Ocean Adventures", + Program2PM = "Ocean Adventures", + Program3PM = "Rescue Pals", + Program4PM = "Family Fun", + Program5PM = "Kid Adventures", + Program6PM = "Toon Party", + Program7PM = "Family Time", + Program8PM = "Magic Hour", + Program9PM = "Evening Toons", + Program10PM = "Evening Toons", + Program11PM = "Bedtime Tales" + }, + new TelecastData + { + Channel = "Magic Youth TV", + Genre = "Kids", + Program12AM = "Midnight Toons", + Program1AM = "Starlight Stories", + Program2AM = "Starlight Stories", + Program3AM = "Toon Vault", + Program4AM = "Toon Vault", + Program5AM = "Early Adventures", + Program6AM = "Mouse Playhouse", + Program7AM = "City Kids", + Program8AM = "Mystery Town", + Program9AM = "Mystery Town", + Program10AM = "Mystery Crew", + Program11AM = "Witch Cottage", + Program12PM = "Swamp Tales", + Program1PM = "Stepbrothers", + Program2PM = "Stepbrothers", + Program3PM = "City Kids", + Program4PM = "Youth Quest", + Program5PM = "Fun Tales", + Program6PM = "Cartoon Club", + Program7PM = "Kid Heroes", + Program8PM = "Magic Night", + Program9PM = "Toon Dreams", + Program10PM = "Toon Dreams", + Program11PM = "Night Stories" + }, + new TelecastData + { + Channel = "Wild America TV", + Genre = "Wildlife", + Program12AM = "Night Creatures", + Program1AM = "Wild Rewind", + Program2AM = "Wild Rewind", + Program3AM = "Animal Vault", + Program4AM = "Nature Clips", + Program5AM = "Wild Dawn", + Program6AM = "Nature Guide", + Program7AM = "Wild Trails", + Program8AM = "Predator Watch", + Program9AM = "Predator Watch", + Program10AM = "Ocean Titans", + Program11AM = "Safari Quest", + Program12PM = "Big Beasts", + Program1PM = "Night Safari", + Program2PM = "Night Safari", + Program3PM = "Nature Guide", + Program4PM = "Wild Tracks", + Program5PM = "Animal Planet", + Program6PM = "Safari Nights", + Program7PM = "Wild World", + Program8PM = "Beast Hunters", + Program9PM = "Nature Nights", + Program10PM = "Wild Chronicles", + Program11PM = "Night Beasts" + }, + new TelecastData + { + Channel = "Earth Discovery", + Genre = "Nature", + Program12AM = "Planet Replay", + Program1AM = "Earth After Dark", + Program2AM = "Earth After Dark", + Program3AM = "Nature Classics", + Program4AM = "Earth Early", + Program5AM = "Dawn Planet", + Program6AM = "Planet Wonders", + Program7AM = "Frozen Lands", + Program8AM = "Life on Earth", + Program9AM = "Life on Earth", + Program10AM = "Blue Seas", + Program11AM = "Nature Marvels", + Program12PM = "Earth Insights", + Program1PM = "Night Safari", + Program2PM = "Night Safari", + Program3PM = "Planet Wonders", + Program4PM = "Eco Quest", + Program5PM = "Nature Now", + Program6PM = "Planet Pulse", + Program7PM = "Earth Stories", + Program8PM = "Wild Horizons", + Program9PM = "Nature Deep", + Program10PM = "Earth Night", + Program11PM = "Planet Recap" + } + }; } } {% endhighlight %} {% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXByMVixeXvnPXRS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level `AutoSpan` modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns. -### Complete Combination Matrix +**Complete Combination Matrix** | Grid AutoSpan | Column AutoSpan | Effective Behavior | |---|---|---| @@ -712,22 +943,24 @@ The effective spanning behavior in the Syncfusion Blazor DataGrid is determined --- -## Applying Row Spanning via programmatically +## Apply row spanning via programmatically In addition to automatic cell merging, the Syncfusion Blazor DataGrid provides API support for manually merging cells when custom layout behavior is required. This functionality is available through the `MergeCellsAsync` method, which enables the definition of rectangular regions of cells to be merged programmatically. Use `MergeCellsAsync` method to manually merge cells by defining rectangular regions. This method supports both single and batch merging, allowing precise control over layout customization when automatic spanning is insufficient. +The `MergeCellsAsync` method is overloaded, meaning multiple versions of the same method name exist, but each accepts different parameter types to handle different use cases. This approach provides flexibility while maintaining a consistent API design. + | Parameter | Type | Description | |-----------|------|-------------| | info | `MergeCellInfo` | Defines a single rectangular cell region to be merged. | | infos | `IEnumerable` | Specifies multiple cell regions to be merged in a batch operation. Each region is defined by a `MergeCellInfo` instance. | -To define a merged region, use the following properties of the MergeCellInfo class, +To define a merged region, use the following properties of the `MergeCellInfo` class, | Property | Type | Description | |--------------|------|-----------------------------------------------------------------------------| -| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | +| RowIndex | int | The zero-based index of the anchor row. | | ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | | RowSpan | int (optional) | The number of rows to span, starting from the anchor cell. By default set to 1. | | ColumnSpan | int (optional) | The number of columns to span, starting from the anchor cell. By default set to 1. | @@ -736,29 +969,60 @@ To define a merged region, use the following properties of the MergeCellInfo cla {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Buttons - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + @code { - private SfGrid Grid; - public List Orders { get; set; } + public List? TeleCastDataList { get; set; } + public SfGrid? Grid { get; set; } + + protected override void OnInitialized() + { + TeleCastDataList = TelecastData.GetTelecastData(); + } public async Task MergeCellsAsync() { await Grid.MergeCellsAsync(new MergeCellInfo { RowIndex = 1, - ColumnIndex = 1, + ColumnIndex = 4, RowSpan = 2, }); } @@ -767,105 +1031,430 @@ To define a merged region, use the following properties of the MergeCellInfo cla { await Grid.MergeCellsAsync(new[] { - new MergeCellInfo { RowIndex = 0, ColumnIndex = 0, RowSpan = 2 }, + new MergeCellInfo { RowIndex = 0, ColumnIndex = 3, RowSpan = 2 }, new MergeCellInfo { RowIndex = 5, ColumnIndex = 2, RowSpan = 3 }, - new MergeCellInfo { RowIndex = 7, ColumnIndex = 1, RowSpan = 2 } + new MergeCellInfo { RowIndex = 7, ColumnIndex = 3, RowSpan = 2 } }); } - - protected override void OnInitialized() - { - Orders = Order.GetAllRecords(); - } } + {% endhighlight %} -{% highlight c# tabtitle="Order.cs" %} +{% highlight c# tabtitle="TelecastData.cs" %} -public class Order +public class TelecastData { - public static List OrdersList = new List(); - - public Order() { } - - public Order(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + public string Channel { get; set; } + public string Genre { get; set; } + public string Program12AM { get; set; } + public string Program1AM { get; set; } + public string Program2AM { get; set; } + public string Program3AM { get; set; } + public string Program4AM { get; set; } + public string Program5AM { get; set; } + public string Program6AM { get; set; } + public string Program7AM { get; set; } + public string Program8AM { get; set; } + public string Program9AM { get; set; } + public string Program10AM { get; set; } + public string Program11AM { get; set; } + public string Program12PM { get; set; } + public string Program1PM { get; set; } + public string Program2PM { get; set; } + public string Program3PM { get; set; } + public string Program4PM { get; set; } + public string Program5PM { get; set; } + public string Program6PM { get; set; } + public string Program7PM { get; set; } + public string Program8PM { get; set; } + public string Program9PM { get; set; } + public string Program10PM { get; set; } + public string Program11PM { get; set; } + + public static List GetTelecastData() { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.OrderDate = OrderDate; - this.Freight = Freight; - } - - public static List GetAllRecords() - { - if (OrdersList.Count == 0) + return new List { - OrdersList = new List() - { - new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, - new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, - new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, - new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, - new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, - new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, - new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, - new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, - new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, - new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, - new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, - new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, - new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, - new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, - new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, - new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, - new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, - new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, - new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, - new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, - new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, - new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, - new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, - new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, - new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, - new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, - new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, - new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, - new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, - new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } - }; - } - return OrdersList; + new TelecastData + { + Channel = "USA News Network", + Genre = "News", + Program12AM = "Late Night News", + Program1AM = "Overnight Brief", + Program2AM = "Overnight Brief", + Program3AM = "World Recap", + Program4AM = "Early Report", + Program5AM = "Morning Preview", + Program6AM = "Morning Dispatch", + Program7AM = "Daily Brief", + Program8AM = "National Update", + Program9AM = "National Update", + Program10AM = "Midday Report", + Program11AM = "Breaking Stories", + Program12PM = "Global Roundup", + Program1PM = "Current Affairs", + Program2PM = "News Desk", + Program3PM = "Afternoon Digest", + Program4PM = "City Beat", + Program5PM = "Evening News", + Program6PM = "Evening News", + Program7PM = "World Tonight", + Program8PM = "Prime Report", + Program9PM = "Nightly Brief", + Program10PM = "Late Edition", + Program11PM = "News Wrap" + }, + new TelecastData + { + Channel = "American News Channel", + Genre = "News", + Program12AM = "Midnight Update", + Program1AM = "Global Overnight", + Program2AM = "Global Overnight", + Program3AM = "News Replay", + Program4AM = "Dawn Dispatch", + Program5AM = "Business Early", + Program6AM = "Early Edition", + Program7AM = "Business Beat", + Program8AM = "National Update", + Program9AM = "National Update", + Program10AM = "In Focus", + Program11AM = "Market Pulse", + Program12PM = "News Today", + Program1PM = "World Matters", + Program2PM = "Regional Review", + Program3PM = "Evening Preview", + Program4PM = "Local Stories", + Program5PM = "Evening News", + Program6PM = "Evening News", + Program7PM = "Global Insight", + Program8PM = "Prime Focus", + Program9PM = "Night Desk", + Program10PM = "Late News", + Program11PM = "Final Report" + }, + new TelecastData + { + Channel = "Science Frontier TV", + Genre = "Science", + Program12AM = "Tech Rewind", + Program1AM = "Cosmic Replay", + Program2AM = "Cosmic Replay", + Program3AM = "Science Vault", + Program4AM = "Tech Bits", + Program5AM = "Nature Shorts", + Program6AM = "How It's Built", + Program7AM = "Nature Unveiled", + Program8AM = "Tech Titans", + Program9AM = "Future Innovators", + Program10AM = "Unknown Worlds", + Program11AM = "Planet Secrets", + Program12PM = "Tomorrow's Tech", + Program1PM = "Space Frontiers", + Program2PM = "Myth Crackers", + Program3PM = "Cosmic Discoveries", + Program4PM = "Tech Lab", + Program5PM = "Science Now", + Program6PM = "Innovate Today", + Program7PM = "Future Worlds", + Program8PM = "Star Explorers", + Program9PM = "Tech Deep Dive", + Program10PM = "Science Spotlight", + Program11PM = "Night Lab" + }, + new TelecastData + { + Channel = "Explore America", + Genre = "Science", + Program12AM = "Wild Nights", + Program1AM = "Explorer Vault", + Program2AM = "Explorer Vault", + Program3AM = "Hidden Gems", + Program4AM = "Wild Shorts", + Program5AM = "Nature Dawn", + Program6AM = "Wild Expeditions", + Program7AM = "American Wilderness", + Program8AM = "Tech Titans", + Program9AM = "Future Innovators", + Program10AM = "Hidden Histories", + Program11AM = "Mega Projects", + Program12PM = "Great Minds", + Program1PM = "Beyond Earth", + Program2PM = "Star Journey", + Program3PM = "Unique Planet", + Program4PM = "Adventure Now", + Program5PM = "Wild America", + Program6PM = "Explorer's Log", + Program7PM = "Nature Quest", + Program8PM = "Epic Journeys", + Program9PM = "Lost Worlds", + Program10PM = "Planet Stories", + Program11PM = "Night Trek" + }, + new TelecastData + { + Channel = "Silver Screen Network", + Genre = "Movies", + Program12AM = "Movie", + Program1AM = "Movie", + Program2AM = "Movie", + Program3AM = "Late Classic", + Program4AM = "Late Classic", + Program5AM = "Early Feature", + Program6AM = "Shadow of Truth", + Program7AM = "Shadow of Truth", + Program8AM = "Shadow of Truth", + Program9AM = "Power Play", + Program10AM = "Power Play", + Program11AM = "Power Play", + Program12PM = "Power Play", + Program1PM = "City Vigilante", + Program2PM = "City Vigilante", + Program3PM = "City Vigilante", + Program4PM = "Hero Saga", + Program5PM = "Hero Saga", + Program6PM = "Prime Movie", + Program7PM = "Prime Movie", + Program8PM = "Blockbuster Night", + Program9PM = "Blockbuster Night", + Program10PM = "Late Show", + Program11PM = "Late Show" + }, + new TelecastData + { + Channel = "Sports USA", + Genre = "Sports", + Program12AM = "Sports Replay", + Program1AM = "Game Highlights", + Program2AM = "Game Highlights", + Program3AM = "Sports Vault", + Program4AM = "Early Recap", + Program5AM = "Morning Warmup", + Program6AM = "Morning Kickoff", + Program7AM = "Football Classics", + Program8AM = "Live Game Day", + Program9AM = "Live Game Day", + Program10AM = "Top Plays", + Program11AM = "Sports Talk", + Program12PM = "Hoops Highlights", + Program1PM = "Game Plan", + Program2PM = "Sports Roundup", + Program3PM = "NFL Breakdown", + Program4PM = "Sports Desk", + Program5PM = "Live Coverage", + Program6PM = "Game Night", + Program7PM = "Prime Sports", + Program8PM = "Big Match", + Program9PM = "Sports Wrap", + Program10PM = "Late Game", + Program11PM = "Night Recap" + }, + new TelecastData + { + Channel = "All Sports Network", + Genre = "Sports", + Program12AM = "Late Highlights", + Program1AM = "Sports Classics", + Program2AM = "Sports Classics", + Program3AM = "Game Rewind", + Program4AM = "Early Games", + Program5AM = "Sports Warmup", + Program6AM = "Morning Kickoff", + Program7AM = "Classic Matchups", + Program8AM = "Live Game Day", + Program9AM = "Live Game Day", + Program10AM = "Top Plays", + Program11AM = "Sports Talk", + Program12PM = "Baseball Recap", + Program1PM = "Game Plan", + Program2PM = "Sports Roundup", + Program3PM = "Soccer Highlights", + Program4PM = "Sports Central", + Program5PM = "Live Action", + Program6PM = "Prime Match", + Program7PM = "Sports Night", + Program8PM = "Big Game", + Program9PM = "Game Recap", + Program10PM = "Late Sports", + Program11PM = "Final Score" + }, + new TelecastData + { + Channel = "Kids Fun Zone", + Genre = "Kids", + Program12AM = "Cartoon Rewind", + Program1AM = "Late Toons", + Program2AM = "Late Toons", + Program3AM = "Kid Classics", + Program4AM = "Kid Classics", + Program5AM = "Early Toons", + Program6AM = "Adventure Pals", + Program7AM = "Super Heroes", + Program8AM = "Super Heroes", + Program9AM = "Super Heroes", + Program10AM = "Mystery Crew", + Program11AM = "Funny Chase", + Program12PM = "Cartoon Craze", + Program1PM = "Quest Buddies", + Program2PM = "Quest Buddies", + Program3PM = "Team Turbo", + Program4PM = "Fun Factory", + Program5PM = "Kid Quest", + Program6PM = "Toon Time", + Program7PM = "Family Flicks", + Program8PM = "Adventure Hour", + Program9PM = "Night Toons", + Program10PM = "Night Toons", + Program11PM = "Sleepy Stories" + }, + new TelecastData + { + Channel = "Family Playhouse", + Genre = "Kids", + Program12AM = "Late Kid Show", + Program1AM = "Moonlit Tales", + Program2AM = "Moonlit Tales", + Program3AM = "Classic Cartoons", + Program4AM = "Classic Cartoons", + Program5AM = "Morning Pals", + Program6AM = "Little Explorers", + Program7AM = "Rescue Pals", + Program8AM = "House of Laughs", + Program9AM = "House of Laughs", + Program10AM = "Mystery Crew", + Program11AM = "Magic Wishes", + Program12PM = "Teen Spotlight", + Program1PM = "Ocean Adventures", + Program2PM = "Ocean Adventures", + Program3PM = "Rescue Pals", + Program4PM = "Family Fun", + Program5PM = "Kid Adventures", + Program6PM = "Toon Party", + Program7PM = "Family Time", + Program8PM = "Magic Hour", + Program9PM = "Evening Toons", + Program10PM = "Evening Toons", + Program11PM = "Bedtime Tales" + }, + new TelecastData + { + Channel = "Magic Youth TV", + Genre = "Kids", + Program12AM = "Midnight Toons", + Program1AM = "Starlight Stories", + Program2AM = "Starlight Stories", + Program3AM = "Toon Vault", + Program4AM = "Toon Vault", + Program5AM = "Early Adventures", + Program6AM = "Mouse Playhouse", + Program7AM = "City Kids", + Program8AM = "Mystery Town", + Program9AM = "Mystery Town", + Program10AM = "Mystery Crew", + Program11AM = "Witch Cottage", + Program12PM = "Swamp Tales", + Program1PM = "Stepbrothers", + Program2PM = "Stepbrothers", + Program3PM = "City Kids", + Program4PM = "Youth Quest", + Program5PM = "Fun Tales", + Program6PM = "Cartoon Club", + Program7PM = "Kid Heroes", + Program8PM = "Magic Night", + Program9PM = "Toon Dreams", + Program10PM = "Toon Dreams", + Program11PM = "Night Stories" + }, + new TelecastData + { + Channel = "Wild America TV", + Genre = "Wildlife", + Program12AM = "Night Creatures", + Program1AM = "Wild Rewind", + Program2AM = "Wild Rewind", + Program3AM = "Animal Vault", + Program4AM = "Nature Clips", + Program5AM = "Wild Dawn", + Program6AM = "Nature Guide", + Program7AM = "Wild Trails", + Program8AM = "Predator Watch", + Program9AM = "Predator Watch", + Program10AM = "Ocean Titans", + Program11AM = "Safari Quest", + Program12PM = "Big Beasts", + Program1PM = "Night Safari", + Program2PM = "Night Safari", + Program3PM = "Nature Guide", + Program4PM = "Wild Tracks", + Program5PM = "Animal Planet", + Program6PM = "Safari Nights", + Program7PM = "Wild World", + Program8PM = "Beast Hunters", + Program9PM = "Nature Nights", + Program10PM = "Wild Chronicles", + Program11PM = "Night Beasts" + }, + new TelecastData + { + Channel = "Earth Discovery", + Genre = "Nature", + Program12AM = "Planet Replay", + Program1AM = "Earth After Dark", + Program2AM = "Earth After Dark", + Program3AM = "Nature Classics", + Program4AM = "Earth Early", + Program5AM = "Dawn Planet", + Program6AM = "Planet Wonders", + Program7AM = "Frozen Lands", + Program8AM = "Life on Earth", + Program9AM = "Life on Earth", + Program10AM = "Blue Seas", + Program11AM = "Nature Marvels", + Program12PM = "Earth Insights", + Program1PM = "Night Safari", + Program2PM = "Night Safari", + Program3PM = "Planet Wonders", + Program4PM = "Eco Quest", + Program5PM = "Nature Now", + Program6PM = "Planet Pulse", + Program7PM = "Earth Stories", + Program8PM = "Wild Horizons", + Program9PM = "Nature Deep", + Program10PM = "Earth Night", + Program11PM = "Planet Recap" + } + }; } - - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } } {% endhighlight %} {% endtabs %} -## Clearing Spanning via programmatically +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrIsLWHIWcXcUwy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Clear spanning via programmatically The Syncfusion Blazor DataGrid provides API support to manually remove merged regions when restoration of individual cells is required. This functionality is achieved using the `UnmergeCellsAsync` methods, which allow specific merged areas to be unmerged programmatically. For scenarios where all merged regions in the current view need to be reset, the `UnmergeAllAsync` method can be used to restore every cell to its original state. +The `UnmergeCellsAsync` method is overloaded to provide flexibility for different scenarios. Both overloads share the same method name but accept different parameter types, allowing removal of either a single merged region or multiple merged regions in one operation. + | Method | Parameter | Type | Description | |--------|-----------|------|-------------| | `UnmergeCellsAsync` | info | `UnmergeCellInfo` | Removes a single merged area identified by its anchor cell (top‑left of the merged region). | | `UnmergeCellsAsync` | infos | `IEnumerable` | Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. | | `UnmergeAllAsync` | – | – | Removes all merged regions in the current view, restoring every cell to its original state. | -To identify a merged region, use the following properties of the UnmergeCellInfo class: +To identify a merged region, use the following properties of the `UnmergeCellInfo` class: | Property | Type | Description | |--------------|------|-----------------------------------------------------------------------------| -| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). | +| RowIndex | int | The zero-based index of the anchor row. | | ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Buttons Merge Cell @@ -876,25 +1465,53 @@ To identify a merged region, use the following properties of the UnmergeCellInfo UnMerge All Cells - + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + - -@code +@code { - private SfGrid Grid; - public List Orders { get; set; } + public List? TeleCastDataList { get; set; } + public SfGrid? Grid { get; set; } + + protected override void OnInitialized() + { + TeleCastDataList = TelecastData.GetTelecastData(); + } public async Task MergeCellsAsync() { await Grid.MergeCellsAsync(new MergeCellInfo { RowIndex = 1, - ColumnIndex = 1, + ColumnIndex = 2, RowSpan = 2, }); } @@ -904,7 +1521,7 @@ To identify a merged region, use the following properties of the UnmergeCellInfo await Grid.UnmergeCellsAsync(new UnmergeCellInfo { RowIndex = 1, - ColumnIndex = 1, + ColumnIndex = 2, }); } @@ -913,8 +1530,8 @@ To identify a merged region, use the following properties of the UnmergeCellInfo await Grid.MergeCellsAsync(new[] { new MergeCellInfo { RowIndex = 0, ColumnIndex = 0, RowSpan = 2 }, - new MergeCellInfo { RowIndex = 5, ColumnIndex = 2, RowSpan = 3 }, - new MergeCellInfo { RowIndex = 7, ColumnIndex = 1, RowSpan = 2 } + new MergeCellInfo { RowIndex = 6, ColumnIndex = 2, RowSpan = 3 }, + new MergeCellInfo { RowIndex = 8, ColumnIndex = 1, RowSpan = 2 } }); } @@ -923,8 +1540,8 @@ To identify a merged region, use the following properties of the UnmergeCellInfo await Grid.UnmergeCellsAsync(new[] { new UnmergeCellInfo { RowIndex = 0, ColumnIndex = 0 }, - new UnmergeCellInfo { RowIndex = 5, ColumnIndex = 2 }, - new UnmergeCellInfo { RowIndex = 7, ColumnIndex = 1 } + new UnmergeCellInfo { RowIndex = 6, ColumnIndex = 2 }, + new UnmergeCellInfo { RowIndex = 8, ColumnIndex = 1 } }); } @@ -932,84 +1549,405 @@ To identify a merged region, use the following properties of the UnmergeCellInfo { await Grid.UnmergeAllAsync(); } - - protected override void OnInitialized() - { - Orders = Order.GetAllRecords(); - } } {% endhighlight %} {% highlight c# tabtitle="Order.cs" %} -public class Order +public class TelecastData { - public static List OrdersList = new List(); - - public Order() { } - - public Order(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + public string Channel { get; set; } + public string Genre { get; set; } + public string Program12AM { get; set; } + public string Program1AM { get; set; } + public string Program2AM { get; set; } + public string Program3AM { get; set; } + public string Program4AM { get; set; } + public string Program5AM { get; set; } + public string Program6AM { get; set; } + public string Program7AM { get; set; } + public string Program8AM { get; set; } + public string Program9AM { get; set; } + public string Program10AM { get; set; } + public string Program11AM { get; set; } + public string Program12PM { get; set; } + public string Program1PM { get; set; } + public string Program2PM { get; set; } + public string Program3PM { get; set; } + public string Program4PM { get; set; } + public string Program5PM { get; set; } + public string Program6PM { get; set; } + public string Program7PM { get; set; } + public string Program8PM { get; set; } + public string Program9PM { get; set; } + public string Program10PM { get; set; } + public string Program11PM { get; set; } + + public static List GetTelecastData() { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.OrderDate = OrderDate; - this.Freight = Freight; - } - - public static List GetAllRecords() - { - if (OrdersList.Count == 0) + return new List { - OrdersList = new List() - { - new Order { OrderID = 1, CustomerID = "ALFKI", Freight = 23.45 }, - new Order { OrderID = 2, CustomerID = "ANATR", Freight = 15.60 }, - new Order { OrderID = 3, CustomerID = "ANTON", Freight = 42.10 }, - new Order { OrderID = 4, CustomerID = "AROUT", Freight = 18.75 }, - new Order { OrderID = 5, CustomerID = "BERGS", Freight = 33.20 }, - new Order { OrderID = 6, CustomerID = "BLAUS", Freight = 27.50 }, - new Order { OrderID = 7, CustomerID = "BLONP", Freight = 12.90 }, - new Order { OrderID = 8, CustomerID = "BOLID", Freight = 25.00 }, - new Order { OrderID = 9, CustomerID = "BONAP", Freight = 19.40 }, - new Order { OrderID = 10, CustomerID = "BOTTM", Freight = 30.10 }, - new Order { OrderID = 11, CustomerID = "BSBEV", Freight = 22.80 }, - new Order { OrderID = 12, CustomerID = "CACTU", Freight = 14.60 }, - new Order { OrderID = 13, CustomerID = "CENTC", Freight = 28.90 }, - new Order { OrderID = 14, CustomerID = "CHOPS", Freight = 35.25 }, - new Order { OrderID = 15, CustomerID = "COMMI", Freight = 40.00 }, - new Order { OrderID = 16, CustomerID = "CONSH", Freight = 21.70 }, - new Order { OrderID = 17, CustomerID = "DRACD", Freight = 17.30 }, - new Order { OrderID = 18, CustomerID = "DUMON", Freight = 29.50 }, - new Order { OrderID = 19, CustomerID = "EASTC", Freight = 24.80 }, - new Order { OrderID = 20, CustomerID = "ERNSH", Freight = 31.60 }, - new Order { OrderID = 21, CustomerID = "FAMIA", Freight = 26.40 }, - new Order { OrderID = 22, CustomerID = "FISSA", Freight = 13.75 }, - new Order { OrderID = 23, CustomerID = "FOLKO", Freight = 36.90 }, - new Order { OrderID = 24, CustomerID = "FRANK", Freight = 20.50 }, - new Order { OrderID = 25, CustomerID = "FRANR", Freight = 27.80 }, - new Order { OrderID = 26, CustomerID = "FRANS", Freight = 32.40 }, - new Order { OrderID = 27, CustomerID = "FURIB", Freight = 15.90 }, - new Order { OrderID = 28, CustomerID = "GALED", Freight = 23.70 }, - new Order { OrderID = 29, CustomerID = "GODOS", Freight = 38.20 }, - new Order { OrderID = 30, CustomerID = "GOURL", Freight = 19.95 } - }; - } - return OrdersList; + new TelecastData + { + Channel = "USA News Network", + Genre = "News", + Program12AM = "Late Night News", + Program1AM = "Overnight Brief", + Program2AM = "Overnight Brief", + Program3AM = "World Recap", + Program4AM = "Early Report", + Program5AM = "Morning Preview", + Program6AM = "Morning Dispatch", + Program7AM = "Daily Brief", + Program8AM = "National Update", + Program9AM = "National Update", + Program10AM = "Midday Report", + Program11AM = "Breaking Stories", + Program12PM = "Global Roundup", + Program1PM = "Current Affairs", + Program2PM = "News Desk", + Program3PM = "Afternoon Digest", + Program4PM = "City Beat", + Program5PM = "Evening News", + Program6PM = "Evening News", + Program7PM = "World Tonight", + Program8PM = "Prime Report", + Program9PM = "Nightly Brief", + Program10PM = "Late Edition", + Program11PM = "News Wrap" + }, + new TelecastData + { + Channel = "American News Channel", + Genre = "News", + Program12AM = "Midnight Update", + Program1AM = "Global Overnight", + Program2AM = "Global Overnight", + Program3AM = "News Replay", + Program4AM = "Dawn Dispatch", + Program5AM = "Business Early", + Program6AM = "Early Edition", + Program7AM = "Business Beat", + Program8AM = "National Update", + Program9AM = "National Update", + Program10AM = "In Focus", + Program11AM = "Market Pulse", + Program12PM = "News Today", + Program1PM = "World Matters", + Program2PM = "Regional Review", + Program3PM = "Evening Preview", + Program4PM = "Local Stories", + Program5PM = "Evening News", + Program6PM = "Evening News", + Program7PM = "Global Insight", + Program8PM = "Prime Focus", + Program9PM = "Night Desk", + Program10PM = "Late News", + Program11PM = "Final Report" + }, + new TelecastData + { + Channel = "Science Frontier TV", + Genre = "Science", + Program12AM = "Tech Rewind", + Program1AM = "Cosmic Replay", + Program2AM = "Cosmic Replay", + Program3AM = "Science Vault", + Program4AM = "Tech Bits", + Program5AM = "Nature Shorts", + Program6AM = "How It's Built", + Program7AM = "Nature Unveiled", + Program8AM = "Tech Titans", + Program9AM = "Future Innovators", + Program10AM = "Unknown Worlds", + Program11AM = "Planet Secrets", + Program12PM = "Tomorrow's Tech", + Program1PM = "Space Frontiers", + Program2PM = "Myth Crackers", + Program3PM = "Cosmic Discoveries", + Program4PM = "Tech Lab", + Program5PM = "Science Now", + Program6PM = "Innovate Today", + Program7PM = "Future Worlds", + Program8PM = "Star Explorers", + Program9PM = "Tech Deep Dive", + Program10PM = "Science Spotlight", + Program11PM = "Night Lab" + }, + new TelecastData + { + Channel = "Explore America", + Genre = "Science", + Program12AM = "Wild Nights", + Program1AM = "Explorer Vault", + Program2AM = "Explorer Vault", + Program3AM = "Hidden Gems", + Program4AM = "Wild Shorts", + Program5AM = "Nature Dawn", + Program6AM = "Wild Expeditions", + Program7AM = "American Wilderness", + Program8AM = "Tech Titans", + Program9AM = "Future Innovators", + Program10AM = "Hidden Histories", + Program11AM = "Mega Projects", + Program12PM = "Great Minds", + Program1PM = "Beyond Earth", + Program2PM = "Star Journey", + Program3PM = "Unique Planet", + Program4PM = "Adventure Now", + Program5PM = "Wild America", + Program6PM = "Explorer's Log", + Program7PM = "Nature Quest", + Program8PM = "Epic Journeys", + Program9PM = "Lost Worlds", + Program10PM = "Planet Stories", + Program11PM = "Night Trek" + }, + new TelecastData + { + Channel = "Silver Screen Network", + Genre = "Movies", + Program12AM = "Movie", + Program1AM = "Movie", + Program2AM = "Movie", + Program3AM = "Late Classic", + Program4AM = "Late Classic", + Program5AM = "Early Feature", + Program6AM = "Shadow of Truth", + Program7AM = "Shadow of Truth", + Program8AM = "Shadow of Truth", + Program9AM = "Power Play", + Program10AM = "Power Play", + Program11AM = "Power Play", + Program12PM = "Power Play", + Program1PM = "City Vigilante", + Program2PM = "City Vigilante", + Program3PM = "City Vigilante", + Program4PM = "Hero Saga", + Program5PM = "Hero Saga", + Program6PM = "Prime Movie", + Program7PM = "Prime Movie", + Program8PM = "Blockbuster Night", + Program9PM = "Blockbuster Night", + Program10PM = "Late Show", + Program11PM = "Late Show" + }, + new TelecastData + { + Channel = "Sports USA", + Genre = "Sports", + Program12AM = "Sports Replay", + Program1AM = "Game Highlights", + Program2AM = "Game Highlights", + Program3AM = "Sports Vault", + Program4AM = "Early Recap", + Program5AM = "Morning Warmup", + Program6AM = "Morning Kickoff", + Program7AM = "Football Classics", + Program8AM = "Live Game Day", + Program9AM = "Live Game Day", + Program10AM = "Top Plays", + Program11AM = "Sports Talk", + Program12PM = "Hoops Highlights", + Program1PM = "Game Plan", + Program2PM = "Sports Roundup", + Program3PM = "NFL Breakdown", + Program4PM = "Sports Desk", + Program5PM = "Live Coverage", + Program6PM = "Game Night", + Program7PM = "Prime Sports", + Program8PM = "Big Match", + Program9PM = "Sports Wrap", + Program10PM = "Late Game", + Program11PM = "Night Recap" + }, + new TelecastData + { + Channel = "All Sports Network", + Genre = "Sports", + Program12AM = "Late Highlights", + Program1AM = "Sports Classics", + Program2AM = "Sports Classics", + Program3AM = "Game Rewind", + Program4AM = "Early Games", + Program5AM = "Sports Warmup", + Program6AM = "Morning Kickoff", + Program7AM = "Classic Matchups", + Program8AM = "Live Game Day", + Program9AM = "Live Game Day", + Program10AM = "Top Plays", + Program11AM = "Sports Talk", + Program12PM = "Baseball Recap", + Program1PM = "Game Plan", + Program2PM = "Sports Roundup", + Program3PM = "Soccer Highlights", + Program4PM = "Sports Central", + Program5PM = "Live Action", + Program6PM = "Prime Match", + Program7PM = "Sports Night", + Program8PM = "Big Game", + Program9PM = "Game Recap", + Program10PM = "Late Sports", + Program11PM = "Final Score" + }, + new TelecastData + { + Channel = "Kids Fun Zone", + Genre = "Kids", + Program12AM = "Cartoon Rewind", + Program1AM = "Late Toons", + Program2AM = "Late Toons", + Program3AM = "Kid Classics", + Program4AM = "Kid Classics", + Program5AM = "Early Toons", + Program6AM = "Adventure Pals", + Program7AM = "Super Heroes", + Program8AM = "Super Heroes", + Program9AM = "Super Heroes", + Program10AM = "Mystery Crew", + Program11AM = "Funny Chase", + Program12PM = "Cartoon Craze", + Program1PM = "Quest Buddies", + Program2PM = "Quest Buddies", + Program3PM = "Team Turbo", + Program4PM = "Fun Factory", + Program5PM = "Kid Quest", + Program6PM = "Toon Time", + Program7PM = "Family Flicks", + Program8PM = "Adventure Hour", + Program9PM = "Night Toons", + Program10PM = "Night Toons", + Program11PM = "Sleepy Stories" + }, + new TelecastData + { + Channel = "Family Playhouse", + Genre = "Kids", + Program12AM = "Late Kid Show", + Program1AM = "Moonlit Tales", + Program2AM = "Moonlit Tales", + Program3AM = "Classic Cartoons", + Program4AM = "Classic Cartoons", + Program5AM = "Morning Pals", + Program6AM = "Little Explorers", + Program7AM = "Rescue Pals", + Program8AM = "House of Laughs", + Program9AM = "House of Laughs", + Program10AM = "Mystery Crew", + Program11AM = "Magic Wishes", + Program12PM = "Teen Spotlight", + Program1PM = "Ocean Adventures", + Program2PM = "Ocean Adventures", + Program3PM = "Rescue Pals", + Program4PM = "Family Fun", + Program5PM = "Kid Adventures", + Program6PM = "Toon Party", + Program7PM = "Family Time", + Program8PM = "Magic Hour", + Program9PM = "Evening Toons", + Program10PM = "Evening Toons", + Program11PM = "Bedtime Tales" + }, + new TelecastData + { + Channel = "Magic Youth TV", + Genre = "Kids", + Program12AM = "Midnight Toons", + Program1AM = "Starlight Stories", + Program2AM = "Starlight Stories", + Program3AM = "Toon Vault", + Program4AM = "Toon Vault", + Program5AM = "Early Adventures", + Program6AM = "Mouse Playhouse", + Program7AM = "City Kids", + Program8AM = "Mystery Town", + Program9AM = "Mystery Town", + Program10AM = "Mystery Crew", + Program11AM = "Witch Cottage", + Program12PM = "Swamp Tales", + Program1PM = "Stepbrothers", + Program2PM = "Stepbrothers", + Program3PM = "City Kids", + Program4PM = "Youth Quest", + Program5PM = "Fun Tales", + Program6PM = "Cartoon Club", + Program7PM = "Kid Heroes", + Program8PM = "Magic Night", + Program9PM = "Toon Dreams", + Program10PM = "Toon Dreams", + Program11PM = "Night Stories" + }, + new TelecastData + { + Channel = "Wild America TV", + Genre = "Wildlife", + Program12AM = "Night Creatures", + Program1AM = "Wild Rewind", + Program2AM = "Wild Rewind", + Program3AM = "Animal Vault", + Program4AM = "Nature Clips", + Program5AM = "Wild Dawn", + Program6AM = "Nature Guide", + Program7AM = "Wild Trails", + Program8AM = "Predator Watch", + Program9AM = "Predator Watch", + Program10AM = "Ocean Titans", + Program11AM = "Safari Quest", + Program12PM = "Big Beasts", + Program1PM = "Night Safari", + Program2PM = "Night Safari", + Program3PM = "Nature Guide", + Program4PM = "Wild Tracks", + Program5PM = "Animal Planet", + Program6PM = "Safari Nights", + Program7PM = "Wild World", + Program8PM = "Beast Hunters", + Program9PM = "Nature Nights", + Program10PM = "Wild Chronicles", + Program11PM = "Night Beasts" + }, + new TelecastData + { + Channel = "Earth Discovery", + Genre = "Nature", + Program12AM = "Planet Replay", + Program1AM = "Earth After Dark", + Program2AM = "Earth After Dark", + Program3AM = "Nature Classics", + Program4AM = "Earth Early", + Program5AM = "Dawn Planet", + Program6AM = "Planet Wonders", + Program7AM = "Frozen Lands", + Program8AM = "Life on Earth", + Program9AM = "Life on Earth", + Program10AM = "Blue Seas", + Program11AM = "Nature Marvels", + Program12PM = "Earth Insights", + Program1PM = "Night Safari", + Program2PM = "Night Safari", + Program3PM = "Planet Wonders", + Program4PM = "Eco Quest", + Program5PM = "Nature Now", + Program6PM = "Planet Pulse", + Program7PM = "Earth Stories", + Program8PM = "Wild Horizons", + Program9PM = "Nature Deep", + Program10PM = "Earth Night", + Program11PM = "Planet Recap" + } + }; } - - 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/hZryMVWdoMJJubZh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + ## Limitations The Row spanning is not compatible with the following features: 1. Autofill. -2. Inline Editing. -3. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. -4. Frozen Grid – When the `Freeze` property is set to `FreezeDirection.Fixed`, the concerned column will not be included for row spanning. +2. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. +3. Frozen Grid – When the `Freeze` property is set to `FreezeDirection.Fixed`, the concerned column will not be included for row spanning. From b4a636f596a5c4faccbc2a1300b1ea4ce80a1313 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Wed, 17 Dec 2025 13:08:18 +0530 Subject: [PATCH 08/10] 998591 : ColumnSpanning Final Changes --- blazor/datagrid/column-spanning.md | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md index 692cf9ee67..e76bcf915e 100644 --- a/blazor/datagrid/column-spanning.md +++ b/blazor/datagrid/column-spanning.md @@ -15,11 +15,9 @@ The functionality is enabled by setting the `AutoSpan` property of the `SfGrid` Column spanning is part of the broader `AutoSpanMode` enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**. -**AutoSpanMode Enumeration** - | Enum Value | Description | |---------|-----| -| AutoSpanMode.None | Disables automatic cell spanning. Every cell remains isolated. (Default Mode) | +| AutoSpanMode.None | Disables automatic cell spanning so every cell remains isolated (Default Mode). | | AutoSpanMode.Row | Enables horizontal merging across columns within the same row. | | AutoSpanMode.Column | Enables vertical merging of adjacent cells with identical values in the same column. | | AutoSpanMode.HorizontalAndVertical | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. | @@ -41,7 +39,7 @@ Vertical cell merging in the Syncfusion Blazor DataGrid is enabled by setting th AutoSpan="AutoSpanMode.Column" AllowSelection="false" EnableHover="false"> - + @@ -62,7 +60,6 @@ Vertical cell merging in the Syncfusion Blazor DataGrid is enabled by setting th @code { - private bool enableFrozen { get; set; } = true; public List? EmployeeTimeSheet { get; set; } protected override void OnInitialized() @@ -357,7 +354,7 @@ public class EmployeeDetails ## Disable column spanning for specific column -Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific column by setting the `AutoSpan` property of the `GridColumn` component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding columns where merging is not required. +Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific column(s) by setting the `AutoSpan` property of the `GridColumn` component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding column(s) where merging is not required. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -370,7 +367,7 @@ Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific col AutoSpan="AutoSpanMode.Column" AllowSelection="false" EnableHover="false"> - + @@ -392,7 +389,7 @@ Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific col @code { - private bool enableFrozen { get; set; } = true; + public List? EmployeeTimeSheet { get; set; } protected override void OnInitialized() @@ -685,16 +682,16 @@ public class EmployeeDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBSshCRIKBMHUsU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level `AutoSpan` modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns. +The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level `AutoSpan` modes. A column can only restrict the spanning directions permitted at the grid-level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns. -**Complete combination matrix** +**Combination Matrix** | Grid AutoSpan | Column AutoSpan | Effective Behavior | |---|---|---| | None | None | No spanning. Both grid and column explicitly disable spanning. | -| None | Row | No spanning. Grid-level None overrides column-level Row. | -| None | Column | No spanning. Grid-level None overrides column-level Column. | -| None | HorizontalAndVertical | No spanning. Grid-level None overrides all spanning modes. | +| None | Row | No spanning. Grid-level **None** overrides column-level **Row**. | +| None | Column | No spanning. Grid-level **None** overrides column-level **Column**. | +| None | HorizontalAndVertical | No spanning. Grid-level **None** overrides all spanning modes. | | Row | None | No spanning. Column explicitly disables spanning. | | Row | Row | Row spanning only. Both grid and column enable row spanning. | | Row | Column | No spanning. Grid only allows row spanning; column cannot enable column spanning. | @@ -747,7 +744,7 @@ To define a merged region, use the following properties of the `MergeCellInfo` c - + @@ -770,7 +767,6 @@ To define a merged region, use the following properties of the `MergeCellInfo` c @code { - private bool enableFrozen { get; set; } = true; public List? EmployeeTimeSheet { get; set; } public SfGrid? Grid; @@ -1120,7 +1116,7 @@ To identify a merged region, use the following properties of the `UnmergeCellInf - + @@ -1142,7 +1138,6 @@ To identify a merged region, use the following properties of the `UnmergeCellInf @code { - private bool enableFrozen { get; set; } = true; public List? EmployeeTimeSheet { get; set; } public SfGrid? Grid; From 538241b1c700735ebe519ce56809fa6d8a69dcc6 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Wed, 17 Dec 2025 14:00:02 +0530 Subject: [PATCH 09/10] 998591 : Final changes for row-spanning --- blazor/datagrid/row-spanning.md | 37 +++++++++++++++------------------ 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/blazor/datagrid/row-spanning.md b/blazor/datagrid/row-spanning.md index c2cff3d6a1..30f085af70 100644 --- a/blazor/datagrid/row-spanning.md +++ b/blazor/datagrid/row-spanning.md @@ -1,13 +1,13 @@ --- layout: post title: Row Spanning in Blazor DataGrid Component | Syncfusion -description: Learn how to use the row spanning in Syncfusion Blazor DataGrid. +description: Learn here all about row spanning in Syncfusion Blazor DataGrid component of Syncfusion Essential Studio and more. platform: Blazor control: DataGrid documentation: ug --- -# Row spanning in Blazor DataGrid +# Row Spanning in Blazor DataGrid Row spanning in the Syncfusion Blazor DataGrid merges adjacent cells with identical values horizontally across columns within the same row. This feature reduces visual repetition and presents grouped data in a compact, readable format. It is particularly effective in scenarios where multiple columns share the same value, such as repeated product details or status indicators. @@ -15,14 +15,12 @@ The functionality is enabled by setting the `AutoSpan` property of the `SfGrid` Row spanning is part of the broader **AutoSpanMode** enumeration, which provides multiple options for customizing cell merging behavior in the Syncfusion Blazor DataGrid. The available modes include **None**, **Row**, **Column**, and **HorizontalAndVertical**. -**AutoSpanMode Enumeration** - | Enum Value | Description | |---------|-----| -| **AutoSpanMode.None** | Disables automatic cell spanning. Every cell remains isolated. (Default Mode) | -| **AutoSpanMode.Row** | Enables horizontal merging across columns within the same row. | -| **AutoSpanMode.Column** | Enables vertical merging of adjacent cells with identical values in the same column. | -| **AutoSpanMode.HorizontalAndVertical** | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. | +| AutoSpanMode.None | Disables automatic cell spanning so every cell remains isolated (Default Mode). | +| AutoSpanMode.Row | Enables horizontal merging across columns within the same row. | +| AutoSpanMode.Column | Enables vertical merging of adjacent cells with identical values in the same column. | +| AutoSpanMode.HorizontalAndVertical | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. | ## Enable row spanning @@ -472,7 +470,7 @@ public class TelecastData ## Disable spanning for specific column -Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level by setting the `AutoSpan` property of the `GridColumn` component to **AutoSpanMode.None**. This configuration provides fine-grained control, allowing automatic spanning to be applied globally while excluding specific columns where merging is not desired. +Column spanning in Syncfusion Blazor DataGrid can be disabled for a specific column(s) by setting the `AutoSpan` property of the `GridColumn` component to **AutoSpanMode.None**. This configuration provides precise control, enabling automatic spanning across the grid while excluding column(s) where merging is not required. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -505,8 +503,7 @@ Spanning in the Syncfusion Blazor DataGrid can be disabled at the column level b - - + @@ -920,14 +917,14 @@ public class TelecastData The effective spanning behavior in the Syncfusion Blazor DataGrid is determined by the intersection of grid-level and column-level `AutoSpan` modes. A column can only restrict the spanning directions permitted at the grid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the grid while allowing fine-grained control for individual columns. -**Complete Combination Matrix** +**Combination Matrix** | Grid AutoSpan | Column AutoSpan | Effective Behavior | |---|---|---| | None | None | No spanning. Both grid and column explicitly disable spanning. | -| None | Row | No spanning. Grid-level None overrides column-level Row. | -| None | Column | No spanning. Grid-level None overrides column-level Column. | -| None | HorizontalAndVertical | No spanning. Grid-level None overrides all spanning modes. | +| None | Row | No spanning. Grid-level **None** overrides column-level **Row**. | +| None | Column | No spanning. Grid-level **None** overrides column-level **Column**. | +| None | HorizontalAndVertical | No spanning. Grid-level **None** overrides all spanning modes. | | Row | None | No spanning. Column explicitly disables spanning. | | Row | Row | Row spanning only. Both grid and column enable row spanning. | | Row | Column | No spanning. Grid only allows row spanning; column cannot enable column spanning. | @@ -961,7 +958,7 @@ To define a merged region, use the following properties of the `MergeCellInfo` c | Property | Type | Description | |--------------|------|-----------------------------------------------------------------------------| | RowIndex | int | The zero-based index of the anchor row. | -| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | +| ColumnIndex | int | The zero-based index of the anchor column (**top-left cell of the merged region**). | | RowSpan | int (optional) | The number of rows to span, starting from the anchor cell. By default set to 1. | | ColumnSpan | int (optional) | The number of columns to span, starting from the anchor cell. By default set to 1. | @@ -1448,7 +1445,7 @@ To identify a merged region, use the following properties of the `UnmergeCellInf | Property | Type | Description | |--------------|------|-----------------------------------------------------------------------------| | RowIndex | int | The zero-based index of the anchor row. | -| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). | +| ColumnIndex | int | The zero-based index of the anchor column (**top-left cell of the merged region**). | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1946,8 +1943,8 @@ public class TelecastData ## Limitations -The Row spanning is not compatible with the following features: +The row spanning is not compatible with the following features: 1. Autofill. -2. Grouping – Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. -3. Frozen Grid – When the `Freeze` property is set to `FreezeDirection.Fixed`, the concerned column will not be included for row spanning. +2. Grouping - Row and column spanning are supported only within the same caption row during grouping scenarios. This means cells can be merged horizontally or vertically only inside a single group header (caption row). Merging across different caption rows is not supported, since each caption row represents a distinct group context. Allowing spans between these rows would break the logical grouping structure and the visual hierarchy of the grid. +3. Frozen Grid - When the `Freeze` property is set to `FreezeDirection.Fixed`, the concerned column will not be included for row spanning. From 2861d6a92977e1798a066c127f41838afabddc62 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh <93911504+sanjaykumar-suresh@users.noreply.github.com> Date: Wed, 17 Dec 2025 19:10:55 +0530 Subject: [PATCH 10/10] 998591 : Modified Tittle --- blazor/datagrid/column-spanning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/datagrid/column-spanning.md b/blazor/datagrid/column-spanning.md index e76bcf915e..9cc692bfa2 100644 --- a/blazor/datagrid/column-spanning.md +++ b/blazor/datagrid/column-spanning.md @@ -1,7 +1,7 @@ --- layout: post title: Column Spanning in Blazor DataGrid Component | Syncfusion -description: Learn how to use the column spanning in Syncfusion Blazor DataGrid. +description: Learn here all about column spanning in Syncfusion Blazor DataGrid component of Syncfusion Essential Studio and more. platform: Blazor control: DataGrid documentation: ug