自定义弹出式编辑器中的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，并且在"edit"事件触发时，验证器已经创建并且错误模板已编译，因此为什么无法按照您描述的方式设置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屋！