Hidden validators when virtual scrolling & createAt bottom

[THOMAS]

Hello,

I have a grid with virtual scrolling on it due to huge data.
On all my grids I would like to create new lines only at the bottom of the grid.
When the grid has to display a validator ("field required" as for exemple) the validator is hidden at the bottom of the grid (we only see the arrow but not the complete message).
I don't think it will be hard to reproduce, is there a workaround ? Thanks

@(Html.Kendo().Grid<Integraal.Models.ImmoBaseCptTiersCompte>()
                .Name(Model.idView + "immoBaseCptTiers_grilleTiers")
                .HtmlAttributes(new { @class = "immoBaseCptTiers_grilleTiers" })
                .Columns(columns =>
                {
                    columns.Bound(m => m.ct_num_compte).Width(80);
                    columns.Bound(m => m.ct_titre);
                    columns.Command(command => command.Destroy().Text(" ")).Width(40);
                })
                .Editable(editable => editable.Mode(GridEditMode.InCell)
                    .CreateAt(GridInsertRowPosition.Top)
                    )
                .Navigatable()
                .Resizable(resize => resize.Columns(true))
                .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
                .Scrollable(scrollable => scrollable.Enabled(true)
                    .Virtual(true)
                    )
                .Sortable(s => s.AllowUnsort(true).Enabled(true).SortMode(GridSortMode.MultipleColumn))
                .AutoBind(false)
                    .Events(e => e
                        .Edit("immoBaseCptTiers_grilleTiersEdit")
                        .Change("immoBaseCptTiers_grilleTiersChange")
                    )
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .Batch(true)
                    .ServerOperation(true)
                    .Events(events => events
                        .Error("kendoGridErrorHandler")
                        .Sync("immoBaseCptTiers_grilleTiersSync")
                    )
                    .Read(read => read.Action("Editing_Read", "ImmoBaseCptTiers").Data("baseCptTiers_additionnalData_read"))
                    .Create(create => create.Action("Editing_Create", "ImmoBaseCptTiers").Data("baseCptTiers_additionnalData_create"))
                    .Update(update => update.Action("Editing_Update", "ImmoBaseCptTiers").Data("baseCptTiers_additionnalData_update"))
                    .Destroy(destroy => destroy.Action("Editing_Destroy", "ImmoBaseCptTiers").Data("baseCptTiers_additionnalData_destroy"))
                    .Model(model =>
                    {
                        model.Id(m => m.ct_num_compte);
                        model.Field(m => m.ct_soc_code).DefaultValue(Global.GlobalSession.societe.code);
                    }))
                )

[Alexander Valchev]

Hello Thomas,

I am afraid that what you would like to achieve is not supported. By default the validation tooltip is always included below the input which means that in order to see it it should overflow. However having a scrollable container and something that will overflow it is mutually exclusive.

That said, if you would like to see the validation tooltip without scrolling, the Grid should not be scrollable, nor nested in a scrollable container.

As a workaround I can suggest you to use the following CSS rules:

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

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

In this way the tooltip will be rendered inside the editor container, which should make it visible for the user.
I hope this solution will fit in your case.

Kind regards,
Alexander Valchev
the Telerik team

[THOMAS]

Thanks,
till now I have change the createAt to Top for this grid.
Thank you for your response I will try it.