Search results

You can use the print method by importing from ej2-base package. Here, the Select event in the dropdown and the dataBound event are used to print the single/multiple sheets of data. To print the single/multiple sheets, use the dropdown button and select the Print (or) Print All option. In the following sample, you can be able to print the single/multiple sheets.

razor
printController.cs
Copied to clipboard
@Html.EJS().DropDownButton("element").Content("Print").Items((IEnumerable<object>)ViewBag.items).Select("itemSelect").Render()

@Html.EJS().Spreadsheet("spreadsheet").DataBound("dataBound").Created("created")Sheets(sheet =>
{
    sheet.Name("Budget").IsProtected(true).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>
    var printElement = createElement("div", {
    className: "e-sheet-panel",
    innerHTML:
        '<div class="e-spreadsheet-print"></div><div class="e-sheet"><div class="e-main-panel style="height:100%" style="overflow: unset"><div class="e-sheet-content" ></div></div></div>'
    }); // creating same hierarchy of element as DOM
    var isPrint = false;

    function dataBound() {
        if (isPrint) {
      printElement.querySelector(".e-sheet-content").innerHTML += document
        .querySelector(".e-sheet-content").outerHTML;
      var usedRange = this.getActiveSheet().usedRange;
      var tbody = printElement.querySelector('.e-sheet-content').children[this.activeSheetIndex].querySelector('tbody');
      for (var i = tbody.getElementsByClassName('e-row').length; i >= 0; i--) {
        if (tbody.getElementsByClassName('e-row')[i] && parseInt(tbody.getElementsByClassName('e-row')[i].getAttribute('aria-rowindex')) > usedRange.rowIndex + 1) {
          tbody.getElementsByClassName('e-row')[i].remove();
        }
      }
      var sheets = this.sheets;
      if (sheets.length - 1 === this.activeSheetIndex) {
        var count = printElement.querySelector(".e-sheet-content").childElementCount;
        if (count > 1) {
          for (var i = 0; i < count; i++) {
            (printElement.querySelector('.e-sheet-content').children[i].getElementsByClassName('e-virtualtrack')[0] as HTMLElement).style.height = 'auto';
            printElement.querySelector('.e-sheet-content').children[i].setAttribute('style', 'page-break-after: always;')
          }
        }
        print(printElement);
        isPrint = false;
        printElement.querySelector(".e-sheet-content").innerHTML = '';
      } else {
        if (sheets[this.activeSheetIndex + 1]) {
          this.goTo(sheets[this.activeSheetIndex + 1].name + "!A1");
        }
      }
    }
    }
    function itemSelect(args) {
        if (args.item.text === 'Print') {
            printElement.querySelector(".e-sheet-content").innerHTML = document.querySelector(
                ".e-sheet-content"
            ).outerHTML; //  To add the spreadsheet table
            debugger
            var usedRange = this.getActiveSheet().usedRange;
            var tbody = printElement.querySelector('tbody');
            for (var i = tbody.getElementsByClassName('e-row').length; i >= 0; i--) {
                if (tbody.getElementsByClassName('e-row')[i] && parseInt(tbody.getElementsByClassName('e-row')[i].getAttribute('aria-rowindex')) > usedRange.rowIndex + 1) {
                tbody.getElementsByClassName('e-row')[i].remove();
                }
            }
            (printElement.querySelector('.e-sheet-content').children[0].getElementsByClassName('e-virtualtrack')[0] as HTMLElement).style.height = 'auto';
            print(printElement);
            printElement.querySelector(".e-sheet-content").innerHTML = '';
            }
            if (args.item.text === 'Print All') {
            var sheets = this.sheets;
            if (this.activeSheetIndex === 0) {
                printElement.querySelector(".e-sheet-content").innerHTML = document.querySelector(
                ".e-sheet-content"
                ).outerHTML; //  To add the spreadsheet table

                var usedRange = this.getActiveSheet().usedRange;
                var tbody = printElement.querySelector('tbody');
                for (var i = tbody.getElementsByClassName('e-row').length; i >= 0; i--) {
                if (tbody.getElementsByClassName('e-row')[i] && parseInt(tbody.getElementsByClassName('e-row')[i].getAttribute('aria-rowindex')) > usedRange.rowIndex + 1) {
                    tbody.getElementsByClassName('e-row')[i].remove();
                }
                }

                if (sheets[this.activeSheetIndex + 1]) {
                this.goTo(sheets[this.activeSheetIndex + 1].name + "!A1");
                isPrint = true;
                } else {
                print(printElement);
                printElement.querySelector(".e-sheet-content").innerHTML = '';
                }
            } else {
                if (sheets[0]) {
                this.goTo(sheets[0].name + "!A1");
                isPrint = true;
                }
            }
        }
    }
    function created() {
        this.cellFormat({ fontWeight: 'bold', fontSize: '12pt'}, 'A1:E1');
        this.cellFormat({ color: '#10c469' }, 'B1:B10');
    }

</script>
Copied to clipboard
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 = "Print"
            });
            items.Add(new
            {
                text = "PrintAll"
            });
            ViewBag.items = items;
            ViewBag.budgetData = data1;
            ViewBag.salaryData = data2;
            return View();
        }