Multiple Excel Export Buttons on Grid

[Martin]

Hi there - apologies if this is elsewhere, but I've searched and can't find an answer. I have good C# experience, but I'm relatively new to Telerik/Kendo etc,

I am aware of the AllPages(true) option for the Excel printout. What I would like to do on my Grid is to have two excel buttons, one that will export the current page, and one which will export all data.

Is this possible? From what I can see, you can only define one Excel Button on the toolbar.

Thanks in advance.

[Martin]

The other is to have an 'ALL' option in the paging selector - is that possible?

e.g.  .Pageable(p => p.PageSizes(new[] { 10, 20, 50, 100,"ALL" }))

[Eyup]

Hello Martin,

You can use the Custom() approach to achieve this requirement:
http://www.telerik.com/forums/toolbar-with-custom-button#ZS4eYn8UukWxXrVGBaiF9g

If you need to define a more complex configuration in the toolbar, you can create a template:
http://demos.telerik.com/aspnet-mvc/grid/toolbar-template

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress

[Martin]

Hi Eyup - thanks for that, it looks exactly like the approach I need.

I can see how I can link this to a Controller Action - but how do I make use of the Excel API? I have the Excel_Export_Save action in my controller, but as far as I can see that's just for file generation - how would I link up a custom button to use the Excel function with AllPages set to true?

Thanks in advance.

[Eyup]

Hello Martin,

You can achieve this requirement using the following approach:

.ToolBar(toolbar =>
{
    toolbar.Create();
    toolbar.Custom().Text("Export All Pages").HtmlAttributes(new { @class = "exportAllPagesClass" });
})

DataBound event:

.Events(e => e.DataBound("gridDataBound"))

JavaScript:

function gridDataBound(e) {
    var grid = $('#documenttypegrid').data('kendoGrid');
    var exportAllPagesButton = grid.element.find(".exportAllPagesClass");
    exportAllPagesButton.on("click", function (args) {
        grid.options.excel.allPages = true;
        grid.saveAsExcel();
    });
}

That should do the trick. Please give it a try and let me know if it works for you.

Regards,
Eyup
Telerik by Progress

[Martin]

Amazing, worked a treat, thank you so much Eyup :-)

[Eyup]

Hi Martin,

I'm glad the provided solution has proven helpful.
One thing I forgot to include is to add return false; line in the end of the function (just after grid.saveAsExcel();), which will prevent the redundant postback action and lead to better performance.

Regards,
Eyup
Telerik by Progress

[Jorge]

Hi Eyup. I was able to accomplish having a refresh icon and excel download but sometimes the excel download generates more than one excel download. do you know why?

 

        function gridDataBound(e) {
            var grid = $('#Grid').data('kendoGrid');
            var exportAllPagesButton = grid.element.find(".exportAllPagesClass");
            exportAllPagesButton.on("click", function (args) {
                grid.options.excel.allPages = true;
                grid.saveAsExcel();
                return false;
            });
        }

[Eyup]

Hi Martin,

This is strange, indeed. You can see the proper functionality of Kendo grid export in the following live sample:
https://demos.telerik.com/kendo-ui/grid/excel-export

Could you modify this dojo sample to demonstrate the issue and send it back to us for further investigation?
https://dojo.telerik.com/oxAfIvif 

Regards,
Eyup
Progress Telerik

[Jorge]

Hi Eyup,

Thank you for the links but i already had excel report working. I wanted to have a custom toolbar where i can have multiple actions besides export excel. I was able to make it work by adding the toolbar template. Also, i created two methods to call my refresh of the grid and my export in Excel. This works now!.Thanks again

.ToolBar(toolbar =>
            {
                toolbar.Template(@<text>
                    <div class="refreshBtnContainer">
                        <a href="\\#" class="k-pager-refresh k-link k-button k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
                        <a class="k-button k-button-icontext exportExcel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>
                    </div>
                </text>);
            })
            .Excel(excel => excel
                .FileName(ViewBag.Title)
            )

    $(function () {
        var grid = $("#Grid");
        grid.find(".k-grid-toolbar").on("click", ".k-pager-refresh", function (e) {
            e.preventDefault();
            RefreshGrid();
        });
    });

    $(document).on("click", ".exportExcel", function () {
        var grid = $('#Grid').data('kendoGrid');
        grid.options.excel.allPages = true;
        grid.saveAsExcel();
        return false;
    });

    function RefreshGrid() {
        var grid = $("#Grid").data("kendoGrid");
        grid.dataSource.read();
    }

[Eyup]

Hi Jorge,

I'm glad you've managed to resolve the case and thank you for sharing your approach with our community.

Regards,
Eyup
Progress Telerik