documentation(900021):Print Topic

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

@@ -1,5 +1,7 @@
 public IActionResult Index()
 {
-    ViewBag.DataSource = OrderDetails.GetAllRecords();
+    ViewBag.DataSource = OrdersDetails.GetAllRecords();
+    ViewBag.dropdownData = new string[] { "AllPages", "CurrentPage" };
+
     return View();
 } 

ej2-asp-core-mvc/code-snippet/grid/print/current-page/razor

@@ -1,9 +1,22 @@
-@Html.EJS().Grid("Print").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+<div style="display: flex">
+  <label style="padding: 3px 10px 26px 0;font-weight:bold">  Sekect print mode: </label>
+  <span style="height:fit-content">
+    @Html.EJS().DropDownList("dropdown").Index(0).DataSource(@ViewBag.dropdownData).Change("change").Render()
+  </span>
+</div>
+
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
 {
   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
+  col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
   col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
 
-}).AllowPaging().Toolbar(new List<string>() { "Print" }).PrintMode(Syncfusion.EJ2.Grids.PrintMode.CurrentPage).Render()
+}).AllowPaging().PageSettings(page => { page.PageSize(6); }).Toolbar(new List<string>() { "Print" }).Render()
+
+<script>
+  function change(args) {
+    document.getElementById('Grid').ej2_instances[0].printMode = args.value;
+  }
+</script>

ej2-asp-core-mvc/code-snippet/grid/print/current-page/tagHelper

@@ -1,8 +1,23 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Print" })" printMode="CurrentPage" > 
+<div style="display: flex">
+    <label style="padding: 3px 10px 26px 0;font-weight:bold">  Sekect print mode: </label>
+    <span style="height:fit-content">
+        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData" change="change"></ejs-dropdownlist>
+    </span>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging='true' toolbar="@(new List<string>() { "Print" })">
+    <e-grid-pagesettings pageSize="6">
+    </e-grid-pagesettings>
     <e-grid-columns>
         <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
         <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
+<script>
+    function change(args)
+    {
+    document.getElementById('Grid').ej2_instances[0].printMode = args.value;
+    }
+</script>

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

@@ -1,5 +1,5 @@
 public IActionResult Index()
 {
-    ViewBag.DataSource = OrderDetails.GetAllRecords();
+    ViewBag.DataSource = OrdersDetails.GetAllRecords();
     return View();
 } 

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

@@ -1,5 +1,6 @@
-@Html.EJS().Button("printbtn").Content("Print").IsPrimary(true).Render()
-
+<div style="padding-bottom:20px">
+  @Html.EJS().Button("printbtn").Content("Print").IsPrimary(true).Render()
+</div>
 @Html.EJS().Grid("Print").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
 {
   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

@@ -1,10 +1,13 @@
-<ejs-button id="printbtn" content="Print" isPrimary="true"></ejs-button>
+<div style="padding-bottom:20px">
+  <ejs-button id="printbtn" content="Print" isPrimary="true"></ejs-button>
+</div>
 <ejs-grid id="Grid" dataSource="@ViewBag.DataSource"> 
     <e-grid-columns>
         <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
         <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
-        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
-        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
 

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

@@ -3,5 +3,7 @@ public IActionResult Index()
     ViewBag.DataSource =  OrdersDetails.GetAllRecords();;
     ViewBag.EmpDataSource = EmployeeView.GetAllRecords();
     ViewBag.CustomerDataSource = Customer.GetAllRecords();
+    ViewBag.dropdownData = new string[] { "Expanded", "All", "None" };
+
     return View();
 } 

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

@@ -5,6 +5,7 @@
       {
         new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
         new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Ship Country", Width="90" },
+        new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="ShipAddress", Width="90" },
       }
   };
 
@@ -21,11 +22,23 @@
     };
 }
 
-@Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable<object>)ViewBag.EmpDataSource).HierarchyPrintMode(Syncfusion.EJ2.Grids.HierarchyGridPrintMode.All).Columns(col =>
-{
-   col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("FirstName").HeaderText("Name").Width("125").Add();
-   col.Field("Country").HeaderText("Country").Width("180").Add();
-   col.Field("City").HeaderText("City").Width("135").Add();
+<div style="display: flex">
+  <label style="padding: 3px 10px 26px 0;font-weight:bold">  Select Mode: </label>
+  <span style="height:fit-content">
+    @Html.EJS().DropDownList("dropdown").Index(0).DataSource(@ViewBag.dropdownData).Change("onModeChange").Render()
+  </span>
+</div>
+ @Html.EJS().Grid("HierarchyPrint").DataSource((IEnumerable<object>)ViewBag.EmpDataSource).Columns(col =>
+ {
+    col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("FirstName").HeaderText("Name").Width("125").Add();
+    col.Field("Country").HeaderText("Country").Width("180").Add();
+    col.Field("City").HeaderText("City").Width("135").Add();
 
-}).AllowSorting().Toolbar(new List<string>() { "Print"}).ChildGrid(ChildGrid).Render()
+ }).Toolbar(new List<string>() { "Print" }).ChildGrid(ChildGrid).Render()
+ <script>
+     function onModeChange(args) {
+         document.getElementById('HierarchyPrint').ej2_instances[0].hierarchyPrintMode = args.value;
+     };
+
+ </script>

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

