Uncaught TypeError: $ (...). Data (...). SaveAsPDF ist keine Funktion. Kendo Grid

Question

Ich versuche, Daten in Kendo-Grid zu exportieren.

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

Zuerst versuche ich Kendo Symbolleiste pdf, aber es funktioniert nicht, es die Seite refresesh stattdessen pdf zu exportieren. Dann lege ich den Knopf an der Spitze des Rasters.

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

und definieren eine Funktion

Funktion:

$("#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; 
    } 
} 

wieder fehlschlagen, sagt:

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

Ressourcen i verwendet:

<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> 

eine Ahnung, was falsch hier los ist ...

Answer 1

Es wäre besser, wenn Sie einen Arbeits jsfiddle vorgesehen, um das Problem zeigt.

Wie auch immer, ich habe eine jsfiddle mit Ihrem Code mit einigen beliebigen Daten erstellt. Sie können es here finden. Sobald Sie weitere Details angeben, kann ich den Code anpassen, wenn dies erforderlich ist.

Dies ist der Code geändert:

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