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

Question

I have a problem with Kendo UI using Typescript in my project. I have a grid which filtering mode doesn't work on some column types, like integer. I tried to add the type in the columns directly, but it's not working at all. And it's not filtering on links either.

[EDIT] Here's my function code that create the grid :

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' }                    
        ]
    };
}

I have this error on Chrome:

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

and this one on Firefox:

TypeError: "".toLowerCase is not a function.

I did a plunker to test my code translated in javascript, but the type property works.

$("#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' }
  ]
});

So it's working in Javascript but not in Typescript, I'm using AngularJS with Kendo UI. Any ideas why it's not woking ?

Thanks !

Ginwu

Answer 1

So it's working in Javascript but not in Typescript

The typescript you have shared is not the same as the JavaScript that you have shared. Specifially dataSource is vastly different. I would make the TS similar to the JS and that should fix the error.

Answer 2

Try this solution 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>