help needed in exporting grid data

6 posts, 0 answers
  1. Nabeel
    Nabeel avatar
    16 posts
    Member since:
    Sep 2015

    Posted 25 Jun 2018 Link to this post

    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?

  2.
  3. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 27 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Nabeel
    Nabeel avatar
    16 posts
    Member since:
    Sep 2015

    Posted 27 Jun 2018 in reply to Stefan Link to this post

    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);
  7. Nabeel
    Nabeel avatar
    16 posts
    Member since:
    Sep 2015

    Posted 27 Jun 2018 Link to this post

     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
            }
    };
  8.
  9. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 28 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Nabeel
    Nabeel avatar
    16 posts
    Member since:
    Sep 2015

    Posted 28 Jun 2018 in reply to Stefan Link to this post

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

Back to Top