ASP.NET MVC Kendo UI Excel Grid Data for Filename

Question

I have a grid that can display all products, but we have buttons to decide what products to show in the grid, like "Caps", "Baseballs", or "Shoes".

When a button is selected, the Ajax call lets my jQuery handle the onDataBound event to filter the data correctly and Excel pulls all of the data and not just the number shown on the PageSize setting.

But, all reports are called "Report.xlsx", and I would like to customize them with the product, like "CapsReport.xlsx" or "BaseballsReport.xlsx".

How can I send this value to the FileName("Report.xlsx") below?

<script>
function onButtonClick() {
  $(this).addClass('active').sublings().removeClass('active');
  var value = $(this).val() + 'Report.xlsx'; // this is the value I want to send to the Excel Filename
  @(Html.Kendo().Grid<Model>().Excel.FileName(value)) // this line is obviously wrong
}
</script>

<div id="ReadTypeBtnGroup" class="btn-group">
    <button type="button" id="caps" value="Caps" class="btn btn-default">Caps</button>
    <button type="button" id="baseballs" value="Baseballs" class="btn btn-default">Baseballs</button>
    <button type="button" id="shoes" value="Shoes" class="btn btn-default">Shoes</button>
</div>
<div class="panel-body">
    @(Html.Kendo().Grid<Model>()
    .AutoBind(false)
    .DataSource(o => o
        .Ajax()
        .Read(o2 => o2.Action("GetReport", "Report"))
        .PageSize(20)
        .ServerOperation(true)
    )
    .Events(o => o.DataBound("onDataBound"))
    .Excel(o => {
        o.AllPages(true);
        o.Collapsible(true);
        o.FileName("Report.xlsx");
    })
    .Name("grid")
    .Pageable()
    .ToolBar(o => {
        o.Excel();
    })
    )
</div>

Answer 1

Add an event handler to excelExport event like so .Events(e => e.ExcelExport("excelExport"))

There you can change the name of the file, among other properties.

For example:

function excelExport(e) {
    e.workbook.fileName = $("#someFieldHoldingFileName").val();
}