Kendo Grid - Validation Messages not showing on custom editors in grid

Question

When using a editor grid and my button put a new row at the bottom, validation messages are being hidden by the grid.
I have set up an example here: http://jsfiddle.net/api2304/K54v3/1/

Click on a button Add
Leave the cell Name empty and press tab.
The message will show below the row.

Html:

<div id="grid"></div>

Javascript:

var _dsGrid;
        var _grid;

        var _this = this;

        _this._dsGrid = new kendo.data.DataSource({
            autoSync: true,
            data: [{ Cod: 0, Name: 'Value0' },
            { Cod: 1, Name: 'Value1' }],
            schema: {
                model: {
                    fields: {
                        Cod: { editable: false },
                        Name: {
                            validation: {
                                required: true,
                                required: { message: "Custom message" }
                            }
                        }
                    }
                }
            }
        });

       _this._grid = $("#grid").kendoGrid({
            columns: [
                { field: "Cod" },
                { field: "Name" }
            ],
            selectable: true,
            dataSource: _this._dsGrid,
            editable: true,
            toolbar: [
                { template: kendo.template("<a id='btnAdicionar' class='k-button k-button-icontext'><span class='k-icon k-add'></span>Adicionar</a>") }

            ],
            edit: function(e) {
                e.container.find("input[name='Nome']").attr('maxlength', '20');
                e.container.find("input").bind("blur", function() {

                    $("#grid").scrollTop($("#grid")[0].scrollHeight + 200);
                });
            }               
        }).
            data("kendoGrid");

       $("#btnAdicionar").click(function () {
           var total = _this._dsGrid.data().length;
           var insert = _this._dsGrid.insert(total, {});
           _this._dsGrid.page(_this._dsGrid.totalPages());
           var ultimoId = _this._dsGrid.data()[total - 1].Nivel;
           _this._grid.editRow(_this._grid.tbody.children().last());
       });

you should provide an answer yourself if the question is resolved and mark that as the accepted answer — Joram

Wesley B Wesley B · Accepted Answer · 2015-01-23T04:00:07

I found the solution here: http://www.telerik.com/forums/hidden-validators-when-virtual-scrolling-createat-bottom

Put this css on the page:

#grid .k-tooltip-validation {
margin-top: 0 !important;
display: block;
position: static;
padding: 0;
} 

#grid .k-callout {
display: none;
}

Kendo Grid - Validation Messages not showing on custom editors in grid

1 Answers