自定义弹出编辑器中的 kendoui 验证工具提示未正确定位

Posted 2023-05-07

【中文标题】自定义弹出编辑器中的 kendoui 验证工具提示未正确定位

【英文标题】：kendoui validation tooltip in custom popup editor not positioning correctly

【发布时间】：2013-01-10 08:04:01

【问题描述】：

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

【问题讨论】：

您知道，如果谁投了反对票就可以解释原因。对我来说，这是一个有效的问题，并有一个有效的例子证明了这个问题。我喜欢 kendoUI，这就是我使用它的原因，但任何使用 KendoUI 的人都知道文档和示例非常差，我花了数小时调试、论坛搜索等来弄清楚它，结果却适得其反

好吧，我找到了问题的原因。内置网格验证 errorTemplate 被包裹在一个 div #=message# 。当您只使用 kendo.Validator 时，它只是一个跨度 # =消息#。我试图改变 e.sender.editable.options.errorTemplate 但它仍然使用 div。有什么想法吗？

【参考方案1】：

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

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

关键是定义一个自定义模板并在编辑事件中应用它，但不是使用选项对象，而是直接设置私有实例。不理想，但它有效：

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

请参阅此更新的小提琴示例，了解我认为您可能希望实现的目标。

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

【讨论】：

不幸的是，在将剑道 UI 用于 ASP.NET MVC 时，这不起作用，至少在我的情况下不是。它会导致 jquery 错误消息：语法错误，无法识别的表达式： 名称是必需的。（jquery-1.9.1.js，第 4421 行）。由于我对 jquery 中发生的事情一无所知，也许其他人可以启发我。

嗨 nukefusion，我有同样类型的问题，但在 JSP 中。你能看看***.com/questions/28085870/…

【参考方案2】：

（我会将此作为评论发布，但还没有足够的声誉......）

我正在成功使用 nukefusion 的解决方案。我也和jQuery的语法错误斗争了很长时间，通过调试发现如何定义模板很重要。特别是，模板似乎必须写在没有任何格式的单行上，如：

<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>

如果您尝试使其“漂亮”并在模板中格式化 html，则会出现语法错误。我不知道真正的错误在哪里，因为这种事情不应该导致错误。但它确实如此，一旦我让它正常工作，我就不再担心它了。