From 1c871a1bd60dc02edfbf1e4d8948337f4bd7224d Mon Sep 17 00:00:00 2001 From: AakashSF4753 Date: Mon, 15 Dec 2025 14:37:46 +0530 Subject: [PATCH 1/3] 993923: rowspancolspan --- .../spanningapi.cs | 6 + .../column-spanning-using-property/tagHelper | 25 ++++ .../columns-core/column-spanning/spanning.cs | 6 + .../columns-core/column-spanning/tagHelper | 103 ++++++++++++++++ .../columnspanning.cs | 6 + .../column-spanning-using-property/razor | 94 +++++++++++++++ .../columnspanning/columnspanning.cs | 6 + .../columns-mvc/columnspanning/razor | 104 +++++++++++++++++ .../code-snippet/tree-grid/row/row-span/razor | 26 +++++ .../tree-grid/row/row-span/row-spanning.cs | 6 + .../tree-grid/row/row-span/tagHelper | 27 +++++ .../tree-grid/row/row-spanning/razor | 94 +++++++++++++++ .../row/row-spanning/row-spanning.cs | 6 + .../tree-grid/row/row-spanning/tagHelper | 25 ++++ .../EJ2_ASP.MVC/columns/column-spanning.md | 110 ++++++++++++++++++ .../tree-grid/EJ2_ASP.MVC/row/row-spanning.md | 110 ++++++++++++++++++ .../columns/column-spanning.md | 71 +++++++++++ .../EJ2_ASP.NETCORE/row/row-spanning.md | 98 ++++++++++++++++ ej2-asp-core-toc.html | 2 + ej2-asp-mvc-toc.html | 2 + 20 files changed, 927 insertions(+) create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/spanningapi.cs create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/spanning.cs create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/columnspanning.cs create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/razor create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/columnspanning.cs create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/razor create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/razor create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/row-spanning.cs create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/razor create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/row-spanning.cs create mode 100644 ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/tagHelper create mode 100644 ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md create mode 100644 ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md create mode 100644 ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md create mode 100644 ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/spanningapi.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/spanningapi.cs new file mode 100644 index 0000000000..d1b46c8ac5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/spanningapi.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var tree = TreeData.GetDefaultData(); + ViewBag.data = tree; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/tagHelper b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/tagHelper new file mode 100644 index 0000000000..4f75763251 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/tagHelper @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/spanning.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/spanning.cs new file mode 100644 index 0000000000..d1b46c8ac5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/spanning.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var tree = TreeData.GetDefaultData(); + ViewBag.data = tree; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/tagHelper b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/tagHelper new file mode 100644 index 0000000000..6a9ebf3495 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/tagHelper @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/columnspanning.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/columnspanning.cs new file mode 100644 index 0000000000..55adc8fb1f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/columnspanning.cs @@ -0,0 +1,6 @@ +public ActionResult ColumnMenu() +{ + var treeData = TreeGridItems.GetTreeData(); + ViewBag.datasource = treeData; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/razor b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/razor new file mode 100644 index 0000000000..113c4e640d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/razor @@ -0,0 +1,94 @@ +@using Syncfusion.EJ2 +@using Syncfusion.EJ2.Grids + +@Html.EJS().TreeGrid("RowSpanning") + .DataSource((IEnumerable)ViewBag.datasource) + .EnableHover(false) + .AllowSelection(false) + .GridLines(GridLine.Both) + .EnableColumnSpan(true) + .PageSettings(p=>p.PageSizeMode(Syncfusion.EJ2.TreeGrid.PageSizeMode.All).PageSize(18)) + .AllowPaging() + .ClipMode(ClipMode.EllipsisWithTooltip) + .Columns(col => + { + col.Field("ActivityName").HeaderText("Phase Name").Width(250).Freeze(FreezeDirection.Left).Add(); + col.HeaderText("Schedule").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "StartDate", Width = "140", + HeaderText = "Start Date", + Format="yMd", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "EndDate", Width = "140", + HeaderText = "End Date", + Format="yMd", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + } + ).Add(); + col.HeaderText("Work Status").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Status", Width = "140", + HeaderText = "Status", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + }).Add(); + col.HeaderText("Compliance").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PermitStatus", Width = "120", + HeaderText = "Permit Status", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionDate", Width = "180", + HeaderText = "Inspection Date", + Format="yMd", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionStatus", Width = "180", + HeaderText = "Inspection Status", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PunchListStatus", Width = "150", + HeaderText = "Punch List Status", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + }).Add(); + col.HeaderText("Personnel").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Supervisor", Width = "180", + HeaderText = "Supervisor", + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Team", Width = "200", + HeaderText = "Crew", + }, + }).Add(); + col.HeaderText("Materials").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "MaterialUsed", Width = "180", + HeaderText = "Material Used", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "MaterialCost", Width = "140", + HeaderText = "Material Cost", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + }).Add(); + col.HeaderText("Cost Summary").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "TotalBudget", Width = "140", + HeaderText = "Planned Budget", + Format="C2", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PaidToDate", Width = "140", + HeaderText = "Actual Spend", + Format="C2", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + }).Add(); + }) + .Height(400) + .ChildMapping("Children") + .TreeColumnIndex(0) + .Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/columnspanning.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/columnspanning.cs new file mode 100644 index 0000000000..55adc8fb1f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/columnspanning.cs @@ -0,0 +1,6 @@ +public ActionResult ColumnMenu() +{ + var treeData = TreeGridItems.GetTreeData(); + ViewBag.datasource = treeData; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/razor b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/razor new file mode 100644 index 0000000000..6c54a07148 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/razor @@ -0,0 +1,104 @@ +@Html.EJS().TreeGrid("CellMerging").DataSource((IEnumerable)ViewBag.Datasource).QueryCellInfo("QueryCellEvent").GridLines(GridLine.Both).Height("auto").Width("auto").Columns(col => + { + col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.TreeGrid.TextAlign.Right).Width("150").Add(); + col.Field("EmployeeName").HeaderText("Employee Name").Width("200").Add(); + col.Field("Time9AM").HeaderText("9.00 AM").Width("120").Add(); + col.Field("Time930AM").HeaderText("9.30 AM").Width("120").Add(); + col.Field("Time10AM").HeaderText("10.00 AM").Width("120").Add(); + col.Field("Time1030AM").HeaderText("10.30 AM").Width("120").Add(); + col.Field("Time11AM").HeaderText("11.00 AM").Width("120").Add(); + col.Field("Time1130AM").HeaderText("11.30 AM").Width("120").Add(); + col.Field("Time12PM").HeaderText("12.00 PM").Width("120").Add(); + col.Field("Time1230PM").HeaderText("12.30 PM").Width("120").Add(); + col.Field("Time1PM").HeaderText("1.00 PM").Width("120").TextAlign(Syncfusion.EJ2.TreeGrid.TextAlign.Center).Add(); + col.Field("Time2PM").HeaderText("2.00 PM").Width("120").Add(); + col.Field("Time230PM").HeaderText("2.30 PM").Width("120").Add(); + col.Field("Time3PM").HeaderText("3.00 PM").Width("120").Add(); + col.Field("Time330PM").HeaderText("3.30 PM").Width("120").Add(); + col.Field("Time4PM").HeaderText("4.00 PM").Width("120").Add(); + col.Field("Time430PM").HeaderText("4.30 PM").Width("120").Add(); + col.Field("Time5PM").HeaderText("5.00 PM").Width("120").Add(); + }).ChildMapping("Children").TreeColumnIndex(1).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/razor b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/razor new file mode 100644 index 0000000000..847a0ebce5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/razor @@ -0,0 +1,26 @@ +@Html.EJS().TreeGrid("CellMerging").DataSource((IEnumerable)ViewBag.Datasource).QueryCellInfo("QueryCellEvent").GridLines(Syncfusion.EJ2.TreeGrid.GridLine.Both).Height("auto").Width("auto").Columns(col => + { + col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.TreeGrid.TextAlign.Right).Width("150").Add(); + col.Field("EmployeeName").HeaderText("Employee Name").Width("200").Add(); + col.Field("Time9AM").HeaderText("9.00 AM").Width("120").Add(); + col.Field("Time10AM").HeaderText("10.00 AM").Width("120").Add(); + col.Field("Time11AM").HeaderText("11.00 AM").Width("120").Add(); + col.Field("Time12PM").HeaderText("12.00 PM").Width("120").Add(); + col.Field("Time1PM").HeaderText("1.00 PM").Width("120").TextAlign(Syncfusion.EJ2.TreeGrid.TextAlign.Center).Add(); + col.Field("Time3PM").HeaderText("3.00 PM").Width("120").Add(); + col.Field("Time4PM").HeaderText("4.00 PM").Width("120").Add(); + col.Field("Time5PM").HeaderText("5.00 PM").Width("120").Add(); + }).ChildMapping("Children").TreeColumnIndex(1).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/row-spanning.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/row-spanning.cs new file mode 100644 index 0000000000..55adc8fb1f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/row-spanning.cs @@ -0,0 +1,6 @@ +public ActionResult ColumnMenu() +{ + var treeData = TreeGridItems.GetTreeData(); + ViewBag.datasource = treeData; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/tagHelper b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/tagHelper new file mode 100644 index 0000000000..4baf108635 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-span/tagHelper @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/razor b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/razor new file mode 100644 index 0000000000..75e0c562c3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/razor @@ -0,0 +1,94 @@ +@using Syncfusion.EJ2 +@using Syncfusion.EJ2.Grids + +@Html.EJS().TreeGrid("RowSpanning") + .DataSource((IEnumerable)ViewBag.datasource) + .EnableHover(false) + .AllowSelection(false) + .GridLines(GridLine.Both) + .EnableRowSpan(true) + .PageSettings(p=>p.PageSizeMode(Syncfusion.EJ2.TreeGrid.PageSizeMode.All).PageSize(18)) + .AllowPaging() + .ClipMode(ClipMode.EllipsisWithTooltip) + .Columns(col => + { + col.Field("ActivityName").HeaderText("Phase Name").Width(250).Freeze(FreezeDirection.Left).Add(); + col.HeaderText("Schedule").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "StartDate", Width = "140", + HeaderText = "Start Date", + Format="yMd", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "EndDate", Width = "140", + HeaderText = "End Date", + Format="yMd", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + } + ).Add(); + col.HeaderText("Work Status").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Status", Width = "140", + HeaderText = "Status", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + }).Add(); + col.HeaderText("Compliance").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PermitStatus", Width = "120", + HeaderText = "Permit Status", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionDate", Width = "180", + HeaderText = "Inspection Date", + Format="yMd", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionStatus", Width = "180", + HeaderText = "Inspection Status", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PunchListStatus", Width = "150", + HeaderText = "Punch List Status", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + }).Add(); + col.HeaderText("Personnel").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Supervisor", Width = "180", + HeaderText = "Supervisor", + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Team", Width = "200", + HeaderText = "Crew", + }, + }).Add(); + col.HeaderText("Materials").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "MaterialUsed", Width = "180", + HeaderText = "Material Used", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "MaterialCost", Width = "140", + HeaderText = "Material Cost", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + }).Add(); + col.HeaderText("Cost Summary").TextAlign(TextAlign.Center).Columns( + new List() { + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "TotalBudget", Width = "140", + HeaderText = "Planned Budget", + Format="C2", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PaidToDate", Width = "140", + HeaderText = "Actual Spend", + Format="C2", + TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, + }, + }).Add(); + }) + .Height(400) + .ChildMapping("Children") + .TreeColumnIndex(0) + .Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/row-spanning.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/row-spanning.cs new file mode 100644 index 0000000000..55adc8fb1f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/row-spanning.cs @@ -0,0 +1,6 @@ +public ActionResult ColumnMenu() +{ + var treeData = TreeGridItems.GetTreeData(); + ViewBag.datasource = treeData; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/tagHelper b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/tagHelper new file mode 100644 index 0000000000..0f89c733a4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/tree-grid/row/row-spanning/tagHelper @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md new file mode 100644 index 0000000000..a846da9649 --- /dev/null +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md @@ -0,0 +1,110 @@ +--- +layout: post +title: Column Spanning in ##Platform_Name## TreeGrid Component | Syncfusion +description: Learn here all about Column Spanning in Syncfusion ##Platform_Name## TreeGrid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Column Spanning +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Column Spanning in ##Platform_Name## TreeGrid Component + +The column spanning feature in the Syncfusion® ASP.MVC TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. + +In the following example, Employee **Davolio** is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-mvc/columnspanning/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Columnspanning.cs" %} +{% include code-snippet/grid/columns-mvc/columnspanning/columnspanning.cs %} +{% endhighlight %} +{% endtabs %} + + + +## Limitations + +Column spanning in the ASP.MVC TreeGrid has the following limitations: + +* The [updateCell](https://ej2.syncfusion.com/documentation/api/treegrid/index-default#updatecell) method does not support column spanning. +* Column spanning is not compatible with the following features: + 1. Virtual scrolling + 2. Infinite scrolling + +> When using column spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. + +## Column spanning using EnableColumnSpan property + +The Syncfusion ASP.MVC TreeGrid introduces a simplified approach to horizontally merge cells with identical values in the same row across adjacent columns. + +The column spanning feature in the Syncfusion ASP.MVC TreeGrid can be enabled using `EnableColumnSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". + +To enable column spanning, set the `EnableColumnSpan` property to **true** in the TreeGrid configuration. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-mvc/column-spanning-using-property/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Columnspanning.cs" %} +{% include code-snippet/tree-grid/columns-mvc/column-spanning-using-property/columnspanning.cs %} +{% endhighlight %} +{% endtabs %} + + + +> In the sample, column spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `EnableColumnSpan` property to **false**. + +### Limitations + +Column spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with column spanning feature. + +* Virtualization +* Infinite Scrolling +* Row Drag and Drop +* Column Virtualization +* Detail Template +* Editing +* Export + +## See Also + +* [Row spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/asp.mvc/documentation/treegrid/row/row-spanning) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md new file mode 100644 index 0000000000..20a5184769 --- /dev/null +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md @@ -0,0 +1,110 @@ +--- +layout: post +title: Row Spanning in ##Platform_Name## TreeGrid Component | Syncfusion +description: Learn here all about Row Spanning in Syncfusion ##Platform_Name## TreeGrid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Row Spanning +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Row Spanning in ##Platform_Name## TreeGrid Component + +The row spanning feature in the Syncfusion® ASP.MVC TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.treegrid.treegrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. + +In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 PM" column. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/row/row-span/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Span.cs" %} +{% include code-snippet/tree-grid/row/row-span/row-span.cs %} +{% endhighlight %} +{% endtabs %} + + + +## Limitations + +Row spanning in the ASP.MVC TreeGrid has the following limitations: + +* The [updateCell](https://ej2.syncfusion.com/documentation/api/treegrid/index-default#updatecell) method does not support row spanning. +* Row spanning is not compatible with the following features: + 1. Virtual scrolling + 2. Infinite scrolling + +> When using row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. + +## Row spanning using EnableRowSpan property + +The Syncfusion ASP.MVC TreeGrid introduces a simplified approach to vertically merge cells with identical values in the same column across consecutive rows. + +The row spanning feature in the Syncfusion ASP.MVC TreeGrid can be enabled using `EnableRowSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". + +To enable column spanning, set the `EnableRowSpan` property to **true** in the TreeGrid configuration. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/row/row-spanning/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Span.cs" %} +{% include code-snippet/tree-grid/row/row-spanning/row-span.cs %} +{% endhighlight %} +{% endtabs %} + + + +> In the sample, row spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `enableRowSpan` property to **false**. + +### Limitations + +Row spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with row spanning feature. + +* Virtualization +* Infinite Scrolling +* Row Drag and Drop +* Column Virtualization +* Detail Template +* Editing +* Export + +## See Also + +* [Column spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/asp.mvc/documentation/treegrid/columns/column-spanning) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md new file mode 100644 index 0000000000..4544260ac0 --- /dev/null +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md @@ -0,0 +1,71 @@ +--- +layout: post +title: Column Spanning in ##Platform_Name## TreeGrid Component | Syncfusion +description: Learn here all about Column Spanning in Syncfusion ##Platform_Name## TreeGrid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Column Spanning +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Column Spanning in ##Platform_Name## TreeGrid Component + +The column spanning feature in the Syncfusion® ASP.Core TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. + +In the following example, Employee **Davolio** is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-core/column-spanning/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="ColumnSpanning.cs" %} +{% include code-snippet/tree-grid/columns-core/column-spanning/spanning.cs %} +{% endhighlight %} +{% endtabs %} + +## Limitations + +Column spanning in the ASP.Core TreeGrid has the following limitations: + +* The [updateCell](https://ej2.syncfusion.com/documentation/api/treegrid/index-default#updatecell) method does not support column spanning. +* Column spanning is not compatible with the following features: + 1. Virtual scrolling + 2. Infinite scrolling + +> When using column spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. + +## Column spanning using EnableColumnSpan property + +The Syncfusion ASP.Core TreeGrid introduces a simplified approach to horizontally merge cells with identical values in the same row across adjacent columns. + +The column spanning feature in the Syncfusion ASP.Core TreeGrid can be enabled using `EnableColumnSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". + +To enable column spanning, set the `EnableColumnSpan` property to **true** in the TreeGrid configuration. + + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/columns-core/column-spanning-using-property/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Spanningapi.cs" %} +{% include code-snippet/tree-grid/columns-core/column-spanning-using-property/spanningapi.cs %} +{% endhighlight %} +{% endtabs %} + +> In the sample, column spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `EnableColumnSpan` property to **false**. + +### Limitations + +Column spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with column spanning feature. + +* Virtualization +* Infinite Scrolling +* Row Drag and Drop +* Column Virtualization +* Detail Template +* Editing +* Export + +## See Also + +* [Row spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/asp.core/documentation/treegrid/row/row-spanning) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md new file mode 100644 index 0000000000..072b7ea2e1 --- /dev/null +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md @@ -0,0 +1,98 @@ +--- +layout: post +title: Row Spanning in ##Platform_Name## TreeGrid Component | Syncfusion +description: Learn here all about Row Spanning in Syncfusion ##Platform_Name## TreeGrid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Row Spanning +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Row Spanning in ##Platform_Name## TreeGrid Component + +The row spanning feature in the Syncfusion® ASP.Core TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_QueryCellInfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. + +In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 PM" column. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/row/row-spanning/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="RowSpanning.cs" %} +{% include code-snippet/tree-grid/row/row-spanning/spanning.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/row/row-spanning/razor %} +{% endhighlight %} +{% highlight c# tabtitle="RowSpanning.cs" %} +{% include code-snippet/tree-grid/row/row-spanning/spanning.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +## Limitations + +Row spanning in the ASP.Core TreeGrid has the following limitations: + +* The [updateCell](https://ej2.syncfusion.com/documentation/api/treegrid/index-default#updatecell) method does not support row spanning. +* Row spanning is not compatible with the following features: + 1. Virtual scrolling + 2. Infinite scrolling + +> When using row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. + +## Row spanning using enableColumnSpan property + +The Syncfusion ASP.Core TreeGrid introduces a simplified approach to vertically merge cells with identical values in the same column across consecutive rows. + +The row spanning feature in the Syncfusion ASP.Core TreeGrid can be enabled using `enableRowSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". + +To enable column spanning, set the `enableRowSpan` property to **true** in the TreeGrid configuration. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/row/spanning/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Spanningapi.cs" %} +{% include code-snippet/tree-grid/row/spanning/rowspanningapi.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/row/spanning/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Spanningapi.cs" %} +{% include code-snippet/tree-grid/row/spanning/rowspanningapi.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +> In the sample, row spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `enableRowSpan` property to **false**. + +### Limitations + +Row spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with row spanning feature. + +* Virtualization +* Infinite Scrolling +* Row Drag and Drop +* Column Virtualization +* Detail Template +* Editing +* Export + +## See Also + +* [Column spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/asp.core/documentation/treegrid/columns/column-spanning) \ No newline at end of file diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index a92cb42833..fd9f75f553 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -2808,6 +2808,7 @@
  • Column Chooser
  • Column Menu
  • Responsive Columns
    • +
  • Column Spanning
  • Row @@ -2817,6 +2818,7 @@
  • Row Template
  • Detail Template
  • Row Drag and Drop
    • +
  • Row Spanning
  • Cell diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 82fae38072..d94dec49b6 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -2766,6 +2766,7 @@
  • Column Menu
  • Responsive Columns
  • Foreign Key Column
    • +
  • Column Spanning
  • Row @@ -2775,6 +2776,7 @@
  • Row Template
  • Detail Template
  • Row Drag and Drop
    • +
  • Row Spanning
  • Cell From 22b11ae9d0ebeb543f459b0ac4b84a8ad4a48b7c Mon Sep 17 00:00:00 2001 From: AakashSF4753 Date: Tue, 16 Dec 2025 10:04:45 +0530 Subject: [PATCH 2/3] 993923: conten --- .../EJ2_ASP.MVC/columns/column-spanning.md | 52 ++----------------- .../tree-grid/EJ2_ASP.MVC/row/row-spanning.md | 52 ++----------------- .../columns/column-spanning.md | 13 ++--- .../EJ2_ASP.NETCORE/row/row-spanning.md | 12 ++--- 4 files changed, 12 insertions(+), 117 deletions(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md index a846da9649..4fda0e124f 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md @@ -23,26 +23,6 @@ In the following example, Employee **Davolio** is scheduled for analysis from "9 {% endhighlight %} {% endtabs %} - - ## Limitations Column spanning in the ASP.MVC TreeGrid has the following limitations: @@ -54,13 +34,11 @@ Column spanning in the ASP.MVC TreeGrid has the following limitations: > When using column spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. -## Column spanning using EnableColumnSpan property - -The Syncfusion ASP.MVC TreeGrid introduces a simplified approach to horizontally merge cells with identical values in the same row across adjacent columns. +## Column spanning implementation through API -The column spanning feature in the Syncfusion ASP.MVC TreeGrid can be enabled using `EnableColumnSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". +The Syncfusion TreeGrid provides an API-based approach to horizontally merge cells with identical values in the same row across adjacent columns. -To enable column spanning, set the `EnableColumnSpan` property to **true** in the TreeGrid configuration. +The column spanning feature in the Syncfusion TreeGrid can be enabled using `EnableColumnSpan` property to **true** in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -71,26 +49,6 @@ To enable column spanning, set the `EnableColumnSpan` property to **true** in th {% endhighlight %} {% endtabs %} - - > In the sample, column spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `EnableColumnSpan` property to **false**. ### Limitations @@ -104,7 +62,3 @@ Column spanning feature is not compatible with all the features which are availa * Detail Template * Editing * Export - -## See Also - -* [Row spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/asp.mvc/documentation/treegrid/row/row-spanning) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md index 20a5184769..00f2a68f38 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md @@ -23,26 +23,6 @@ In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 {% endhighlight %} {% endtabs %} - - ## Limitations Row spanning in the ASP.MVC TreeGrid has the following limitations: @@ -54,13 +34,11 @@ Row spanning in the ASP.MVC TreeGrid has the following limitations: > When using row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. -## Row spanning using EnableRowSpan property - -The Syncfusion ASP.MVC TreeGrid introduces a simplified approach to vertically merge cells with identical values in the same column across consecutive rows. +## Row spanning implementation through API -The row spanning feature in the Syncfusion ASP.MVC TreeGrid can be enabled using `EnableRowSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". +The Syncfusion TreeGrid provides an API-based approach to vertically merge cells with identical values in the same column across consecutive rows. -To enable column spanning, set the `EnableRowSpan` property to **true** in the TreeGrid configuration. +The row spanning feature in the Syncfusion TreeGrid can be enabled using `EnableRowSpan` property to **true** in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -71,26 +49,6 @@ To enable column spanning, set the `EnableRowSpan` property to **true** in the T {% endhighlight %} {% endtabs %} - - > In the sample, row spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `enableRowSpan` property to **false**. ### Limitations @@ -104,7 +62,3 @@ Row spanning feature is not compatible with all the features which are available * Detail Template * Editing * Export - -## See Also - -* [Column spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/asp.mvc/documentation/treegrid/columns/column-spanning) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md index 4544260ac0..98667b093b 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md @@ -34,14 +34,11 @@ Column spanning in the ASP.Core TreeGrid has the following limitations: > When using column spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. -## Column spanning using EnableColumnSpan property +## Column spanning implementation through API -The Syncfusion ASP.Core TreeGrid introduces a simplified approach to horizontally merge cells with identical values in the same row across adjacent columns. - -The column spanning feature in the Syncfusion ASP.Core TreeGrid can be enabled using `EnableColumnSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". - -To enable column spanning, set the `EnableColumnSpan` property to **true** in the TreeGrid configuration. +The Syncfusion TreeGrid provides an API-based approach to horizontally merge cells with identical values in the same row across adjacent columns. +The column spanning feature in the Syncfusion TreeGrid can be enabled using `EnableColumnSpan` property to **true** in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -65,7 +62,3 @@ Column spanning feature is not compatible with all the features which are availa * Detail Template * Editing * Export - -## See Also - -* [Row spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/asp.core/documentation/treegrid/row/row-spanning) \ No newline at end of file diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md index 072b7ea2e1..6b57b3f2f3 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md @@ -48,13 +48,11 @@ Row spanning in the ASP.Core TreeGrid has the following limitations: > When using row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. -## Row spanning using enableColumnSpan property +## Row spanning implementation through API -The Syncfusion ASP.Core TreeGrid introduces a simplified approach to vertically merge cells with identical values in the same column across consecutive rows. +The Syncfusion TreeGrid provides an API-based approach to vertically merge cells with identical values in the same column across consecutive rows. -The row spanning feature in the Syncfusion ASP.Core TreeGrid can be enabled using `enableRowSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". - -To enable column spanning, set the `enableRowSpan` property to **true** in the TreeGrid configuration. +The row spanning feature in the Syncfusion TreeGrid can be enabled using `EnableRowSpan` property to **true** in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". {% if page.publishingplatform == "aspnet-core" %} @@ -92,7 +90,3 @@ Row spanning feature is not compatible with all the features which are available * Detail Template * Editing * Export - -## See Also - -* [Column spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/asp.core/documentation/treegrid/columns/column-spanning) \ No newline at end of file From 2dd34432c2870f03fbf612731cdc76ffa8aafffd Mon Sep 17 00:00:00 2001 From: AakashSF4753 Date: Tue, 16 Dec 2025 11:50:17 +0530 Subject: [PATCH 3/3] 993923: paths updated --- .../EJ2_ASP.MVC/columns/column-spanning.md | 2 +- .../tree-grid/EJ2_ASP.MVC/row/row-spanning.md | 4 +- .../EJ2_ASP.NETCORE/row/row-spanning.md | 40 +++---------------- 3 files changed, 9 insertions(+), 37 deletions(-) diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md index 4fda0e124f..0e3c20c635 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md @@ -19,7 +19,7 @@ In the following example, Employee **Davolio** is scheduled for analysis from "9 {% include code-snippet/tree-grid/columns-mvc/columnspanning/razor %} {% endhighlight %} {% highlight c# tabtitle="Columnspanning.cs" %} -{% include code-snippet/grid/columns-mvc/columnspanning/columnspanning.cs %} +{% include code-snippet/tree-grid/columns-mvc/columnspanning/columnspanning.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md index 00f2a68f38..328e959ddf 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md @@ -19,7 +19,7 @@ In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 {% include code-snippet/tree-grid/row/row-span/razor %} {% endhighlight %} {% highlight c# tabtitle="Span.cs" %} -{% include code-snippet/tree-grid/row/row-span/row-span.cs %} +{% include code-snippet/tree-grid/row/row-span/row-spanning.cs %} {% endhighlight %} {% endtabs %} @@ -45,7 +45,7 @@ The row spanning feature in the Syncfusion TreeGrid can be enabled using `Enable {% include code-snippet/tree-grid/row/row-spanning/razor %} {% endhighlight %} {% highlight c# tabtitle="Span.cs" %} -{% include code-snippet/tree-grid/row/row-spanning/row-span.cs %} +{% include code-snippet/tree-grid/row/row-spanning/row-spanning.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md index 6b57b3f2f3..6c74222eaa 100644 --- a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md @@ -14,28 +14,14 @@ The row spanning feature in the Syncfusion® In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 PM" column. -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/row/row-spanning/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="RowSpanning.cs" %} -{% include code-snippet/tree-grid/row/row-spanning/spanning.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/row/row-spanning/razor %} +{% include code-snippet/tree-grid/row/row-span/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="RowSpanning.cs" %} -{% include code-snippet/tree-grid/row/row-spanning/spanning.cs %} +{% highlight c# tabtitle="Span.cs" %} +{% include code-snippet/tree-grid/row/row-span/row-spanning.cs %} {% endhighlight %} {% endtabs %} -{% endif %} ## Limitations @@ -54,28 +40,14 @@ The Syncfusion TreeGrid provides an API-based approach to vertically merge cells The row spanning feature in the Syncfusion TreeGrid can be enabled using `EnableRowSpan` property to **true** in the TreeGrid configuration, which significantly enhances readability and delivers a cleaner layout by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". -{% if page.publishingplatform == "aspnet-core" %} - {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/row/spanning/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Spanningapi.cs" %} -{% include code-snippet/tree-grid/row/spanning/rowspanningapi.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/tree-grid/row/spanning/razor %} +{% include code-snippet/tree-grid/row/row-spanning/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Spanningapi.cs" %} -{% include code-snippet/tree-grid/row/spanning/rowspanningapi.cs %} +{% highlight c# tabtitle="Span.cs" %} +{% include code-snippet/tree-grid/row/row-spanning/row-spanning.cs %} {% endhighlight %} {% endtabs %} -{% endif %} > In the sample, row spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `enableRowSpan` property to **false**.