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


请参见 的jsfiddle 例如,将“名字”字段留空以显示验证工具提示。在正常形式中,验证工具提示正确定位到每个元素的右侧。但是在网格的弹出编辑器中,它仍然试图将工具提示放在元素下面,就好像它在内联编辑一样。我努力了 <span class="k-invalid-msg" data-for="FirstName"></span>但它没有改变任何东西。是否有一个我缺少的设置让这个在popupeditor中工作?我想我可以手动修改.k-tooltip,但我希望有一些内置的东西可以正确处理定位,因为我不是很擅长CSS。


5511
2018-01-26 13:27


起源

你知道,如果谁投票,这将解释为什么会很好。对我来说,这是一个有效的问题,有一个有效的例子来证明这个问题。我喜欢kendoUI,这就是我使用它的原因但是任何使用KendoUI的人都知道文档和示例非常差,我花了几个小时进行调试,论坛搜索等要弄清楚它并且它已经非常适得其反 - dan
好吧,我发现了问题的原因。内置网格验证errorTemplate包含在div <div class =“k-widget k-tooltip k-tooltip-validation”style =“margin:0.5em”> <span class =“k-icon k-warning”> </ span>#= message#<div class =“k-callout k-callout-n”> </ div> </ div>。当你只使用一个kendo.Validator时,它只是一个跨度<span class =“k-widget k-tooltip k-tooltip-validation”> <span class =“k-icon k-warning”> </ span># =消息#</跨度>。我试图改变e.sender.editable.options.errorTemplate但它仍然使用div。有任何想法吗? - dan


答案:


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

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

关键是定义自定义模板并将其应用于编辑事件,但不是使用选项对象,而是直接设置私有实例。不理想,但它有效:

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

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

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


12
2018-02-28 13:31



不幸的是,当使用用于ASP.NET MVC的kendo UI时,这是行不通的,至少在我的情况下是这样。它会导致jquery错误消息:语法错误,无法识别的表达式:<span class =“k-widget k-tooltip k-tooltip-validation k-invalid-msg”> <span class =“k-icon k-warning”> </ span>名称是必需的。</ span>(jquery-1.9.1.js,第4421行)。因为我对jquery中发生的事情一无所知,也许其他人可以启发我。 - okieh
在nukefusion,我有相同类型的问题,但在JSP.can你请看看 stackoverflow.com/questions/28085870/... - The PowerHouse


(我会发布此评论作为评论,但还没有足够的声誉......)

我成功地使用了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,则会出现语法错误。我不知道真正的bug在哪里,因为这种事情不应该导致错误。但确实如此,一旦我正确地工作,我就不再担心了。


2
2017-08-21 18:46