自定义弹出编辑器中的 kendoui 验证工具提示未正确定位 [英] kendoui validation tooltip in custom popup editor not positioning correctly

问题描述

例如，请参见 jsfiddle，将名字字段清空以显示验证工具提示.在正常形式中，验证工具提示正确定位在每个元素的右侧.但是在网格的弹出编辑器中，它仍然试图将工具提示放在元素下方，就好像它在编辑内联一样.我试过 <span class="k-invalid-msg" data-for="FirstName"></span> 但它没有改变任何东西.是否有我缺少的设置才能使其在 popupeditor 中工作?我想我可以手动修改 .k-tooltip，但我希望有更多内置的东西可以正确处理定位，因为我不太擅长 css.

Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.

推荐答案

正如您所发现的，当应用于标准输入时，网格的错误模板与 kendo 验证器提供的错误模板不同.

As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.

不幸的是，由网格在内部创建的验证器没有传递您可能在选项对象中定义的任何错误模板，并且当编辑"事件触发时，验证器已经创建并且错误模板已编译，因此为什么以您描述的方式设置 errorTemplate 不起作用.真的，我认为 Kendo 网格应该尊重任何用户定义的 errorTemplate 选项，但在它实现之前我们必须稍微修改一下.

Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.

关键是定义一个自定义模板，并应用到edit事件中，但不使用options对象，直接设置私有实例.不理想，但它有效:

The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:

edit: function (e) {
    e.sender.editable.validatable._errorTemplate = 
         kendo.template($('#tooltip-template').html());
}

有关我认为您可能希望实现的示例，请参阅此更新的小提琴.

See this updated fiddle for an example of what I think you might be looking to achieve.

http://jsfiddle.net/nukefusion/eQ2j7/10/

这篇关于自定义弹出编辑器中的 kendoui 验证工具提示未正确定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！