Skip to content

Commit fa51c02

Browse files
thavasianandthavasianand
authored
Merge pull request #4687 from syncfusion-content/993923-rowspancolspan
993923: rowspancolspan
2 parents 0ff1bea + a03d13d commit fa51c02

File tree

20 files changed

+794
-0
lines changed

20 files changed

+794
-0
lines changed

‎ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/spanningapi.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var tree = TreeData.GetDefaultData();
4+
ViewBag.data = tree;
5+
return View();
6+
}

‎ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning-using-property/tagHelper‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<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">
2+
<e-treegrid-pagesettings pageSizeMode="All" pageSize="18"></e-treegrid-pagesettings>
3+
<e-treegrid-columns>
4+
<e-treegrid-column field="ActivityName" headerText="Phase Name" freeze="Left" width="250"></e-treegrid-column>
5+
<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 },
6+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "EndDate", HeaderText = "End Date",Width = "140",Format="yMd", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
7+
</e-treegrid-column>
8+
<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 }} )">
9+
</e-treegrid-column>
10+
<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 },
11+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionDate", HeaderText = "Inspection Date", Format="yMd", Width = "170", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
12+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionStatus", HeaderText = "Inspection Status", Width = "170", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center },
13+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PunchListStatus", HeaderText = "PunchList Status", Width = "170", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
14+
</e-treegrid-column>
15+
<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 },
16+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Team", HeaderText = "Crew",Width = "200", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
17+
</e-treegrid-column>
18+
<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 },
19+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "MaterialCost", HeaderText = "Material Cost",Width = "160", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
20+
</e-treegrid-column>
21+
<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 },
22+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PaidToDate", HeaderText = "Actual Spend",Width = "140",Format="C2", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Center }} )">
23+
</e-treegrid-column>
24+
</e-treegrid-columns>
25+
</ejs-treegrid>

‎ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/spanning.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var tree = TreeData.GetDefaultData();
4+
ViewBag.data = tree;
5+
return View();
6+
}

