Skip to content

Commit 88a760b

Browse files
authored
Merge pull request #3258 from syncfusion-content/900021-print
documentation(900021):Print Topic
2 parents 066c02e + a7d99cf commit 88a760b

File tree

39 files changed

+597
-374
lines changed

39 files changed

+597
-374
lines changed
Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
public IActionResult Index()
22
{
3-
ViewBag.DataSource = OrderDetails.GetAllRecords();
3+
ViewBag.DataSource = OrdersDetails.GetAllRecords();
4+
ViewBag.dropdownData = new string[] { "AllPages", "CurrentPage" };
5+
46
return View();
57
}
Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
1-
@Html.EJS().Grid("Print").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
1+
<div style="display: flex">
2+
<label style="padding: 3px 10px 26px 0;font-weight:bold"> Sekect print mode: </label>
3+
<span style="height:fit-content">
4+
@Html.EJS().DropDownList("dropdown").Index(0).DataSource(@ViewBag.dropdownData).Change("change").Render()
5+
</span>
6+
</div>
7+
8+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
29
{
310
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4-
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
11+
col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
512
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
613
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
714
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
815

9-
}).AllowPaging().Toolbar(new List<string>() { "Print" }).PrintMode(Syncfusion.EJ2.Grids.PrintMode.CurrentPage).Render()
16+
}).AllowPaging().PageSettings(page => { page.PageSize(6); }).Toolbar(new List<string>() { "Print" }).Render()
17+
18+
<script>
19+
function change(args) {
20+
document.getElementById('Grid').ej2_instances[0].printMode = args.value;
21+
}
22+
</script>
Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Print" })" printMode="CurrentPage" >
1+
<div style="display: flex">
2+
<label style="padding: 3px 10px 26px 0;font-weight:bold"> Sekect print mode: </label>
3+
<span style="height:fit-content">
4+
<ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData" change="change"></ejs-dropdownlist>
5+
</span>
6+
</div>
7+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' toolbar="@(new List<string>() { "Print" })">
8+
<e-grid-pagesettings pageSize="6">
9+
</e-grid-pagesettings>
210
<e-grid-columns>
311
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
412
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
5-
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
6-
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
13+
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="130"></e-grid-column>
14+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
15+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
716
</e-grid-columns>
817
</ejs-grid>
18+
<script>
19+
function change(args)
20+
{
21+
document.getElementById('Grid').ej2_instances[0].printMode = args.value;
22+
}
23+
</script>
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
public IActionResult Index()
22
{
3-
ViewBag.DataSource = OrderDetails.GetAllRecords();
3+
ViewBag.DataSource = OrdersDetails.GetAllRecords();
44
return View();
55
}

ej2-asp-core-mvc/code-snippet/grid/print/external-btn/razor

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
@Html.EJS().Button("printbtn").Content("Print").IsPrimary(true).Render()
2-
1+
<div style="padding-bottom:20px">
2+
@Html.EJS().Button("printbtn").Content("Print").IsPrimary(true).Render()
3+
</div>
34
@Html.EJS().Grid("Print").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
45
{
56
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

ej2-asp-core-mvc/code-snippet/grid/print/external-btn/tagHelper

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
<ejs-button id="printbtn" content="Print" isPrimary="true"></ejs-button>
1+
<div style="padding-bottom:20px">
2+
<ejs-button id="printbtn" content="Print" isPrimary="true"></ejs-button>
3+
</div>
24
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
35
<e-grid-columns>
46
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
57
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
6-
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
7-
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
8+
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="130"></e-grid-column>
9+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
10+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
811
</e-grid-columns>
912
</ejs-grid>
1013

ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/hierarchyprint.cs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,7 @@ public IActionResult Index()
33
ViewBag.DataSource = OrdersDetails.GetAllRecords();;
44
ViewBag.EmpDataSource = EmployeeView.GetAllRecords();
55
ViewBag.CustomerDataSource = Customer.GetAllRecords();
6+
ViewBag.dropdownData = new string[] { "Expanded", "All", "None" };
7+
68
return View();
79
}

