Skip to content

993923: rowspancolspan #4687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thavasianand merged 6 commits into from
Dec 16, 2025
Merged

993923: rowspancolspan #4687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1c871a1
993923: rowspancolspan
AakashSF4753 Dec 15, 2025
c5dc06a
Merge branch 'development' into 993923-rowspancolspan
AakashSF4753 Dec 15, 2025
22b11ae
993923: conten
AakashSF4753 Dec 16, 2025
1ab0ceb
Merge branch 'development' into 993923-rowspancolspan
AakashSF4753 Dec 16, 2025
2dd3443
993923: paths updated
AakashSF4753 Dec 16, 2025
a03d13d
Merge branch 'development' into 993923-rowspancolspan
AakashSF4753 Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions ...ore-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/spanningapi.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
25 changes: 25 additions & 0 deletions ...asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" height="450px" width="auto" treegridLines="Both" allowSorting="true" enableHover="false" allowSelection="false" enableColumnSpan="true" childMapping="Children" treeColumnIndex="0">
<e-treegrid-pagesettings pageSizeMode="All" pageSize="18"></e-treegrid-pagesettings>
<e-treegrid-columns>
<e-treegrid-column field="ActivityName" headerText="Phase Name" freeze="Left" width="250"></e-treegrid-column>
<e-treegrid-column headerText="Schedule" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { 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", HeaderText = "End Date",Width = "140",Format="yMd", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Work Status" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Status", Width = "160", HeaderText = "Status", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Compliance" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PermitStatus", Width = "150", HeaderText = "Permit Status", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionDate", HeaderText = "Inspection Date", Format="yMd", Width = "170", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionStatus", HeaderText = "Inspection Status", Width = "170", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PunchListStatus", HeaderText = "PunchList Status", Width = "170", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Personnel" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Supervisor", Width = "180", HeaderText = "Supervisor", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Team", HeaderText = "Crew",Width = "200", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Materials" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { 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", HeaderText = "Material Cost",Width = "160", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
<e-treegrid-column headerText="Cost Summary" textAlign="Center" columns="@( new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() { new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "TotalBudget", Width = "140", Format="C2" ,HeaderText = "Planned Budget", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PaidToDate", HeaderText = "Actual Spend",Width = "140",Format="C2", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
</e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
6 changes: 6 additions & 0 deletions ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/spanning.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
103 changes: 103 additions & 0 deletions ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" queryCellInfo="queryCellEvent" gridLines="Both" width= 'auto', height= 'auto' childMapping="subtasks" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="true" textAlign="Right" width="150"></e-treegrid-column>
<e-treegrid-column field="EmployeeName" headerText="Employee Name" width="200"></e-treegrid-column>
<e-treegrid-column field="Time9AM" headerText="9.00 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time930AM" headerText="9.30 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time10AM" headerText="10.00 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time1030AM" headerText="10.30 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time11AM" headerText="11.00 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time1130AM" headerText="11.30 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time12PM" headerText="12.00 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time1230PM" headerText="12.30 AM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time230PM" headerText="2.30 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time3PM" headerText="3.00 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time330PM" headerText="3.30 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time4PM" headerText="4.00 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time430PM" headerText="4.30 PM" width="120"></e-treegrid-column>
<e-treegrid-column field="Time5PM" headerText="5.00 PM" width="120"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
function queryCellEvent(args)
{
var data = args.data;
switch (data.EmployeeID) {
case 10001:
if (args.column.field === 'Time9AM' || args.column.field === 'Time230PM' || args.column.field === 'Time430PM') {
args.colSpan = 2;
} else if (args.column.field === 'Time11AM') {
args.colSpan = 3;
}
break;
case 10002:
if (args.column.field === 'Time930AM' || args.column.field === 'Time230PM' || args.column.field === 'Time430PM') {
args.colSpan = 3;
} else if (args.column.field === 'Time11AM') {
args.colSpan = 4;
}
break;
case 10003:
if (args.column.field === 'Time9AM' || args.column.field === 'Time1130AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time1030AM' || args.column.field === 'Time330PM' || args.column.field === 'Time430PM' || args.column.field === 'Time230PM') {
args.colSpan = 2;
}
break;
case 10004:
if (args.column.field === 'Time9AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time11AM') {
args.colSpan = 4;
} else if (args.column.field === 'Time4PM' || args.column.field === 'Time230PM') {
args.colSpan = 2;
}
break;
case 10005:
if (args.column.field === 'Time9AM') {
args.colSpan = 4;
} else if (args.column.field === 'Time1130AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time330PM' || args.column.field === 'Time430PM' || args.column.field === 'Time230PM') {
args.colSpan = 2;
}
break;
case 10006:
if (args.column.field === 'Time9AM' || args.column.field === 'Time430PM' || args.column.field === 'Time230PM' || args.column.field === 'Time330PM') {
args.colSpan = 2;
} else if (args.column.field === 'Time10AM' || args.column.field === 'Time1130AM') {
args.colSpan = 3;
}
break;
case 10007:
if (args.column.field === 'Time9AM' || args.column.field === 'Time3PM' || args.column.field === 'Time1030AM') {
args.colSpan = 2;
} else if (args.column.field === 'Time1130AM' || args.column.field === 'Time4PM') {
args.colSpan = 3;
}
break;
case 10008:
if (args.column.field === 'Time9AM' || args.column.field === 'Time1030AM' || args.column.field === 'Time230AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time4AM') {
args.colSpan = 2;
}
break;
case 10009:
if (args.column.field === 'Time9AM' || args.column.field === 'Time1130AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time430AM' || args.column.field === 'Time230AM') {
args.colSpan = 2;
}
break;
case 100010:
if (args.column.field === 'Time9AM' || args.column.field === 'Time230AM' ||
args.column.field === 'Time4AM' || args.column.field === 'Time1130AM') {
args.colSpan = 3;
} else if (args.column.field === 'Time1030AM') {
args.colSpan = 2;
}
break;
}
}
</script>
6 changes: 6 additions & 0 deletions ...e-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/columnspanning.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public ActionResult ColumnMenu()
{
var treeData = TreeGridItems.GetTreeData();
ViewBag.datasource = treeData;
return View();
}
94 changes: 94 additions & 0 deletions ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Grids

@Html.EJS().TreeGrid("RowSpanning")
.DataSource((IEnumerable<object>)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<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
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<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
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<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
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<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
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<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
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<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
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()
6 changes: 6 additions & 0 deletions ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/columnspanning.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public ActionResult ColumnMenu()
{
var treeData = TreeGridItems.GetTreeData();
ViewBag.datasource = treeData;
return View();
}
Loading