@@ -1,35 +1,51 @@
- @{ 
-     var SecondChildGrid = new Syncfusion.EJ2.Grids.Grid()
-     {
-         DataSource = (IEnumerable<object>)ViewBag.CustomerDataSource,
-         QueryString = "CustomerID",
-         Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
+
+@{
+    var SecondChildGrid = new Syncfusion.EJ2.Grids.Grid()
+        {
+            DataSource = (IEnumerable<object>)ViewBag.CustomerDataSource,
+            QueryString = "CustomerID",
+            Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
              new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
              new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCountry", HeaderText="Country", Width="90" },
-        }
-     };
- }
+             new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="Ship Address", Width="90" },
+
+            }
+        };
+}
 
- @{ 
-     var ChildGrid = new Syncfusion.EJ2.Grids.Grid() {
-         DataSource = (IEnumerable<object>)ViewBag.DataSource,
-         QueryString = "EmployeeID",
-         Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
+@{
+    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
+        {
+                DataSource = (IEnumerable<object>)ViewBag.DataSource,
+                QueryString = "EmployeeID",
+                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
                 new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
                 new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right },
                 new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
                 new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
-        },
-         ChildGrid = SecondChildGrid
-     };
- }
+            },
+                ChildGrid = SecondChildGrid
+        };
+}
 
-<ejs-grid id="HierarchyPrint" dataSource="@ViewBag.EmpDataSource" childGrid="ChildGrid" hierarchyPrintMode="Expanded" toolbar="@(new List<string>() {"Print" })" >
+<div style="display: flex">
+    <label style="padding: 3px 10px 26px 0;font-weight:bold">  Select Mode: </label>
+    <span style="height:fit-content">
+        <ejs-dropdownlist id="dropdown" index="0" dataSource="@ViewBag.dropdownData" change="onModeChange"></ejs-dropdownlist>
+    </span>
+</div>
+<ejs-grid id="HierarchyPrint" dataSource="@ViewBag.EmpDataSource" childGrid="ChildGrid"  toolbar="@(new List<string>() {"Print" })">
     <e-grid-columns>
         <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
         <e-grid-column field="FirstName" headerText="Name" width="120"></e-grid-column>
-        <e-grid-column field="LastName" headerText="Last Name"  width="170"></e-grid-column>
+        <e-grid-column field="LastName" headerText="Last Name" width="170"></e-grid-column>
         <e-grid-column field="City" headerText="City" textAlign="Right" width="135"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
 
+<script>
+    function onModeChange(args) {
+        document.getElementById('HierarchyPrint').ej2_instances[0].hierarchyPrintMode = args.value;
+    };
+
+</script>

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

@@ -1,5 +1,6 @@
 public IActionResult Index()
 {
-    ViewBag.dataSource = OrderDetails.GetAllRecords();
+    ViewBag.DataSource = OrdersDetails.GetAllRecords();
+    ViewBag.EmployeeData =Employees.GetAllRecords();
     return View();
 } 

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

@@ -1,36 +1,42 @@
 <div>
     <B>Master Grid</B>
-    @Html.EJS().Grid("masterGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").SelectedRowIndex(0).Columns(col =>
-        {
-            col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Add();
-            col.Field("OrderID").HeaderText("OrderID").Add();
-            col.Field("CustomerID").HeaderText("FirstName").Add();
-        }).RowSelected("selected").BeforePrint("beforePrint").Toolbar(new List<string>() { "Print" }).Render()
+    @Html.EJS().Grid("masterGrid").DataSource((IEnumerable<object>)ViewBag.EmployeeData).SelectedRowIndex(1).Columns(col =>
+{
+   col.Field("ContactName").HeaderText("Customer Name").Width(150).Add();
+   col.Field("CompanyName").HeaderText("CompanyName").Width(150).Add();
+   col.Field("Address").HeaderText("Address").Width(150).Add();
+   col.Field("Country").HeaderText("Country").Width(130).Add();
+
+}).RowSelected("rowSelected").BeforePrint("beforePrint").Toolbar(new List<string>() { "Print" }).Render()
 </div>
-<p><div class='e-statustext'> Showing orders of Customer:  <b id=key></b></div></p>
+<p><div style="padding: 8px 0px 10px 0px;" class='e-statustext'> Showing orders of Customer:  <b id=key></b></div></p>
 <div>
-    @Html.EJS().Grid("detailGrid").DataSource((IEnumerable<object>)ViewBag.dataSource1).Columns(col =>
-                {
-                    col.Field("EmployeeID").HeaderText("EmployeeID").IsPrimaryKey(true).Add();
-                    col.Field("ShipCountry").HeaderText("ShipCountry").Add();
-                    col.Field("ShipName").HeaderText("ShipName").Add();
-                }).Render()
+@Html.EJS().Grid("childGrid").Columns(col =>
+{
+   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+   col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
+   col.Field("ShipAddress").HeaderText("Ship Address").Width("150").Add();
+   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+
+
+}).Render()
 </div>
 <script>
