打字稿Kendo UI网格列类型错误

Question

我在项目中使用Typescript的Kendo UI出现问题。 我有一个网格，其过滤模式不适用于某些列类型，例如整数。 我试图直接在列中添加类型，但是根本无法正常工作。 而且它也不过滤链接。

[编辑]这是我创建网格的功能代码：

private _createInfoGridOptions(): kendo.ui.GridOptions {
    return {
        dataSource: {
            serverPaging: true,
            serverSorting: true,
            pageSize: 15,
        },
        resizable: true,
        selectable: 'row',
        filterable: true,
        columnMenu: true,
        sortable: true,
        scrollable: {
            virtual: true
        },
        groupable: true,
        height: 450,
        columns: [
            { field: 'subTaskId', type: "number", title: 'Subtask Id', width: '80px' },
            { field: 'reportDate', type:"date", title: 'Report Date', width: '100px', template: '#= moment.utc(reportDate).local().format("yyyy/mm/dd") #' },
            { field: 'prog', type: "string", title: 'prog',  width: '60px', template: "<a href='\\#' ng-click=\"openpopup(#=prog#, \'#=reportDate#\'\')\">#=prog#</a>" },
            { field: 'state', type:"string", title: 'status', width: '130px' },
            { field: 'maxTemps', type: 'number', title: 'Max Temps', width: '100px' }                    
        ]
    };
}

我在Chrome上遇到此错误：

未捕获的TypeError：（d.prog ||“”）.toLowerCase不是函数

而这个在Firefox上：

TypeError：“” .toLowerCase不是函数。

我做了一个测试，以测试我的代码翻译成javascript，但type属性起作用。

$("#grid").kendoGrid({
  dataSource: 
  {
       data : [
            {id: 36308,reportDate:"2015-02-01",prog: 58,state: "Waiting",maxTemps: 0}, 
            {id: 36309,reportDate:"2015-02-01",prog: 34,state: "Complete",maxTemps: 86400},
            {id: 36310,reportDate:"2015-02-01",prog: 116,state: "Complete",maxTemps: 86400},
            {id: 36311,reportDate:"2015-02-02",prog: 58,state: "Complete",maxTemps: 86400}
       ],
       serverPaging: true,
       serverSorting: true,
       pageSize: 15
  },
  filterable: true,
  columnMenu: true,
  columns: [
    { field: 'id', type:'number', title: 'Id', width: '80px' },
    { field: 'reportDate', title: 'Report Date', width: '100px' },
    { field: 'prog', type:'number', title: 'Prog', width: '60px' },
    { field: 'state', title: 'Status', width: '130px' },
    { field: 'maxTemps', type:'number', title: 'Max Temps', width: '100px' }
  ]
});

所以它可以在Javascript中工作，但不能在Typescript中工作，我在Kendo UI中使用了AngularJS。 有什么想法为什么不起作用吗？

谢谢 ！

Ginwu

Answer 1

所以它可以在Javascript中工作，但不能在Typescript中工作

您共享的打字稿与您共享的JavaScript不同。 具体来说， dataSource有很大的不同。 我将使TS与JS类似，并且应该可以修复错误。

Answer 2

试试这个解决方案Plunker ，

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script> </head> <body> <div id="grid"></div> <script> $(document).ready(function() { var data = [{ id: 36308, reportDate: new Date("2015/02/01"), prog: 58, state: "Waiting", maxTemps: 0 }, { id: 36309, reportDate: new Date("2015/02/01"), prog: 34, state: "Complete", maxTemps: 86400 }, { id: 36310, reportDate: new Date("2015/02/01"), prog: 116, state: "Complete", maxTemps: 86400 }, { id: 36311, reportDate: new Date("2015/02/02"), prog: 58, state: "Complete", maxTemps: 86400 }]; $("#grid").kendoGrid({ dataSource: { data: data, schema: { model: { fields: { prog: { type: "number" }, reportDate: { type: "date" } } } } }, scrollable: true, columnMenu: true, filterable: { extra: false, operators: { string: { startswith: "Starts with", eq: "Is equal to", neq: "Is not equal to" } } }, columns: [{ field: 'id', type: 'number', title: 'Id', width: '80px' }, { field: 'reportDate', title: 'Report Date', width: '100px', format: "{0:yyyy/MM/dd}", filterable: { ui: "datepicker" } }, { field: 'prog', title: 'Prog', width: '60px', template: '<a href="\\\\#" onclick ="\\\\alert(#=prog#)">#= prog #</a>' }, { field: 'state', title: 'Status', width: '130px' }, { field: 'maxTemps', type: 'number', title: 'Max Temps', width: '100px' }] }); }); </script> </body> </html>