ej2-asp-core-mvc/code-snippet/grid/print/hierarchyprint/razor

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{
66
new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
77
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Ship Country", Width="90" },
8+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="ShipAddress", Width="90" },
89
}
910
};
1011

@@ -21,11 +22,23 @@
2122
};
2223
}
2324

24-
@Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable<object>)ViewBag.EmpDataSource).HierarchyPrintMode(Syncfusion.EJ2.Grids.HierarchyGridPrintMode.All).Columns(col =>
25-
{
26-
col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
27-
col.Field("FirstName").HeaderText("Name").Width("125").Add();
28-
col.Field("Country").HeaderText("Country").Width("180").Add();
29-
col.Field("City").HeaderText("City").Width("135").Add();
25+
<div style="display: flex">
26+
<label style="padding: 3px 10px 26px 0;font-weight:bold"> Select Mode: </label>
27+
<span style="height:fit-content">
28+
@Html.EJS().DropDownList("dropdown").Index(0).DataSource(@ViewBag.dropdownData).Change("onModeChange").Render()
29+
</span>
30+
</div>
31+
@Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable<object>)ViewBag.EmpDataSource).Columns(col =>
32+
{
33+
col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
34+
col.Field("FirstName").HeaderText("Name").Width("125").Add();
35+
col.Field("Country").HeaderText("Country").Width("180").Add();
36+
col.Field("City").HeaderText("City").Width("135").Add();
3037

31-
}).AllowSorting().Toolbar(new List<string>() { "Print"}).ChildGrid(ChildGrid).Render()
38+
}).Toolbar(new List<string>() { "Print" }).ChildGrid(ChildGrid).Render()
39+
<script>
40+
function onModeChange(args) {
41+
document.getElementById('HierarchyPrint').ej2_instances[0].hierarchyPrintMode = args.value;
42+
};
43+
44+
</script>
Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,51 @@
1-
@{
2-
var SecondChildGrid = new Syncfusion.EJ2.Grids.Grid()
3-
{
4-
DataSource = (IEnumerable<object>)ViewBag.CustomerDataSource,
5-
QueryString = "CustomerID",
6-
Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
1+
2+
@{
3+
var SecondChildGrid = new Syncfusion.EJ2.Grids.Grid()
4+
{
5+
DataSource = (IEnumerable<object>)ViewBag.CustomerDataSource,
6+
QueryString = "CustomerID",
7+
Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
78
new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
89
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Country", Width="90" },
9-
}
10-
};
11-
}
10+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="Ship Address", Width="90" },
11+
12+
}
13+
};
14+
}
1215

13-
@{
14-
var ChildGrid = new Syncfusion.EJ2.Grids.Grid() {
15-
DataSource = (IEnumerable<object>)ViewBag.DataSource,
16-
QueryString = "EmployeeID",
17-
Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
16+
@{
17+
var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
18+
{
19+
DataSource = (IEnumerable<object>)ViewBag.DataSource,
20+
QueryString = "EmployeeID",
21+
Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
1822
new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
1923
new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
2024
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
2125
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
22-
},
23-
ChildGrid = SecondChildGrid
24-
};
25-
}
26+
},
27+
ChildGrid = SecondChildGrid
28+
};
29+
}
2630

27-
<ejs-grid id="HierarchyPrint" dataSource="@ViewBag.EmpDataSource" childGrid="ChildGrid" hierarchyPrintMode="Expanded" toolbar="@(new List<string>() {"Print" })" >
31+
<div style="display: flex">
32+
<label style="padding: 3px 10px 26px 0;font-weight:bold"> Select Mode: </label>
33+
<span style="height:fit-content">
34+
<ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData" change="onModeChange"></ejs-dropdownlist>
35+
</span>
36+
</div>
37+
<ejs-grid id="HierarchyPrint" dataSource="@ViewBag.EmpDataSource" childGrid="ChildGrid" toolbar="@(new List<string>() {"Print" })">
2838
<e-grid-columns>
2939
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
3040
<e-grid-column field="FirstName" headerText="Name" width="120"></e-grid-column>
31-
<e-grid-column field="LastName" headerText="Last Name" width="170"></e-grid-column>
41+
<e-grid-column field="LastName" headerText="Last Name" width="170"></e-grid-column>
3242
<e-grid-column field="City" headerText="City" textAlign="Right" width="135"></e-grid-column>
3343
</e-grid-columns>
3444
</ejs-grid>
3545

