Typescript Kendo UI grid column type error
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
2 answers
solution1
3 2015-03-31 07:40:17
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.
solution2
-3 ACCPTED 2015-03-31 09:29:52
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.