Typescript Kendo UI網格列類型錯誤

我的項目中使用Typescript的Kendo UI有問題。我有一個網格過濾模式不適用於某些列類型，如整數。我試圖直接在列中添加類型，但它根本不起作用。而且它也沒有過濾鏈接。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中，我使用Kendo UI的AngularJS。任何想法，爲什麼它不是woking？

謝謝！

Ginwu

來源

2015-03-31 Ginwu

你加的定義？ – indapublic 2015-03-31 07:21:59

定義？如果你在談論DefinetelyTyped腳本，是的，我將它們添加到我的項目中。 – Ginwu 2015-03-31 07:55:48

數據源中生成的數據來自哪裏？你沒有提到任何'讀'URL – mshaaban 2015-03-31 09:13:39

-3

嘗試這種解決方案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>

來源

2015-03-31 09:29:52 111

感謝您的幫助，您的代碼比我的代碼更加清潔，但它對我不起作用。我不知道爲什麼，因爲您和我的工作人員工作正常。 – Ginwu 2015-03-31 10:11:49

你仍然得到TypeError？ – 111 2015-03-31 10:28:37

是的，這是相同的錯誤。 – Ginwu 2015-03-31 12:29:32

So it's working in Javascript but not in Typescript

您分享的打字稿是不一樣的，你已經共享了的JavaScript。特別是dataSource是非常不同的。我會讓TS類似於JS，並且應該修復錯誤。

來源

2015-03-31 07:40:17 basarat

很酷。但是'dataSource'在兩者之間仍然不同 – basarat 2015-03-31 09:07:37

它不會爲過濾器改變任何東西。我編輯了Plunker和我的文章。 – Ginwu 2015-03-31 10:17:32

Typescript Kendo UI網格列類型錯誤

回答

相關問題