-    function selected(args) {
-        var selectedRecord = args.data;
-        var data = @Html.Raw(Json.Encode(ViewBag.datasource));
-        var employeeID = args.data.EmployeeID;
-        var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false).take(10));
-        var grid = document.getElementById("detailGrid").ej2_instances[0];
-        document.getElementById('key').innerHTML = selectedRecord.EmployeeID;
-        grid.dataSource = new ej.data.DataManager(detaildata.slice(0, 5)).dataSource.json;
-    }
-    function beforePrint(args) {
-        var customEle = document.createElement('div');
-        var grid = document.getElementById("detailGrid").ej2_instances[0];
-        customEle.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
-        customEle.appendChild(document.createElement('br'));
-        args.element.append(customEle);
-    }
+function rowSelected(args) {
+    let selectedRecord = args.data;
+    var data = @Html.Raw(Json.Encode(ViewBag.Datasource));
+    var employeeID = args.data.EmployeeID;
+    var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false));
+    var grid = document.getElementById("childGrid").ej2_instances[0];
+    grid.dataSource = new ej.data.DataManager(detaildata).dataSource.json;
+    document.getElementById("key").innerHTML = selectedRecord.ContactName;
+};
+function beforePrint(args) {
+    var customEle = document.createElement('div');
+    var grid = document.getElementById("childGrid").ej2_instances[0];
+    customEle.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
+    customEle.appendChild(document.createElement('br'));
+    args.element.append(customEle);
+};
 </script>

ej2-asp-core-mvc/code-snippet/grid/print/masterdetailgrid/tagHelper

@@ -1,40 +1,43 @@
 @using System.Text.Json;
 
 <div>
-    <ejs-grid id="masterGrid" dataSource="@ViewBag.dataSource" selectedRowIndex="0" toolbar="@(new List<string>() {"Print"})" rowSelected="selected" beforePrint="beforePrint">
+    <ejs-grid id="masterGrid" dataSource="@ViewBag.employeeDataSource" selectedRowIndex="1" toolbar="@(new List<string>() { "Print" })" rowSelected="rowSelected" beforePrint="beforePrint">
         <e-grid-columns>
-            <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
-            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
-            <e-grid-column field="CustomerID" headerText="First Name" width="150"></e-grid-column>
+            <e-grid-column field="ContactName" headerText="Contact Name" width="150"></e-grid-column>
+            <e-grid-column field="CompanyName" headerText="Company Name" width="150"></e-grid-column>
+            <e-grid-column field="Address" headerText="Address" width="150"></e-grid-column>
+            <e-grid-column field="Country" headerText="Country" width="130"></e-grid-column>
         </e-grid-columns>
     </ejs-grid>
 </div>
-<p><div class='e-statustext'> Showing orders of Customer:  <b id=key></b></div></p>
-<div>
-    <ejs-grid id="childGrid" dataSource="@ViewBag.dataSource">
-        <e-grid-columns>
-            <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
-            <e-grid-column field="ShipCountry" headerText="Ship Country"></e-grid-column>
-            <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
-        </e-grid-columns>
-    </ejs-grid>
-    </div>
+<p><div style="padding: 8px 0px 10px 0px;" class='e-statustext'> Showing orders of Customer:  <b id=key></b></div></p>
+
+<ejs-grid id="childGrid">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" format='C' textAlign="Right" width="130"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
+        <e-grid-column field="ShipAddress" headerText="ShipAddress" width="150"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
 
 <script>
-    function selected(args) {
-        var selectedRecord = args.data;
-        var data = @Html.Raw(JsonSerializer.Serialize(ViewBag.datasource));
+    function rowSelected(args) {
+        let selectedRecord = args.data;
+        var data = @Html.Raw(JsonSerializer.Serialize(ViewBag.DataSource));
         var employeeID = args.data.EmployeeID;
-        var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false).take(10));
+        var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false));
         var grid = document.getElementById("childGrid").ej2_instances[0];
-        document.getElementById('key').innerHTML = selectedRecord.EmployeeID;
-        grid.dataSource = new ej.data.DataManager(detaildata.slice(0, 5)).dataSource.json;
-    }
+        grid.dataSource = new ej.data.DataManager(detaildata).dataSource.json;
+        document.getElementById("key").innerHTML = selectedRecord.ContactName;
+    };
+
     function beforePrint(args) {
         var customEle = document.createElement('div');
         var grid = document.getElementById("childGrid").ej2_instances[0];
         customEle.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + grid.element.innerHTML;
         customEle.appendChild(document.createElement('br'));
         args.element.append(customEle);
-    }
+    };
 </script>

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

@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource = OrdersDetails.GetAllRecords();
+    return View();
+}