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不是函数

和Firefox上的这个：

TypeError：“”。toLowerCase不是函数。

我做了plunker来测试我在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中没有，我使用AngularJS和Kendo UI。有什么想法，为什么它不是在按摩？

谢谢！

Ginwu

Answer 1

所以它在Javascript中工作但在Typescript
中没有

您共享的打字稿与您共享的JavaScript不同。特别是dataSource是非常不同的。我会使TS类似于JS，这应该修复错误。

Answer 2

尝试此解决方案Plunker，

＆＃13;

<!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>

＆＃13;

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

2 个答案: