Uncaught TypeError: $ (...). Data (...). SaveAsPDF is not a function. kendo grid

Question

I am trying to export data to pdf in a 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"}}, ], }); 

At first I try the kendo toolbar pdf, but it does not work, it refreshes the page, and does not export to pdf. Then I put the button at the top of the grid.

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

and define a function

Functions:

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

Calculate a function to calculate the amount 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; } } 

fails again:

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 is going wrong here ...

Answer 1

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

Anyway, I created jsfiddle using your code with some arbitrary data. You can find it here . Once you provide more details, I can customize the code if necessary.

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" } }], });