KendoUI为TreeList添加工具栏模板引发toLowerCase不是函数错误

我注意到你提到相同的工具栏定义在Kendo Grid里能正常运行，但放到TreeList里就触发了这个错误。这个问题的核心原因是TreeList对工具栏项的类型校验逻辑比Grid更严格，尤其是当使用自定义模板或命令时，一不小心传递了非字符串类型的参数，就会导致内部调用toLowerCase()时抛出错误。

常见触发场景及修复方案 #

1. 自定义工具栏模板的类型错误 #

如果你的工具栏用了自定义模板，最容易踩的坑就是直接传递jQuery对象而非模板字符串。比如这种错误写法：

toolbar: [
    { template: $('#toolbar-template') } // 直接传了jQuery对象，不是字符串
]

TreeList会尝试对这个对象调用toLowerCase()，自然就会报错。

修复方法：确保模板是字符串类型，正确获取模板的HTML内容：

toolbar: [
    { template: $('#toolbar-template').html() } // 提取模板的字符串内容
]

2. 自定义命令的name属性类型错误 #

TreeList要求自定义命令的name必须是字符串类型，如果不小心把它设成数字、对象等其他类型，就会触发报错。比如错误写法：

toolbar: [
    { name: 123, text: '自定义操作' } // name是数字类型，不符合要求
]

修复方法：将name改为字符串类型：

toolbar: [
    { name: 'custom-action', text: '自定义操作' }
]

3. 工具栏项的类型不匹配 #

TreeList的工具栏数组里的每一项，只能是字符串（比如内置命令"create"）或者合法的配置对象。如果混入了函数、数组等其他类型，也会导致内部处理出错。比如错误写法：

toolbar: [
    function() { return '<button>点击操作</button>' } // 直接传函数，不符合要求
]

修复方法：把函数返回值包装成模板字符串，或者用配置对象的template属性：

toolbar: [
    { template: '<button>点击操作</button>' }
]

建议排查方向 #

你提供的TreeList代码里没有展示工具栏部分，建议你对比Grid里的工具栏配置，检查TreeList的工具栏定义是否符合上面提到的规则：

• 所有工具栏项要么是字符串，要么是结构合法的配置对象
• 配置对象里的name、template等属性必须是字符串类型
• 没有混入函数、数字、jQuery对象等非预期类型

如果还是找不到问题，可以把你的工具栏定义代码贴出来，这样能更精准地定位问题~

内容的提问来源于stack exchange，提问作者nineveh.Y