Export via TagHelpers

[Richard]

     Didn't see this anywhere in the documentation. How exactly would I set up the toolbar with an Excel export options. I know with HtmlHelpers I would do

.ToolBar(tools => tools.Excel())

But i'm not seeing any way to do that with the TagHelpers <excel /> and <toolbar></toolbar>.

Thanks in advance.

[Preslav]

Hello Richard,

Based on the syntax from the below article:

• https://docs.telerik.com/aspnet-core/tag-helpers/data-management/grid/overview#editing

I added this code:

<toolbar>
    <toolbar-button name="excel"></toolbar-button>
</toolbar>

To the "Grid / Tag Helper" demo:

• https://demos.telerik.com/aspnet-core/grid/tag-helper

Now, the Grid is exported to Excel as expected.

Please, give this a try, and let me know if the above works for you.


Regards,
Preslav
Progress Telerik

[Richard]

Preslav,

Thanks, that works great. It's a bit obscure though, but makes sense in a way. Is there a list somewhere of all built-in grid toolbar functionality that can be added based on naming a toolbar-button properly?

[Preslav]

Hi Richard,

For the time being, the list is available only in the Kendo UI for jQuery docs:

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

I understand that the list should be also placed in the ASP.NET Core documentation. I can confirm that we are doing our best to improve the Core docs as fast as we can.


Regards,
Preslav
Progress Telerik

[Daniel]

So I am trying to use the attached photo demonstrates. I can confirm that when the export button is clicked the grid sends a read request to the server but it doesn't do anymore than that. I have also tried with the "export to pdf" button which does indeed work. So it must be something to do with the excel itself. 

 

 

[Daniel]

I couldn't get the code to format correctly so I am attaching a photo to help with readability and i'll paste the code if you want to copy it.

 

<kendo-grid name="grid"
            on-data-bound="updateResultCount"
            height="800" style="cursor:pointer"
            resizable="true" reorderable="true"
            detail-template-id="gridRowTemplate"
            auto-bind="true" selectable="single"
            on-change="gridRowChanged">

    <datasource type="DataSourceTagHelperType.Ajax" page-size="pageSize" server-paging="true">
        <transport>
            <read url="@Model.ReadUrl" data="@Model.AdditionalDataFunction" datatype="json" />
        </transport>

    </datasource>
    <toolbar>
        <toolbar-button name="excel"></toolbar-button>
    </toolbar>
    <columns>
        @foreach (var col in Model.Columns)
        {
            <column field="@col.FieldName" title="@col.Title" width="250" min-resizable-width="50"></column>
        }

    </columns>
    <pageable enabled="true" page-size="pageSize" button-count="1"></pageable>
    <scrollable enabled="true" />
    <sortable enabled="true" />


</kendo-grid>

[Preslav]

Hi Daniel,

Based on the provided information, I assume that the JSZip library is not included in the app. More information about this is available here - https://docs.telerik.com/aspnet-core/compatibility/export-support#jszip-library

Could you check if it is included, and if it is not, add it to the solution?

 

Regards,
Preslav
Progress Telerik

[Daniel]

Ah, that was probably my issue. I downloaded a custom telerik package from 
https://www.telerik.com/download/custom-download and had checked "Export to Excel" support so I assumed it had added all the necessary references, thanks.