documentation(EJ2-891499): Added UG content and sample for note and print feature

ej2-asp-core-mvc/code-snippet/spreadsheet/note-cs1/notesController.cs

@@ -0,0 +1,31 @@
+public IActionResult Open(IFormCollection openRequest)
+{
+    OpenRequest open = new OpenRequest();
+    open.File = openRequest.Files[0];
+    return Content(Workbook.Open(open));
+}
+
+public void Save(SaveSettings saveSettings)
+{
+    Workbook.Save(saveSettings);
+}
+
+public IActionResult Index()
+{
+    List<object> defaultData = new List<object>()
+            {
+                new { Item Name= "Casual Shoes", Date= "02/14/2014", Time= "11=34=32 AM", Quantity= "10", Price= "20", Amount= "200", Discount= "1", Profit= "10" },
+                new { Item Name= "Sports Shoes", Date= "06/11/2014", Time= "05=56=32 AM", Quantity= "20", Price= "30", Amount= "600", Discount= "5", Profit= "50" },
+                new { Item Name= "Formal Shoes", Date= "07/27/2014", Time= "03=32=44 AM", Quantity= "20", Price= "15", Amount= "300", Discount= "7", Profit= "27" },
+                new { Item Name= "Sandals & Floaters", Date= "11/21/2014", Time= "06=23=54 AM", Quantity= "15", Price= "20", Amount= "300", Discount= "11", Profit= "67" },
+                new { Item Name= "Flip- Flops & Slippers", Date= "06/23/2014", Time= "12=43=59 AM", Quantity= "30", Price= "10", Amount= "300", Discount= "10", Profit= "70" },
+                new { Item Name= "Sneakers", Date= "07/22/2014", Time= "10=55=53 AM", Quantity= "40", Price= "20", Amount= "800", Discount= "13", Profit= "66" },
+                new { Item Name= "Running Shoes", Date= "02/04/2014", Time= "03=44=34 AM", Quantity= "20", Price= "10", Amount= "200", Discount= "3", Profit= "14" },
+                new { Item Name= "Loafers", Date= "11/30/2014", Time= "03=12=52 AM", Quantity= "31", Price= "10", Amount= "310", Discount= "6", Profit= "29" },
+                new { Item Name= "Cricket Shoes", Date= "07/09/2014", Time= "11=32=14 AM", Quantity= "41", Price= "30", Amount= "1210", Discount= "12", Profit= "166" },
+                new { Item Name= "T-Shirts", Date= "10/31/2014", Time= "12=01=44 AM", Quantity= "50", Price= "10", Amount= "500", Discount= "9", Profit= "55" }
+            };
+    ViewBag.DefaultData = data;
+    return View();
+
+}

ej2-asp-core-mvc/code-snippet/spreadsheet/note-cs1/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Open").AllowOpen(true).SaveUrl("Save").AllowSave(true).Created("created").Sheets(sheet =>
+{
+    sheet.Name("Price Details").Ranges(ranges =>
+    {
+        ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();
+    }).Add();
+}).Render()
+
+< script >
+
+    function created() {
+    this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
+    this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1');
+}
+
+</ script >

ej2-asp-core-mvc/code-snippet/spreadsheet/note-cs1/tagHelper

@@ -0,0 +1,18 @@
+<ejs-spreadsheet id="spreadsheet" created="created" openUrl="Open" allowOpen="true" saveUrl="Save" allowSave="true">
+    <e-spreadsheet-sheets>
+        <e-spreadsheet-sheet name="Price Details">
+            <e-spreadsheet-ranges>
+                <e-spreadsheet-range dataSource="ViewBag.DefaultData"></e-spreadsheet-range>
+            </e-spreadsheet-ranges>
+        </e-spreadsheet-sheet>
+    </e-spreadsheet-sheets>
+</ejs-spreadsheet>
+
+
+<script>
+
+    function created() {
+        this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
+        this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1');
+    }
+</script>

ej2-asp-core-mvc/code-snippet/spreadsheet/note-cs2/notesController.cs