46+
<script>
47+
function onModeChange(args) {
48+
document.getElementById('HierarchyPrint').ej2_instances[0].hierarchyPrintMode = args.value;
49+
};
50+
51+
</script>
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
public IActionResult Index()
22
{
3-
ViewBag.dataSource = OrderDetails.GetAllRecords();
3+
ViewBag.DataSource = OrdersDetails.GetAllRecords();
4+
ViewBag.EmployeeData =Employees.GetAllRecords();
45
return View();
56
}
Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,42 @@
11
<div>
22
<B>Master Grid</B>
3-
@Html.EJS().Grid("masterGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").SelectedRowIndex(0).Columns(col =>
4-
{
5-
col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Add();
6-
col.Field("OrderID").HeaderText("OrderID").Add();
7-
col.Field("CustomerID").HeaderText("FirstName").Add();
8-
}).RowSelected("selected").BeforePrint("beforePrint").Toolbar(new List<string>() { "Print" }).Render()
3+
@Html.EJS().Grid("masterGrid").DataSource((IEnumerable<object>)ViewBag.EmployeeData).SelectedRowIndex(1).Columns(col =>
4+
{
5+
col.Field("ContactName").HeaderText("Customer Name").Width(150).Add();
6+
col.Field("CompanyName").HeaderText("CompanyName").Width(150).Add();
7+
col.Field("Address").HeaderText("Address").Width(150).Add();
8+
col.Field("Country").HeaderText("Country").Width(130).Add();
9+
10+
}).RowSelected("rowSelected").BeforePrint("beforePrint").Toolbar(new List<string>() { "Print" }).Render()
911
</div>
10-
<p><div class='e-statustext'> Showing orders of Customer: <b id=key></b></div></p>
12+
<p><div style="padding: 8px 0px 10px 0px;" class='e-statustext'> Showing orders of Customer: <b id=key></b></div></p>
1113
<div>
12-
@Html.EJS().Grid("detailGrid").DataSource((IEnumerable<object>)ViewBag.dataSource1).Columns(col =>
13-
{
14-
col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Add();
15-
col.Field("ShipCountry").HeaderText("ShipCountry").Add();
16-
col.Field("ShipName").HeaderText("ShipName").Add();
17-
}).Render()
14+
@Html.EJS().Grid("childGrid").Columns(col =>
15+
{
16+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
17+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
18+
col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
19+
col.Field("ShipAddress").HeaderText("Ship Address").Width("150").Add();
20+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
21+
22+
23+
}).Render()
1824
</div>
1925
<script>
20-
function selected(args) {
21-
var selectedRecord = args.data;
22-
var data = @Html.Raw(Json.Encode(ViewBag.datasource));
23-
var employeeID = args.data.EmployeeID;
24-
var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false).take(10));
25-
var grid = document.getElementById("detailGrid").ej2_instances[0];
26-
document.getElementById('key').innerHTML = selectedRecord.EmployeeID;
27-
grid.dataSource = new ej.data.DataManager(detaildata.slice(0, 5)).dataSource.json;
28-
}
29-
function beforePrint(args) {
30-
var customEle = document.createElement('div');
31-
var grid = document.getElementById("detailGrid").ej2_instances[0];
32-
customEle.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
33-
customEle.appendChild(document.createElement('br'));
34-
args.element.append(customEle);
35-
}
26+
function rowSelected(args) {
27+
let selectedRecord = args.data;
28+
var data = @Html.Raw(Json.Encode(ViewBag.Datasource));
29+
var employeeID = args.data.EmployeeID;
30+
var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false));
31+
var grid = document.getElementById("childGrid").ej2_instances[0];
32+
grid.dataSource = new ej.data.DataManager(detaildata).dataSource.json;
33+
document.getElementById("key").innerHTML = selectedRecord.ContactName;
34+
};
35+
function beforePrint(args) {
36+
var customEle = document.createElement('div');
37+
var grid = document.getElementById("childGrid").ej2_instances[0];
38+
customEle.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
39+
customEle.appendChild(document.createElement('br'));
40+
args.element.append(customEle);
41+
};
3642
</script>
Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,43 @@
11
@using System.Text.Json;
22

