grid popup edit change height button position

[Dan]

I have a grid with two columns one text and one is datetime. The grid has to be edited in a popup. Because the datetime calendar is too big we want move the buttons in the popup below. So we tried to give the popup window a height. However if we do that the buttons do not stick to the bottom. They remain to where the content is finished.

How can this be achieved?

[Patrick | Technical Support Engineer, Senior]

Hi Dan,

If you are trying to increase the size of the popup window, one way this can be achieved is to use a custom popup editor template by configuring the Editable.TemplateName property:

@(Html.Kendo().Grid<OrderViewModel>()
    .Name("grid")
    .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("CustomPopupEditor"))
    //...
)

Then, create a custom template in the Views(or Pages)/Shared/EditorTemplates folder.  Here is an example of a two field, one hidden field Popup template where a customPopup class provides height for the template:

CustomPopupEditor.cshtml

@model GridExample.Data.OrderViewModel

<div class="k-edit-form-container customPopup">
    <h3>Customized Popup Template</h3>
    <br />
    @Html.HiddenFor(model => model.OrderID)

    <div class="k-edit-label">
        @Html.LabelFor(model => model.ShipName)
    </div>
    <div class="k-edit-field">
        @Html.EditorFor(model => model.ShipName)
        @Html.ValidationMessageFor(model => model.ShipName)
    </div>

    <div class="k-edit-label">
        @Html.LabelFor(model => model.OrderDate)
    </div>
    <div class="k-edit-field">
        @Html.Kendo().DateTimePickerFor(model => model.OrderDate)
        @Html.ValidationMessageFor(model => model.OrderDate)
    </div>
</div>

CSS

    .customPopup 
    {
        height: 600px;
    }

Please feel free to adjust the height to your preferences. I hope this helps!

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik

[Dan]

Hi Patrick,

Thank you for the suggestion. Not exactly what I wanted but seems to work. I want to set the height of the window through configuration and not through css.

[Patrick | Technical Support Engineer, Senior]

This approach gives you the flexibility to modify the div container within the custom popup editor to your preferences with CSS.  Optionally, if you would like to see a popup template API, please feel free to create a feature request at the UI for ASP.NET Core public feedback portal.