@@ -0,0 +1,31 @@
+public IActionResult Open(IFormCollection openRequest)
+{
+    OpenRequest open = new OpenRequest();
+    open.File = openRequest.Files[0];
+    return Content(Workbook.Open(open));
+}
+
+public void Save(SaveSettings saveSettings)
+{
+    Workbook.Save(saveSettings);
+}
+
+public IActionResult Index()
+{
+    List<object> defaultData = new List<object>()
+            {
+                new { Item Name= "Casual Shoes", Date= "02/14/2014", Time= "11=34=32 AM", Quantity= "10", Price= "20", Amount= "200", Discount= "1", Profit= "10" },
+                new { Item Name= "Sports Shoes", Date= "06/11/2014", Time= "05=56=32 AM", Quantity= "20", Price= "30", Amount= "600", Discount= "5", Profit= "50" },
+                new { Item Name= "Formal Shoes", Date= "07/27/2014", Time= "03=32=44 AM", Quantity= "20", Price= "15", Amount= "300", Discount= "7", Profit= "27" },
+                new { Item Name= "Sandals & Floaters", Date= "11/21/2014", Time= "06=23=54 AM", Quantity= "15", Price= "20", Amount= "300", Discount= "11", Profit= "67" },
+                new { Item Name= "Flip- Flops & Slippers", Date= "06/23/2014", Time= "12=43=59 AM", Quantity= "30", Price= "10", Amount= "300", Discount= "10", Profit= "70" },
+                new { Item Name= "Sneakers", Date= "07/22/2014", Time= "10=55=53 AM", Quantity= "40", Price= "20", Amount= "800", Discount= "13", Profit= "66" },
+                new { Item Name= "Running Shoes", Date= "02/04/2014", Time= "03=44=34 AM", Quantity= "20", Price= "10", Amount= "200", Discount= "3", Profit= "14" },
+                new { Item Name= "Loafers", Date= "11/30/2014", Time= "03=12=52 AM", Quantity= "31", Price= "10", Amount= "310", Discount= "6", Profit= "29" },
+                new { Item Name= "Cricket Shoes", Date= "07/09/2014", Time= "11=32=14 AM", Quantity= "41", Price= "30", Amount= "1210", Discount= "12", Profit= "166" },
+                new { Item Name= "T-Shirts", Date= "10/31/2014", Time= "12=01=44 AM", Quantity= "50", Price= "10", Amount= "500", Discount= "9", Profit= "55" }
+            };
+    ViewBag.DefaultData = data;
+    return View();
+
+}

ej2-asp-core-mvc/code-snippet/spreadsheet/note-cs2/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Open").AllowOpen(true).SaveUrl("Save").AllowSave(true).EnableNotes(false).Created("created").Sheets(sheet =>
+{
+    sheet.Name("Price Details").Ranges(ranges =>
+    {
+        ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();
+    }).Add();
+}).Render()
+
+< script >
+
+    function created() {
+    this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
+    this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1');
+}
+
+</ script >

ej2-asp-core-mvc/code-snippet/spreadsheet/note-cs2/tagHelper

@@ -0,0 +1,18 @@
+<ejs-spreadsheet id="spreadsheet" created="created" openUrl="Open" allowOpen="true" saveUrl="Save" allowSave="true" enableNotes="false">
+    <e-spreadsheet-sheets>
+        <e-spreadsheet-sheet name="Price Details">
+            <e-spreadsheet-ranges>
+                <e-spreadsheet-range dataSource="ViewBag.DefaultData"></e-spreadsheet-range>
+            </e-spreadsheet-ranges>
+        </e-spreadsheet-sheet>
+    </e-spreadsheet-sheets>
+</ejs-spreadsheet>
+
+
+<script>
+
+    function created() {
+        this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
+        this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1');
+    }
+</script>

ej2-asp-core-mvc/code-snippet/spreadsheet/note-cs3/notesController.cs