33
<div>
4-
<ejs-grid id="masterGrid" dataSource="@ViewBag.dataSource" selectedRowIndex="0" toolbar="@(new List<string>() {"Print"})" rowSelected="selected" beforePrint="beforePrint">
4+
<ejs-grid id="masterGrid" dataSource="@ViewBag.employeeDataSource" selectedRowIndex="1" toolbar="@(new List<string>() { "Print" })" rowSelected="rowSelected" beforePrint="beforePrint">
55
<e-grid-columns>
6-
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
7-
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
8-
<e-grid-column field="CustomerID" headerText="First Name" width="150"></e-grid-column>
6+
<e-grid-column field="ContactName" headerText="Contact Name" width="150"></e-grid-column>
7+
<e-grid-column field="CompanyName" headerText="Company Name" width="150"></e-grid-column>
8+
<e-grid-column field="Address" headerText="Address" width="150"></e-grid-column>
9+
<e-grid-column field="Country" headerText="Country" width="130"></e-grid-column>
910
</e-grid-columns>
1011
</ejs-grid>
1112
</div>
12-
<p><div class='e-statustext'> Showing orders of Customer: <b id=key></b></div></p>
13-
<div>
14-
<ejs-grid id="childGrid" dataSource="@ViewBag.dataSource">
15-
<e-grid-columns>
16-
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
17-
<e-grid-column field="ShipCountry" headerText="Ship Country"></e-grid-column>
18-
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
19-
</e-grid-columns>
20-
</ejs-grid>
21-
</div>
13+
<p><div style="padding: 8px 0px 10px 0px;" class='e-statustext'> Showing orders of Customer: <b id=key></b></div></p>
14+
15+
<ejs-grid id="childGrid">
16+
<e-grid-columns>
17+
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
18+
<e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
19+
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
20+
<e-grid-column field="ShipAddress" headerText="ShipAddress" width="150"></e-grid-column>
21+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
22+
</e-grid-columns>
23+
</ejs-grid>
2224

2325
<script>
24-
function selected(args) {
25-
var selectedRecord = args.data;
26-
var data = @Html.Raw(JsonSerializer.Serialize(ViewBag.datasource));
26+
function rowSelected(args) {
27+
let selectedRecord = args.data;
28+
var data = @Html.Raw(JsonSerializer.Serialize(ViewBag.DataSource));
2729
var employeeID = args.data.EmployeeID;
28-
var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false).take(10));
30+
var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false));
2931
var grid = document.getElementById("childGrid").ej2_instances[0];
30-
document.getElementById('key').innerHTML = selectedRecord.EmployeeID;
31-
grid.dataSource = new ej.data.DataManager(detaildata.slice(0, 5)).dataSource.json;
32-
}
32+
grid.dataSource = new ej.data.DataManager(detaildata).dataSource.json;
33+
document.getElementById("key").innerHTML = selectedRecord.ContactName;
34+
};
35+
3336
function beforePrint(args) {
3437
var customEle = document.createElement('div');
3538
var grid = document.getElementById("childGrid").ej2_instances[0];
3639
customEle.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
3740
customEle.appendChild(document.createElement('br'));
3841
args.element.append(customEle);
39-
}
42+
};
4043
</script>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
public IActionResult Index()
2+
{
3+
ViewBag.DataSource = OrdersDetails.GetAllRecords();
4+
return View();
5+
}

0 commit comments

Comments
 (0)