help needed in exporting grid data

[Nabeel]

The KendoUI grid code in my application is like this:

 

<kendo-grid id="myGrid" options="mainGridOptions"><br>        <kendoGridToolbarTemplate><br>                <button kendoGridExcelCommand>Export to Excel</button><br>             <kendo-grid-excel fileName="GridData.xlsx"><br>               </kendo-grid-excel><br>        </kendoGridToolbarTemplate><br>        <div k-detail-template><br>            <br>            <kendo-tabstrip> Some DIVs and fields here </kendo-tabstrip><br>        </div><br>       <kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel><br>    </kendo-grid>

 

The data source to this grid is attached on run-time. I am trying to make the Export to Excel button workable but it is not working. What am I doing wrong?

[Stefan]

Hello, Nabeel,

Thank you for the provided code.

If a template is used, then the button that will export the Grid to Excel has to programmatically call the saveAsExcel method:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/saveasexcel

The built-in button is only active with the built-in toolbar:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/toolbar#toolbar

Also, I noticed that a specific syntax is used, could you please share with us where did you find "kendoGridToolbarTemplate" and "kendoGridExcelCommand", so we can check it.

Regards,
Stefan
Progress Telerik

[Nabeel]

I took help from the sample given on this URL:

https://www.telerik.com/kendo-angular-ui/components/grid/api/ToolbarTemplateDirective/

To update about my progress on the issue, I edited my code to add a button and write the below code on its 'onclick' event:

<button id='exportEx' onclick='$("#myGrid").data("kendo-grid").saveAsExcel();'>Export to Excel</button>

but this code is exporting only the rows on the 1st page and not from all pages. I want all data exported at once. The entire data is being bound with the grid in one Ajax call and not in chunks, like this:

jQuery("#myGrid").data("kendoGrid").dataSource.data(ajaxResponse);

[Nabeel]

 I got the answer of my question myself after doing some R&D and set the allPages to true using this approach:

$scope.mainGridOptions = {
                dataSource: {
                    type: "odata",
                    data:respnse,
                    pageSize: 5,
                },
                toolbar: ["excel"],
                excel: {
            allPages: true
        }
};

[Stefan]

Hello, Nabeel,

Please have in mind that this article and the entire site are for the Kendo UI for Angular2+ components:

https://www.telerik.com/kendo-angular-ui/components/grid/api/ToolbarTemplateDirective/

They are made for this version of Angular:

https://angular.io/

While based on the code it seems that you are using the AngulatJS directive made for this version of Angular:

https://angularjs.org/

This is the site with examples for the AngularJS directives:

https://docs.telerik.com/kendo-ui/AngularJS/introduction

Regards,
Stefan
Progress Telerik

[Nabeel]

Yes, I am using AngularJS version 1.6.0. Thanks for sharing the documentation link.