@@ -0,0 +1,31 @@
+public IActionResult Open(IFormCollection openRequest)
+{
+    OpenRequest open = new OpenRequest();
+    open.File = openRequest.Files[0];
+    return Content(Workbook.Open(open));
+}
+
+public void Save(SaveSettings saveSettings)
+{
+    Workbook.Save(saveSettings);
+}
+
+public IActionResult Index()
+{
+    List<object> defaultData = new List<object>()
+            {
+                new { Item Name= "Casual Shoes", Date= "02/14/2014", Time= "11=34=32 AM", Quantity= "10", Price= "20", Amount= "200", Discount= "1", Profit= "10" },
+                new { Item Name= "Sports Shoes", Date= "06/11/2014", Time= "05=56=32 AM", Quantity= "20", Price= "30", Amount= "600", Discount= "5", Profit= "50" },
+                new { Item Name= "Formal Shoes", Date= "07/27/2014", Time= "03=32=44 AM", Quantity= "20", Price= "15", Amount= "300", Discount= "7", Profit= "27" },
+                new { Item Name= "Sandals & Floaters", Date= "11/21/2014", Time= "06=23=54 AM", Quantity= "15", Price= "20", Amount= "300", Discount= "11", Profit= "67" },
+                new { Item Name= "Flip- Flops & Slippers", Date= "06/23/2014", Time= "12=43=59 AM", Quantity= "30", Price= "10", Amount= "300", Discount= "10", Profit= "70" },
+                new { Item Name= "Sneakers", Date= "07/22/2014", Time= "10=55=53 AM", Quantity= "40", Price= "20", Amount= "800", Discount= "13", Profit= "66" },
+                new { Item Name= "Running Shoes", Date= "02/04/2014", Time= "03=44=34 AM", Quantity= "20", Price= "10", Amount= "200", Discount= "3", Profit= "14" },
+                new { Item Name= "Loafers", Date= "11/30/2014", Time= "03=12=52 AM", Quantity= "31", Price= "10", Amount= "310", Discount= "6", Profit= "29" },
+                new { Item Name= "Cricket Shoes", Date= "07/09/2014", Time= "11=32=14 AM", Quantity= "41", Price= "30", Amount= "1210", Discount= "12", Profit= "166" },
+                new { Item Name= "T-Shirts", Date= "10/31/2014", Time= "12=01=44 AM", Quantity= "50", Price= "10", Amount= "500", Discount= "9", Profit= "55" }
+            };
+    ViewBag.DefaultData = data;
+    return View();
+
+}

ej2-asp-core-mvc/code-snippet/spreadsheet/note-cs3/razor

@@ -0,0 +1,30 @@
+@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Open").AllowOpen(true).SaveUrl("Save").AllowSave(true).Created("created").Sheets(sheet =>
+{
+    sheet.Name("Price Details").Ranges(ranges =>
+    {
+        ranges.DataSource((IEnumerable<object>)ViewBag.DefaultData).Add();
+    }).Rows(row =>
+        {
+            row.Index(2).Cells(cell =>
+            {
+                cell.Index(0).Notes("These shoes have the highest sales in terms of quantity this month.").Add();
+            }).Add();
+            row.Index(5).Cells(cell =>
+                {
+                    cell.Index(0).Notes("These shoes have been the most profitable this month.").Add();
+                }).Add();
+        }).Columns(column => {
+            column.Width(130).Add();
+            column.Width(100).Add();
+            column.Width(100).Add();
+        }).Add();
+}).Render()
+
+< script >
+
+    function created() {
+    this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
+    this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1');
+}
+
+</ script >

ej2-asp-core-mvc/code-snippet/spreadsheet/note-cs3/tagHelper

