New to Kendo UI for jQuery? Download free 30-day trial

Change Default Workbook Name in Spreadsheet Export Dialog

Environment

Product Progress® Kendo UI® Spreadsheet for jQuery

Description

How can I change the default filename of the workbook which appears in the Export dialog of the Spreadsheet?

Solution

  1. Attach a click event handler to the Export button of the Spreadsheet.
  2. Query the DOM and get a reference to the Window widget which contains the export form.
  3. Retrieve the corresponding ViewModel and update the name property value.
<div id="example">
    <div id="spreadsheet"></div>
</div>

<script>
    var spread = $("#spreadsheet").kendoSpreadsheet({
        sheets: [{
            name: "Food Order",
            mergedCells: [
                "A1:G1"
            ],
            rows: [{
                height: 70,
                cells: [{
                    value: "My Company", fontSize: 32, textAlign: "center"
                }]
            }],
        }]
    }).getKendoSpreadsheet();

    var downloadBtn = spread.element.find(".k-button-icon.k-i-download");

    downloadBtn.parent().on("click", function(e) {
      var exportPopup = $("body").find(".k-spreadsheet-window.k-popup-edit-form"),
        workbookTextBox = exportPopup.find("[data-bind='value: name']").get(0),
        formViewModel = workbookTextBox.kendoBindingTarget.source;

      formViewModel.set("name", "MyCustomWorkbookName");
    })
  </script>

See Also

In this article