javascript - Kendo excel 导出 - 如何使用自定义模板导出列？

Question

我有一个以声明方式定义的剑道网格。 我通过 data-toolbar='["excel"]'

启用 excel 导出工具栏

问题是这只会导出没有定义模板的字段。 (下面网格中的前 3 个:Checkpoint、Location、Patrolled By)，其他列显示在 excel 文档中，但这些列的单元格都是空的。

如何让值显示在 excel 导出中？我猜它需要在导出 excel 之前进行某种预处理，因为 excel 导出功能不会解释我的自定义字段 html 模板。

<div id="Checkpoints">
    <div 
        ...
        data-toolbar='["excel"]'
        data-excel='{ "fileName": "CheckpointExceptionExport.xlsx", "allPages": "true" }'
        ...
        data-columns='[
            {
                "field": "checkpoint_name", 
                "title": "Checkpoint", 
                "filterable": { "cell": { "operator": "contains"}}},
            {
                "field": "location_name", 
                "title": "Location", 
                "filterable": { "cell": { "operator": "contains"}}
            },
            {
                "field": "patrolled_by", 
                "title": "Patrolled By", 
                "filterable": { "cell": { "operator": "contains"}}
            },
            {
                "field": "geotag",
                "title": "GeoTag", 
                "template": kendo.template($("#geotagTemplate").html()) 
            },
            {
                "field": "geofence",
                "title": "GeoFence",   
                "template": kendo.template($("#geofenceTemplate").html())
            },
            {
                "field": "completed",
                "title": "Completed",
                "template": kendo.template($("#completedTemplate").html())
            },
            {
                "field": "gps",
                "title": "GPS", 
                "template": kendo.template($("#gpsTemplate").html())
            }
        ]'>
    </div>
</div>

我遇到了这个用于处理 excel 导出事件的片段，但是我没有看到以我定义网格的方式使用这个事件处理程序的方法。

 <script>
      $("#grid").kendoGrid({
        excelExport: function(e) {
          ...
        },

      });
    </script>

Answer 1

检查 http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export#limitations ，它解释了为什么会发生这种情况，并展示了如何进行。

The Grid does not use column templates during the Excel export—it exports only the data. The reason for this behavior is that a column template might contain arbitrary HTML which cannot be converted to Excel column values. For more information on how to use a column template that does not contain HTML, refer to this column template example.

更新

为了在使用声明性小部件初始化时附加 Kendo UI 事件处理程序，请使用 data-bind HTML 属性和 event binding :

<div
    data-role="grid"
    data-bind="events: { excelExport: yourExcelExportHandler }">
</div>

检查 Kendo UI Grid MVVM demo对于类似的例子。

yourExcelExportHandler 应该是viewModel中定义的一个函数，类似于上面例子中的onSave

excelExport也可以附加事件 after widget initialization .