Hi Laurent,

Apologies for the misunderstanding, you are correct, that appears as a bug when you have a Grid with a detail template and you do these steps. I have converted the ticket into a bug report and have updated your Telerik Points for reporting it.

For now you can use the CSS workaround for the Tooltip's position.

Regards,
Vasko
Progress Telerik

Hello Laurent,

I understand your concern, as scrolling down just to see a validation message that should be immediately visible is not a great user experience, especially when editing the last row in a stacked grid layout.

That said, this behavior is by design. The validation tooltip always renders below the input it validates, and the Grid's scrollable content area naturally clips anything that extends beyond its visible bounds. There's no built-in mechanism to detect that a tooltip would overflow the container and either flip it above the input or auto-scroll to reveal it (this is also visible on our demo).

I would recommend logging this as a feature request rather than a bug, suggesting something like auto-scrolling the grid content when a validation tooltip overflows on the last row, or supporting upward tooltip positioning near container edges. That way the development team can evaluate it for a future release.

In the meantime, the workaround should help keep the tooltip visible without requiring manual scrolling.

Regards,
Vasko
Progress Telerik

Hello Laurent,

Thank you for detailing the steps and clarifying the issue with the tooltip callout remaining visible while the tooltip itself is hidden after multiple validation attempts near the bottom of the grid. I delved deeper into the case and found out it was due to the Tooltip's position. By default, it is set to absolute, and to fix this behavior, you will need to set it to relative:

.k-grid-stack-content .k-tooltip-error {
    position: relative;
}

I have updated the Dojo to include the change, please test with it and share the results.

Regards,
Vasko
Progress Telerik

Hi Laurent,

I hope you are doing well!

The Grid with dataLayoutMode: "stacked" and height: 500 creates a scrollable content area (.k-grid-content) with overflow: auto. In stacked mode, each row expands vertically to show fields on multiple lines. When you edit the last row and trigger validation on a bottom field like "Units In Stock":

• The validation tooltip (.k-tooltip-error) is rendered as a child element inside the scrollable container
• The container clips anything that extends past its visible boundary
• If the row is already at the bottom, there's no content below to scroll to as the tooltip is completely invisible

The solution is to detect when a validation tooltip gets clipped by the grid's scrollable content area and automatically scroll it into view.

$("#grid").kendoGrid({
  dataSource: dataSource,
  pageable: true,
  height: 500,
  sortable: true,
  filterable: true,
  toolbar: {
    items: [{
        name: "create"
      },
      {
        name: "sort"
      },
      {
        name: "filter"
      }
    ]
  },
  dataLayoutMode: "stacked",
  stackedLayoutSettings: {
    //cols: [120,120,120,120,120,200]
    //cols: 5
  },
  columns: [
    "ProductName",
    {
      field: "UnitPrice",
      title: "Unit Price",
      format: "{0:c}",
      footerTemplate: "<div><div>somme prix: #=data.UnitPrice.sum#</div><div>somme unites: #=data.UnitsInStock.sum#</div></div>",
    },
    {
      field: "UnitsInStock",
      title: "Units In Stock",
    },
    {
      field: "Discontinued"
    },
    {
      command: ["edit", "destroy"],
      width: "180px"
    }
  ],
  editable: "inline",
  edit: function(e) {
    let grid = this;
    let validator = e.container.data("kendoValidator");

    if (validator) {
      validator.bind("validateInput", function(ev) {
        if (!ev.valid) {
          setTimeout(function() {
            scrollToValidationTooltip(grid, ev.input);
          }, 50);
        }
      });
    }
  },
  save: function() {
    resetGridPadding(this);
  },
  cancel: function() {
    resetGridPadding(this);
  },
  detailTemplate: kendo.template($("#detail-template").html()),
  messages: {
    details: {
      expand: "Voir les détails",
      collapse: "Masquer les détails"
    }
  }
});

function scrollToValidationTooltip(grid, input) {
  let $cell = $(input).closest(".k-grid-stack-cell, td");
  let $tooltip = $cell.find(".k-tooltip-error");
  let gridContent = grid.content;

  if (!$tooltip.length || !gridContent || !gridContent.length) return;

  let tooltipRect = $tooltip[0].getBoundingClientRect();
  let contentRect = gridContent[0].getBoundingClientRect();

  if (tooltipRect.bottom > contentRect.bottom) {
    let overflow = tooltipRect.bottom - contentRect.bottom + 10;
    let scrollEl = gridContent[0];
    let maxScroll = scrollEl.scrollHeight - scrollEl.clientHeight;
    let needed = scrollEl.scrollTop + overflow;

    if (needed > maxScroll) {
      // Temporarily extend the scrollable area so the tooltip can be scrolled into view
      gridContent.find("> table, > div > table").css(
        "padding-bottom", (needed - maxScroll + 10) + "px"
      );
    }

    gridContent.scrollTop(scrollEl.scrollTop + overflow);
  }
}

function resetGridPadding(grid) {
  if (grid.content) {
    grid.content.find("> table, > div > table").css("padding-bottom", "");
  }
}

However, the downside is this only scrolls the tooltip into view automatically, without the user having to scroll.

You can test the above code in the following Dojo.

Regards,
Vasko
Progress Telerik