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

Answer 1

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.