2015-03-31 5 views
0

У меня проблема с пользовательским интерфейсом Kendo с использованием TypScript в моем проекте. У меня есть сетка, режим фильтрации которой не работает для некоторых типов столбцов, например integer. Я попытался добавить тип в столбцы напрямую, но он вообще не работает. И это не фильтрует ссылки.Typcript Ошибка типа столбика пользовательского интерфейса Kendo

[EDIT] Вот мой код функции, которые создают сетку:

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, но свойство 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, но не в машинописном, я использую AngularJS с Кендо UI. Любые идеи, почему это не вокинг?

Спасибо!

Ginwu

+0

ли вы добавить определения? – indapublic

+0

Определения? Если вы говорите о скрипте DefinetelyTyped, да, я добавил их в свой проект. – Ginwu

+0

Откуда берутся сгенерированные данные внутри источника данных? вы не указали какой-либо 'read' URL – mshaaban

ответ

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

+0

Спасибо за вашу помощь, ваш код более чист, чем мой, но он не работает для меня. Я не знаю, почему, потому что ваш плункер и мой, работайте отлично. – Ginwu

+1

Вы все еще получаете TypeError? – 111

+0

Да, это та же ошибка. – Ginwu

3

So it's working in Javascript but not in Typescript

Машинопись вы разделили это не то же самое, как JavaScript, что вы поделились. В частности, dataSource сильно отличается. Я бы сделал TS похожим на JS, и это должно исправить ошибку.

+1

Прохладный. Но 'dataSource' по-прежнему отличается между двумя – basarat

+0

. Это ничего не меняет для фильтра. Я отредактировал Plunker и мой пост. – Ginwu

Смежные вопросы