I am using 3 Kendo grids.
Each grid has the ability to Export to Excel using toolbar template.
This was all working until recently. Now it does not work on any grid.
I am not sure what environmental issue I created.
Here is the code.
BundledConfig:
//Telerik
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
"~/Scripts/kendo/kendo.web.min.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js",
"~/Scripts/jszip.min.js"));
View:
<div class='pull-left'>
<a class="k-button k-button-icontext" href="javascript:void(0)" onclick="customCommand()"><span class="k-icon k-add"></span>Add new transfer</a>
<button class="k-button k-button-icontext k-grid-excel" type="button"><span class="k-icon k-i-excel"></span>Export to Excel</button>
<button class="k-button k-button-icontext k-grid-pdf"><span class="k-icon k-i-pdf"></span>Export to PDF</button>
@helper ToolbarTemplate2()
{
<div class='pull-left'>
<button class="k-button k-button-icontext k-grid-excel" type="button"><span class="k-icon k-i-excel"></span>Export to Excel</button>
<button class="k-button k-button-icontext k-grid-pdf"><span class="k-icon k-i-pdf"></span>Export to PDF</button>
</div>
}
@(Html.Kendo().Grid<TransferView>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.TransferId).Title("ID").Width(60);
columns.Bound(e => e.FromDescription).Width(180);
columns.Bound(e => e.ToDescription).Width(180);
columns.Bound(e => e.FromDept).Width(120);
columns.Bound(e => e.ToDept).Width(120);
columns.Bound(e => e.CreateDate).Hidden();
columns.Bound(e => e.CreateProfile).Hidden();
columns.Bound(e => e.ChangeDate).Hidden();
columns.Bound(e => e.ChangeProfile).Hidden();
columns.Bound(e => e.ApprovalFlag).Hidden();
columns.Bound(e => e.ApprovalDate).Hidden();
columns.Bound(e => e.ApprovalProfile).Hidden();
columns.Bound(e => e.PostedDate).Hidden();
columns.Bound(e => e.PostedFlag).Hidden();
columns.Bound(e => e.ReceivedDate).Hidden();
columns.Bound(e => e.TrnComment).Hidden();
columns.Command(command =>
{
command.Custom("Edit").Click("showDetails");
command.Custom("Delete").Click("deleteTransfer").HtmlAttributes(new { @style = "border-color: #b92c28; background-color: #d9534f; color:white" });
}).Width("20%");
})
.Sortable()
.Filterable(ftb =>
{
ftb.Mode(GridFilterMode.Row);
})
.ColumnMenu()
.ToolBar(toolbar =>
{
toolbar.Template(@<text>@ToolbarTemplate()</text>);
})
.Sortable()
.Pageable()
.Scrollable(a => a.Height("auto"))
.Resizable(resize => resize.Columns(true))
.Excel(excel => excel
.FileName("alltransfers.xlsx")
.Filterable(true)
.AllPages(true)
)
.Groupable()
.Reorderable(Reorder => Reorder.Columns(true))
.Navigatable()
.Pageable(pager => pager.PageSizes(new[]
{
10,
20,
30,
40,
50,
100
}))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetAllTransfersForStore", "Transfer"))
)
.Events(events => events
.DataBound("dataBound")
.DetailExpand("detailExpand"))
)
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=TransferId#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Transactions")
.Content(
@<text>
@RenderTabStrip()
</text>);
items.Add().Text("Transfer Information").Content(
"<div class='row'>" +
"<div class='col-md-4'>" +
"<ul>" +
"<li><label>Created Date</label> #= CreateDate #</li>" +
"<li><label>Created By</label> #= CreateProfile #</li>" +
"<li><label>Changed Date</label> #= ChangeDate #</li>" +
"<li><label>Changed By</label> #= ChangeProfile #</li>" +
"<li><label>Received Date </label> #= ReceivedDate #</li>" +
"</ul>" +
"</div>" +
"<div class='col-md-4'>" +
"<ul>" +
"<li><label>Approval Yes/No</label> #= ApprovalFlag #</li>" +
"<li><label>Approval Date</label> #= ApprovalDate #</li>" +
"<li><label>Approval Profile</label> #= ApprovalProfile #</li>" +
"<li><label>Posted Date</label> #= PostedDate #</li>" +
"<li><label>Posted Yes/No</label> #= PostedFlag #</li>" +
"</ul>" +
"</div>" +
"</div>"
);
})
.ToClientTemplate())}
@helper RenderTabStrip()
{ @(Html.Kendo().Grid<TransferLine>()
.Name("grid_#=TransferId#")
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.ColumnMenu()
.ToolBar(toolbar =>
{
toolbar.Template(@<text>@ToolbarTemplate2()</text>);
})
.Sortable()
.Pageable()
.Resizable(resize => resize.Columns(true))
.Scrollable(a => a.Height("auto"))
.Groupable()
.Reorderable(Reorder => Reorder.Columns(true))
.Navigatable()
.Pageable(pager => pager.PageSizes(new[]
{
10,
20,
30,
40,
50,
100
}))
.Columns(columns =>
{
//columns.Bound(e => e.FromStoreNumber).Hidden();
//columns.Bound(e => e.T).Hidden());
//columns.Bound(e => e.FromDept).hidden();
//columns.Bound(e => e.ToDept).hidden();
columns.Bound(e => e.TransferId).Title("ID").Width(70);
columns.Bound(e => e.ItemUpc).Title("UPC").Width(500);
columns.Bound(e => e.Quantity).Width(120);
columns.Bound(e => e.UnitPrice).Width(120);
columns.Bound(e => e.ItemUOM).Width(120);
columns.Bound(e => e.ExtendedPrice).Format("{0:C}").Width(120);
columns.Bound(e => e.TrnComment).Hidden();
//columns.Command(command =>
//{
// command.Custom("Delete").Click("deleteLine");
//}).Width("20%");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetAllLinesForId", "Transfer", new { id = "#=TransferId#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
}
</script>
Any ideas would be appreciated.
1 Answer, 1 is accepted
There is a known issue with the Grid' Excel export in the latest version of Kendo UI 2016.3.914 with combination of a specific jQuery versions:
https://github.com/telerik/kendo-ui-core/issues/2239
Please check if changing the jQuery version to one of the listed in the issue (1.12.1 recommended) will fix the issue.
Regards,
Stefan
Telerik by Progress