Kendo Grid验证消息位置问题

Question

我开发的Kendo网格具有验证消息，但是箭头指向右侧的列。我无法更改/kendo.default.min.css中的任何内容，因为它位于不应更改的共享文件夹中。有什么帮助吗？

dataSource: {
  data: data.ReportData,
  schema: {
    model: {
      fields: {
        ProposedDiscount: {
          validation: { 
            required: true,
            proposeddiscountcvalidation: function (input) {
              if (input.val() != "" && input.is("\[name='ProposedDiscount'\]")) {
                  input.attr("data-proposeddiscountcvalidation-msg", "Should be whole number between 0 & 100");
                  // $('.k-widget k-tooltip k-tooltip-validation k-invalid-msg  .k-icon k-warning .k-tooltip-validation .k-callout-n').removeClass('.k-callout-n');
                  return input.val() >= 0 && input.val() < 101 && input.val() % 1 == 0;
              } else {
                  return true;
              }
            }
          }
        }

Answer 1

您可以尝试简单地覆盖验证工具提示上的某些样式。这对我有用，尽管我已经将范围定得很紧，以尽量避免在其他地方发生任何意外的影响。您可能需要对其稍加修改，具体取决于您使用的是哪种版本的kendo：

<style>
    .k-grid .k-grid-content tr.k-grid-edit-row>td[role='gridcell'] .k-tooltip-validation>.k-callout-n {
        left: auto;
        margin-left: auto;
    }
</style>

编辑：我刚刚注意到您说过“您无法在/kendo.default.min.css中进行任何更改”-您不需要这样做。这应该覆盖kendo在该文件中提供的默认样式。如果您拥有自己的站点范围的CSS文件，则可以将其添加到该文件中，甚至可以直接将其添加到托管网格的页面中（尽管不建议这样做）。希望这会有所帮助。

Answer 2

Kendo样式默认显示工具提示，并将标注（箭头）放置在工具提示的中心。如果消息足够宽（如您的示例中所示），因为箭头位于中心，则最终指向错误的单元格。如果将工具提示限制为单元格的宽度，它将包装消息并将其限制为单元格的宽度，这意味着居中的箭头将对齐。

.k-validator-tooltip {  width: min-content; }