@@ -0,0 +1,37 @@
+<ejs-spreadsheet id="spreadsheet" created="created" openUrl="Open" allowOpen="true" saveUrl="Save" allowSave="true">
+    <e-spreadsheet-sheets>
+        <e-spreadsheet-sheet name="Price Details">
+            <e-spreadsheet-ranges>
+                <e-spreadsheet-range dataSource="ViewBag.DefaultData"></e-spreadsheet-range>
+            </e-spreadsheet-ranges>
+            <e-spreadsheet-rows>
+                <e-spreadsheet-row index="2">
+                    <e-spreadsheet-cells>
+                        <e-spreadsheet-cell index="0"
+                            notes="These shoes have the highest sales in terms of quantity this month."></e-spreadsheet-cell>
+                    </e-spreadsheet-cells>
+                </e-spreadsheet-row>
+                <e-spreadsheet-row index="5">
+                    <e-spreadsheet-cells>
+                        <e-spreadsheet-cell index="0"
+                            notes="These shoes have been the most profitable this month."></e-spreadsheet-cell>
+                    </e-spreadsheet-cells>
+                </e-spreadsheet-row>
+            </e-spreadsheet-rows>
+            <e-spreadsheet-columns>
+                <e-spreadsheet-column width="130"></e-spreadsheet-column>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+            </e-spreadsheet-columns>
+        </e-spreadsheet-sheet>
+    </e-spreadsheet-sheets>
+</ejs-spreadsheet>
+
+
+<script>
+
+    function created() {
+        this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
+        this.cellFormat({ verticalAlign: 'middle' }, 'A1:H1');
+    }
+</script>

ej2-asp-core-mvc/code-snippet/spreadsheet/print-cs2/printController.cs

@@ -0,0 +1,45 @@
+public IActionResult Open(IFormCollection openRequest)
+{
+    OpenRequest open = new OpenRequest();
+    open.File = openRequest.Files[0];
+    return Content(Workbook.Open(open));
+}
+
+public void Save(SaveSettings saveSettings)
+{
+    Workbook.Save(saveSettings);
+}
+
+public IActionResult Index()
+{
+    List<object> data1 = new List<object>()
+    {
+       new { ExpenseType= "Housing",  ProjectedCost= "7000",  ActualCost= "7500",  Difference= "-500"},
+       new { ExpenseType= "Transportation",  ProjectedCost= "500",  ActualCost= "500",  Difference= "0"},
+       new { ExpenseType= "Insurance",  ProjectedCost= "1000",  ActualCost= "1000",  Difference= "0"},
+       new { ExpenseType= "Food",  ProjectedCost= "2000",  ActualCost= "1800",  Difference= "200"},
+       new { ExpenseType= "Pets",  ProjectedCost= "300",  ActualCost= "200",  Difference= "100"},
+       new { ExpenseType= "Personel Care",  ProjectedCost= "500",  ActualCost= "500",  Difference= "0"},
+       new { ExpenseType= "Loan",  ProjectedCost= "1000",  ActualCost= "1000",  Difference= "0"},
+       new { ExpenseType= "Tax",  ProjectedCost= "200",  ActualCost= "200",  Difference= "0"},
+       new { ExpenseType= "Savings",  ProjectedCost= "1000",  ActualCost= "900",  Difference= "100"},
+       new { ExpenseType= "Total",  ProjectedCost= "13500",  ActualCost= "13600",  Difference= "-100"},
+    };
+    List<object> data2 = new List<object>()
+    {
+        new { Earnings= "Basic",  CreditAmount= "20000",  Deductions= "Provident Fund",  DebitAmount= "2400"},
+       new { Earnings= "HRA",  CreditAmount= "8000",  Deductions= "ESI",  DebitAmount= "0"},
+       new { Earnings= "Special Allowance",  CreditAmount= "25000",  Deductions= "Professional Tax",  DebitAmount= "200"},
+       new { Earnings= "Incentives",  CreditAmount= "2000",  Deductions= "TDS",  DebitAmount= "2750"},
+       new { Earnings= "Bonus",  CreditAmount= "1500",  Deductions= "Other Deduction",  DebitAmount= "0"},
+       new { Earnings= "Total Earnings",  CreditAmount= "56500",  Deductions= "Total Deductions",  DebitAmount= "5350"},
+    };
+    List<object> items = new List<object>();
+    items.Add(new { text = "ActiveSheet" });
+    items.Add(new { text = "Workbook" });
+
+    ViewBag.budgetData = data1;
+    ViewBag.salaryData = data2;
+    ViewBag.items = items;
+    return View();
+}

