繁体   English   中英

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

Typescript Kendo UI grid column type error

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我在项目中使用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上遇到此错误:

未捕获的TypeError:(d.prog ||“”).toLowerCase不是函数

而这个在Firefox上:

TypeError:“” .toLowerCase不是函数。

我做了一个测试,以测试我的代码翻译成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中工作,我在Kendo UI中使用了AngularJS。 有什么想法为什么不起作用吗?

谢谢 !

Ginwu

2 个回复

所以它可以在Javascript中工作,但不能在Typescript中工作

您共享的打字稿与您共享的JavaScript不同。 具体来说, dataSource有很大的不同。 我将使TS与JS类似,并且应该可以修复错误。

试试这个解决方案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> 

1 Angular2 TypeScript-Kendo ui网格列模板(单击)不起作用

我是Angular的新手,不明白为什么kendo网格列模板的ng-if和(click)事件无法正常工作。 我想要一个按钮,该按钮必须有条件地可见,并且单击时需要导航到spa中的其他页面。 使用命令,我无法根据单元格值动态处理可见性。 因此,选择了模板,但是带有模板的click事件不起作 ...

2 Kendo UI,带有打字稿的网格“工具栏”

我将Kendo UI的Grid系统用于数据网格,并将代码迁移到Typescript。 到目前为止,我很喜欢它,但是遇到了一些障碍。 其中之一是,即使使用Telerik的官方Typescript定义,网格的声明似乎也有些不完整。 例如,此代码在javascript中有效。 但是,如果我 ...

3 Kendo-ui网格在同一列中具有差异字段类型

如果有人可以帮助我解决这个问题,我将不胜感激。 我的网络应用程序中有一个剑道网格。 这个剑道网格带有一系列问题和答案。 我的意思是有两列,第一列是问题,第二列是答案。 问题列是文本类型,但答案列可以是三种类型(布尔,可选择列表或文本)。 通过创建自定义编辑器,我实现了当您按 ...

4 kendo-ui网格列中的自定义模板,数据类型不一致

我需要使用kendo-ui网格进行数据编辑。 问题在于返回的响应中的每个可能项目都是字符串,但包含其他类型的值(例如,Value =“ true”或Value =“ 32%”或Value =“ [0:standard,1:advanced]”)。 所以我需要在网格上设置模板以对应字符串中 ...

6 Kendo UI网格模板列

我的页面中有这个网格,效果很好: 我用该版本替换该网格: 它也很好用,除了不显示文本框。 是否可以在第二个版本中显示文本? 如果是,如何获得回发中的输入值? 我试图进入分页事件,但在分页事件中发布了linq代码。 ...

7 更改Kendo UI网格中的列

我有一个ASP.NET MVC 5应用程序。 Kendo UI将对Web API控制器的调用网格化以检索数据。 我需要根据什么是Fuel类型的汽车来更改列的内容。 因此,在页面的模型上,我为Fuel Type创建了一个字符串。 然后在MVC控制器中将其设置如下: 在局部视图上,我 ...

9 Kendo UI网格列模板

有一个或多个学生的班级。 我想在行中显示多个班级,并在该特定班级中显示学生姓名作为逗号分隔的值。 我使用了以下代码,但是它不起作用。 它给运行时错误为 CS0201:仅赋值,调用,递增,递减,等待和新对象表达式可以用作语句。 ...

10 Kendo UI网格,计算列

我试图使网格与计算列。 我的问题是,更改网格时未重新计算列。 页面(asp.net MVC): javascript://范本 //当网格改变时调用 流(C#类): 我发现的唯一工作示例是: http : //jsfiddle.net/qA8QX/ ...

2014-05-06 14:10:33 1 1960   kendo-ui
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM