たとえば、jsfiddleを参照してください。検証ツールチップを表示するには、First Name フィールドを空白にします。通常の形式では、検証ツールチップは各要素の右側に正しく配置されます。しかし、グリッドのポップアップ エディターでは、インラインで編集しているかのように、ツールチップを要素の下に配置しようとしています。試してみ<span class="k-invalid-msg" data-for="FirstName"></span>
ましたが、何も変わりません。popupeditor でこれを機能させるために不足している設定はありますか? .k-tooltip を手動で変更できると思いますが、css があまり得意ではないので、ポジショニングを正しく処理する組み込みの何かを期待しています。
2 に答える
お気づきのとおり、グリッドのエラーテンプレートは、標準入力に適用したときに剣道バリデーターによって提供されるものとは異なります。
残念ながら、グリッドによって内部的に作成されたバリデーターは、オプションオブジェクトで定義したerrorTemplateを渡しません。「編集」イベントが発生するまでに、バリデーターはすでに作成されており、エラーテンプレートがコンパイルされています。説明した方法でerrorTemplateを設定しても機能しません。実際、剣道グリッドはユーザー定義のerrorTemplateオプションを尊重する必要があると思いますが、それが実現するまでは少しハックする必要があります。
重要なのは、カスタムテンプレートを定義し、それを編集イベントに適用することですが、オプションオブジェクトを使用する代わりに、プライベートインスタンスを直接設定します。理想的ではありませんが、機能します。
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
あなたが達成しようとしていると思うことの例については、この更新されたフィドルを参照してください。
(これをコメントとして投稿しますが、まだ十分な評判ではありません...)
私は、nukefusion のソリューションをうまく使用しています。私も長い間 jQuery の構文エラーと格闘し、デバッグを通じてテンプレートの定義方法が重要であることを発見しました。特に、次のように、テンプレートは書式設定なしで 1 行に記述する必要があるようです。
<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 をフォーマットしようとすると、構文エラーが発生します。このようなことでエラーが発生するはずがないため、本当のバグがどこにあるのかわかりません。しかし、そうであり、正しく動作するようになると、心配するのをやめました。