‎ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-spanning/tagHelper‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" queryCellInfo="queryCellEvent" gridLines="Both" width= 'auto', height= 'auto' childMapping="subtasks" treeColumnIndex="1">
2+
<e-treegrid-columns>
3+
<e-treegrid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="true" textAlign="Right" width="150"></e-treegrid-column>
4+
<e-treegrid-column field="EmployeeName" headerText="Employee Name" width="200"></e-treegrid-column>
5+
<e-treegrid-column field="Time9AM" headerText="9.00 AM" width="120"></e-treegrid-column>
6+
<e-treegrid-column field="Time930AM" headerText="9.30 AM" width="120"></e-treegrid-column>
7+
<e-treegrid-column field="Time10AM" headerText="10.00 AM" width="120"></e-treegrid-column>
8+
<e-treegrid-column field="Time1030AM" headerText="10.30 AM" width="120"></e-treegrid-column>
9+
<e-treegrid-column field="Time11AM" headerText="11.00 AM" width="120"></e-treegrid-column>
10+
<e-treegrid-column field="Time1130AM" headerText="11.30 AM" width="120"></e-treegrid-column>
11+
<e-treegrid-column field="Time12PM" headerText="12.00 AM" width="120"></e-treegrid-column>
12+
<e-treegrid-column field="Time1230PM" headerText="12.30 AM" width="120"></e-treegrid-column>
13+
<e-treegrid-column field="Time230PM" headerText="2.30 PM" width="120"></e-treegrid-column>
14+
<e-treegrid-column field="Time3PM" headerText="3.00 PM" width="120"></e-treegrid-column>
15+
<e-treegrid-column field="Time330PM" headerText="3.30 PM" width="120"></e-treegrid-column>
16+
<e-treegrid-column field="Time4PM" headerText="4.00 PM" width="120"></e-treegrid-column>
17+
<e-treegrid-column field="Time430PM" headerText="4.30 PM" width="120"></e-treegrid-column>
18+
<e-treegrid-column field="Time5PM" headerText="5.00 PM" width="120"></e-treegrid-column>
19+
</e-treegrid-columns>
20+
</ejs-treegrid>
21+
<script>
22+
function queryCellEvent(args)
23+
{
24+
var data = args.data;
25+
switch (data.EmployeeID) {
26+
case 10001:
27+
if (args.column.field === 'Time9AM' || args.column.field === 'Time230PM' || args.column.field === 'Time430PM') {
28+
args.colSpan = 2;
29+
} else if (args.column.field === 'Time11AM') {
30+
args.colSpan = 3;
31+
}
32+
break;
33+
case 10002:
34+
if (args.column.field === 'Time930AM' || args.column.field === 'Time230PM' || args.column.field === 'Time430PM') {
35+
args.colSpan = 3;
36+
} else if (args.column.field === 'Time11AM') {
37+
args.colSpan = 4;
38+
}
39+
break;
40+
case 10003:
41+
if (args.column.field === 'Time9AM' || args.column.field === 'Time1130AM') {
42+
args.colSpan = 3;
43+
} else if (args.column.field === 'Time1030AM' || args.column.field === 'Time330PM' || args.column.field === 'Time430PM' || args.column.field === 'Time230PM') {
44+
args.colSpan = 2;
45+
}
46+
break;
47+
case 10004:
48+
if (args.column.field === 'Time9AM') {
49+
args.colSpan = 3;
50+
} else if (args.column.field === 'Time11AM') {
51+
args.colSpan = 4;
52+
} else if (args.column.field === 'Time4PM' || args.column.field === 'Time230PM') {
53+
args.colSpan = 2;
54+
}
55+
break;
56+
case 10005:
57+
if (args.column.field === 'Time9AM') {
58+
args.colSpan = 4;
59+
} else if (args.column.field === 'Time1130AM') {
60+
args.colSpan = 3;
61+
} else if (args.column.field === 'Time330PM' || args.column.field === 'Time430PM' || args.column.field === 'Time230PM') {
62+
args.colSpan = 2;
63+
}
64+
break;
65+
case 10006:
66+
if (args.column.field === 'Time9AM' || args.column.field === 'Time430PM' || args.column.field === 'Time230PM' || args.column.field === 'Time330PM') {
67+
args.colSpan = 2;
68+
} else if (args.column.field === 'Time10AM' || args.column.field === 'Time1130AM') {
69+
args.colSpan = 3;
70+
}
71+
break;
72+
case 10007:
73+
if (args.column.field === 'Time9AM' || args.column.field === 'Time3PM' || args.column.field === 'Time1030AM') {
74+
args.colSpan = 2;
75+
} else if (args.column.field === 'Time1130AM' || args.column.field === 'Time4PM') {
76+
args.colSpan = 3;
77+
}
78+
break;
79+
case 10008:
80+
if (args.column.field === 'Time9AM' || args.column.field === 'Time1030AM' || args.column.field === 'Time230AM') {
81+
args.colSpan = 3;
82+
} else if (args.column.field === 'Time4AM') {
83+
args.colSpan = 2;
84+
}
85+
break;
86+
case 10009:
87+
if (args.column.field === 'Time9AM' || args.column.field === 'Time1130AM') {
88+
args.colSpan = 3;
89+
} else if (args.column.field === 'Time430AM' || args.column.field === 'Time230AM') {
90+
args.colSpan = 2;
91+
}
92+
break;
93+
case 100010:
94+
if (args.column.field === 'Time9AM' || args.column.field === 'Time230AM' ||
95+
args.column.field === 'Time4AM' || args.column.field === 'Time1130AM') {
96+
args.colSpan = 3;
97+
} else if (args.column.field === 'Time1030AM') {
98+
args.colSpan = 2;
99+
}
100+
break;
101+
}
102+
}
103+
</script>

