Kendo Grid validation message position issue

Question

The Kendo grid I developed has a validation message, but the arrow points to the column to the right. I cannot change anything in /kendo.default.min.css as this is located in a shared folder which should not be changed. Any help on this?

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;
              }
            }
          }
        }

I think you're on the right lines with that bit of jQuery you've left commented out, but I think it would probably be easier to fix with CSS (see my answer). That has the advantage that you can apply it to grids across the whole site, a single page etc. — Joe Glover

Joe Glover Joe Glover · Accepted Answer · 2018-10-06T10:13:53

You could try simply overriding some of the styles on the validation tool-tip. This works for me, though I've scoped it pretty tight to try to avoid any unexpected effects elsewhere. You might need to modify it slightly, depending on what version of kendo you're using:

<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>

Edit: I've just noticed you said you "cannot change anything in /kendo.default.min.css" - you shouldn't need to. This should override the default styles provided by kendo in that file. If you've got your own site-wide CSS file you could add it to that, or even just add it directly to the page hosting your grid (though that's not really recommended). Hope this helps.

Kendo Grid validation message position issue

2 Answers