Typescript 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 上有这个错误：

Uncaught TypeError: (d.prog || "").toLowerCase is not a function

Firefox 上的这个：

TypeError: "".toLowerCase is not a function.

我做了一个 plunker 来测试我在 javascript 中翻译的代码，但是类型属性有效。

$("#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 中不工作，我正在使用 AngularJS 和 Kendo UI。知道为什么它不醒吗？

谢谢！

金屋

Answer 1

So it's working in Javascript but not in 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>

Typescript Kendo UI 网格列类型错误

Typescript Kendo UI grid column type error

javascript

kendo-ui

angularjs

typescript

kendo-grid