‎ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/columnspanning.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public ActionResult ColumnMenu()
2+
{
3+
var treeData = TreeGridItems.GetTreeData();
4+
ViewBag.datasource = treeData;
5+
return View();
6+
}

‎ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/column-spanning-using-property/razor‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@using Syncfusion.EJ2
2+
@using Syncfusion.EJ2.Grids
3+
4+
@Html.EJS().TreeGrid("RowSpanning")
5+
.DataSource((IEnumerable<object>)ViewBag.datasource)
6+
.EnableHover(false)
7+
.AllowSelection(false)
8+
.GridLines(GridLine.Both)
9+
.EnableColumnSpan(true)
10+
.PageSettings(p=>p.PageSizeMode(Syncfusion.EJ2.TreeGrid.PageSizeMode.All).PageSize(18))
11+
.AllowPaging()
12+
.ClipMode(ClipMode.EllipsisWithTooltip)
13+
.Columns(col =>
14+
{
15+
col.Field("ActivityName").HeaderText("Phase Name").Width(250).Freeze(FreezeDirection.Left).Add();
16+
col.HeaderText("Schedule").TextAlign(TextAlign.Center).Columns(
17+
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
18+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "StartDate", Width = "140",
19+
HeaderText = "Start Date",
20+
Format="yMd",
21+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
22+
},
23+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "EndDate", Width = "140",
24+
HeaderText = "End Date",
25+
Format="yMd",
26+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
27+
},
28+
}
29+
).Add();
30+
col.HeaderText("Work Status").TextAlign(TextAlign.Center).Columns(
31+
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
32+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Status", Width = "140",
33+
HeaderText = "Status",
34+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
35+
},
36+
}).Add();
37+
col.HeaderText("Compliance").TextAlign(TextAlign.Center).Columns(
38+
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
39+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PermitStatus", Width = "120",
40+
HeaderText = "Permit Status",
41+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
42+
},
43+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionDate", Width = "180",
44+
HeaderText = "Inspection Date",
45+
Format="yMd",
46+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
47+
},
48+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "InspectionStatus", Width = "180",
49+
HeaderText = "Inspection Status",
50+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
51+
},
52+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PunchListStatus", Width = "150",
53+
HeaderText = "Punch List Status",
54+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
55+
},
56+
}).Add();
57+
col.HeaderText("Personnel").TextAlign(TextAlign.Center).Columns(
58+
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
59+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Supervisor", Width = "180",
60+
HeaderText = "Supervisor",
61+
},
62+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "Team", Width = "200",
63+
HeaderText = "Crew",
64+
},
65+
}).Add();
66+
col.HeaderText("Materials").TextAlign(TextAlign.Center).Columns(
67+
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
68+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "MaterialUsed", Width = "180",
69+
HeaderText = "Material Used",
70+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
71+
},
72+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "MaterialCost", Width = "140",
73+
HeaderText = "Material Cost",
74+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
75+
},
76+
}).Add();
77+
col.HeaderText("Cost Summary").TextAlign(TextAlign.Center).Columns(
78+
new List<Syncfusion.EJ2.TreeGrid.TreeGridColumn>() {
79+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "TotalBudget", Width = "140",
80+
HeaderText = "Planned Budget",
81+
Format="C2",
82+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
83+
},
84+
new Syncfusion.EJ2.TreeGrid.TreeGridColumn { Field = "PaidToDate", Width = "140",
85+
HeaderText = "Actual Spend",
86+
Format="C2",
87+
TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center,
88+
},
89+
}).Add();
90+
})
91+
.Height(400)
92+
.ChildMapping("Children")
93+
.TreeColumnIndex(0)
94+
.Render()

‎ej2-asp-core-mvc/code-snippet/tree-grid/columns-mvc/columnspanning/columnspanning.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public ActionResult ColumnMenu()
2+
{
3+
var treeData = TreeGridItems.GetTreeData();
4+
ViewBag.datasource = treeData;
5+
return View();
6+
}

0 commit comments

Comments
 (0)