ej2-asp-core-mvc/code-snippet/spreadsheet/print-cs2/razor

@@ -0,0 +1,49 @@
+@Html.EJS().DropDownButton("element").Content("Print").Items((IEnumerable<object>)ViewBag.items).Select("itemSelect").Render()
+<input type="checkbox" id="gridline" /><label for="gridline">Allow Grid Lines</label>
+<input type="checkbox" id="header" /><label for="header">Allow Row Column Header</label>
+
+@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Open").AllowOpen(true).SaveUrl("Save").AllowSave(true).created("created").Sheets(sheet =>
+{
+    sheet.Name("Budget").Ranges(ranges =>
+    {
+        ranges.DataSource((IEnumerable<object>)ViewBag.budgetData).StartCell("A1").Add();
+    }).Columns(column =>
+    {
+        column.Width(100).Add();
+        column.Width(100).Add();
+        column.Width(100).Add();
+        column.Width(100).Add();
+    }).Add();
+    sheet.Name("Salary").Ranges(ranges =>
+    {
+        ranges.DataSource((IEnumerable<object>)ViewBag.salaryData).StartCell("A1").Add();
+    }).Columns(column =>
+    {
+        column.Width(100).Add();
+        column.Width(100).Add();
+        column.Width(100).Add();
+        column.Width(100).Add();
+    }).Add();
+}).Render()
+
+<script>
+
+    function created() {
+        this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
+        this.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
+    }
+
+    function itemSelect(args) {
+        var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
+        if (spreadsheetObj) {
+            const allowGridLines = document.getElementById('gridline');
+            const allowRowColumnHeader = document.getElementById('header');
+            spreadsheetObj.print({
+                type: args.item.text,
+                allowGridLines: allowGridLines.checked,
+                allowRowColumnHeader: allowRowColumnHeader.checked
+            });
+        }
+    }
+
+</script>

ej2-asp-core-mvc/code-snippet/spreadsheet/print-cs2/tagHelper

@@ -0,0 +1,53 @@
+<ejs-dropdownbutton id="element" content="Print" items="ViewBag.items" select="itemSelect"></ejs-dropdownbutton>
+<input type="checkbox" id="gridline" /><label for="gridline">Allow Grid Lines</label>
+<input type="checkbox" id="header" /><label for="header">Allow Row Column Header </label>
+<ejs-spreadsheet id="spreadsheet" openUrl="Open" allowOpen="true" saveUrl="Save" allowSave="true" created="created">
+    <e-spreadsheet-sheets>
+        <e-spreadsheet-sheet name="Budget">
+            <e-spreadsheet-ranges>
+                <e-spreadsheet-range dataSource="ViewBag.budgetData"></e-spreadsheet-range>
+            </e-spreadsheet-ranges>
+            <e-spreadsheet-columns>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+            </e-spreadsheet-columns>
+        </e-spreadsheet-sheet>
+        <e-spreadsheet-sheet name="Salary">
+            <e-spreadsheet-ranges>
+                <e-spreadsheet-range dataSource="ViewBag.salaryData"></e-spreadsheet-range>
+            </e-spreadsheet-ranges>
+            <e-spreadsheet-columns>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+                <e-spreadsheet-column width="100"></e-spreadsheet-column>
+            </e-spreadsheet-columns>
+        </e-spreadsheet-sheet>
+    </e-spreadsheet-sheets>
+</ejs-spreadsheet>
+
+
+
+<script>
+
+    function created() {
+        this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
+        this.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
+    }
+
+    function itemSelect(args) {
+        var spreadsheetObj = document.getElementById("spreadsheet").ej2_instances[0];
+        if (spreadsheetObj) {
+            const allowGridLines = document.getElementById('gridline');
+            const allowRowColumnHeader = document.getElementById('header');
+            spreadsheetObj.print({
+                type: args.item.text,
+                allowGridLines: allowGridLines.checked,
+                allowRowColumnHeader: allowRowColumnHeader.checked
+            });
+        }
+    }
+
+</script>