Uncaught TypeError: $(...).data(...).saveAsPDF is not a function. kendo Grid

Question

I am trying to export data to pdf in kendo grid.

Grid:

    $("#tax_lists").kendoGrid({
        toolbar: ["excel","pdf"],
        excel: {
            allPages: true,
            fileName: "Products.xlsx"
        },
        pdf: {
            allPages: true,
            avoidLinks: true,
            paperSize: "A4",
            margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
            landscape: true,
            repeatHeaders: true,
            template: $("#page-template").html(),
            scale: 0.8
        },
        dataSource: sData,
        sortable: true,
        resizable: true,
          columns: [
          {hidden: true, field: "TaxStatementID",attributes:{"class":"tax_statement_id"}},
          {field: "Month", title: "Month"},
          {field: "AnnualSalary", title: "Annual Salary",attributes:{"class":"AnnualSalary"},footerTemplate: "<div><b>Sum</b> #= compute('.AnnualSalary')#</div>"},
          {field: "MonthlySalary", title: "Monthly Salary",attributes:{"class":"MonthlySalary"},footerTemplate: "<div><b>Sum</b> #= compute('.MonthlySalary')#</div>"},
          {field: "SlabNo", title: "Tax Slab"},
          {field: "MonthlyTax", title: "Monthly Tax", attributes:{"class":"monthly-tax"},footerTemplate: "<div><b>Sum</b> #= compute('.monthly-tax')#</div>"},
          {field: "TaxAdjustment", title: "Tax Adjustment",template:"#=TaxAdjustment#"},
          {field: "TaxAreas", title: "Tax Arrears"},
          {title: "Tax Payable",template:"#=adjustment_type==1?parseFloat(MonthlyTax)+parseFloat(TaxAdjustment)+parseFloat(TaxAreas):(parseFloat(MonthlyTax)+parseFloat(TaxAreas))-parseFloat(TaxAdjustment)#", attributes:{"class":"TaxPayable"},footerTemplate: "<div><b>Sum</b> #= compute('.TaxPayable')#</div>"},
          {hidden: true, field: "employee_id",attributes:{"class":"employee_id"}},
          {hidden: true, field: "employment_id",attributes:{"class":"employment_id"}},
          ],
      });

First I try kendo toolbar pdf but it's not working, it refresesh the page instead of exporting to pdf. Then I place the button at the top of the grid.

<button id="grid-pdf">Export to PDF</button>

and define a function

Function:

$("#grid-pdf").kendoButton(
    {
        click:function(){
        var grid = $("#tax_lists").data("kendoGrid").saveAsPDF();
        }
    });

Compute function for calculating sum manually

    function compute(){
    $(cls).each(function() {
        if (cls==".AnnualSalary") {
            AnnualSalary += parseInt($(this).text());
        }else if(cls==".MonthlySalary"){
            MonthlySalary += parseInt($(this).text());
        }else if(cls==".monthly-tax"){
            monthlyTax += parseInt($(this).text());
        }else{
            TaxPayable +=parseInt($(this).text());
        }
    });
    if (cls==".AnnualSalary") {
        return AnnualSalary;
    }else if(cls==".MonthlySalary"){
        return MonthlySalary;
    }else if(cls=".monthly-tax"){
        return monthlyTax;
    }else{
        return TaxPayable;
    }
}

again fail it says:

Uncaught TypeError: $(...).data(...).saveAsPDF is not a function*

Resources i used:

<script type="text/javascript" src="<?=base_url('assets/plugins/kendo/jszip.min.js')?>"></script>
<script type="text/javascript" src="<?=base_url('assets/plugins/kendo/kendo.all.min.js')?>"></script>
<script type="text/javascript" src="<?=base_url('assets/plugins/kendo/pako_deflate.min.js')?>"></script>

any idea what's going wrong here...

Answer 1

It would be better if you provided a working jsfiddle showing the issue.

Anyway, I created a jsfiddle using your code with some arbitrary data. You can find it here. Once you provide more details then I can adjust the code if it is required.

This is your code modified:

 $("#tax_lists").kendoGrid({
     toolbar: ["excel", "pdf"],
  excel: {
    allPages: true,
    fileName: "Products.xlsx"
  },
  pdf: {
    allPages: true,
    avoidLinks: true,
    paperSize: "A4",
    margin: {
      top: "2cm",
      left: "1cm",
      right: "1cm",
      bottom: "1cm"
    },
    landscape: true,
    repeatHeaders: true,
    template: $("#page-template").html(),
    scale: 0.8
  },
  dataSource: {
    data: [{
      "Month": 1,
      "AnnualSalary": 9.2,
      "MonthlySalary": 1994,
      "MonthlyTax": "The Shawshank Redemption"
    }]
  },
  sortable: true,
  resizable: true,
  columns: [{
    hidden: true,
    field: "TaxStatementID",
    attributes: {
      "class": "tax_statement_id"
    }
  }, {
    field: "Month",
    title: "Month"
  }, {
    field: "AnnualSalary",
    title: "Annual Salary",
    attributes: {
      "class": "AnnualSalary"
    }
  }, {
    field: "MonthlySalary",
    title: "Monthly Salary",
    attributes: {
      "class": "MonthlySalary"
    }
  }, {
    field: "SlabNo",
    title: "Tax Slab"
  }, {
    field: "MonthlyTax",
    title: "Monthly Tax",
    attributes: {
      "class": "monthly-tax"
    }
  }],
});