Uncaught TypeError: $ (...). Data (...). SaveAsPDF non è una funzione. kendo Grid

Question

Sto cercando di esportare i dati in pdf nella griglia del kendo.

Griglia:

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

Prima cerco pdf kendo barra degli strumenti, ma non funziona, si refresesh pagina invece di esportare in pdf. Quindi posiziono il pulsante nella parte superiore della griglia.

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

e definire una funzione

Funzione:

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

di nuovo fallire si dice:

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

Risorse ho usato:

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

idea di quello che sta andando male qui ...

Answer 1

Sarebbe meglio se hai fornito un jsfiddle di lavoro che mostra il problema.

In ogni caso, ho creato un jsfiddle utilizzando il codice con alcuni dati arbitrari. Lo puoi trovare here. Una volta forniti maggiori dettagli, posso modificare il codice se necessario.

Questo è il tuo codice modificato:

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