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..0e3c20c635 --- /dev/null +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/column-spanning.md @@ -0,0 +1,64 @@ +--- +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/tree-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 implementation through API + +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 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 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..328e959ddf --- /dev/null +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/row/row-spanning.md @@ -0,0 +1,64 @@ +--- +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-spanning.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 implementation through API + +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 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" %} +{% include code-snippet/tree-grid/row/row-spanning/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Span.cs" %} +{% include code-snippet/tree-grid/row/row-spanning/row-spanning.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 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..98667b093b --- /dev/null +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/column-spanning.md @@ -0,0 +1,64 @@ +--- +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 implementation through API + +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" %} +{% 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 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..6c74222eaa --- /dev/null +++ b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/row/row-spanning.md @@ -0,0 +1,64 @@ +--- +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. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/row/row-span/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Span.cs" %} +{% include code-snippet/tree-grid/row/row-span/row-spanning.cs %} +{% endhighlight %} +{% endtabs %} + +## 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 implementation through API + +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 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 cshtml tabtitle="CSHTML" %} +{% include code-snippet/tree-grid/row/row-spanning/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Span.cs" %} +{% include code-snippet/tree-grid/row/row-spanning/row-spanning.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 diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index ffe3137ef5..4da8090cf9 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 89b80e5396..1592ae3cbc 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