Kendo window change scrolling to have static update/cancel buttons


I'm using ASP MVC and a current release of Kendo. If I add too much information to a Kendo window, it scrolls vertically. This hides the cancel/update buttons that get generated at the bottom. I need these shown. The user should not need to scroll to hit cancel. How can I make the "form-horizontal" scroll and the "k-window" not scroll?

Full Window:

Full window

Window with scrolling:

Scroll window


        .Columns(columns => {
           columns.Bound(o => o.Company.Name);
           columns.Bound(o => o.Company.DealerId);
           columns.Bound(o => o.Company.CityState).Title("City, " + stateTitle);
           columns.Bound(o => o.Company.CountryCode);
           columns.Bound(o => o.Company.Phone);
           columns.Bound(o => o.CompanyStatus).Title("Status");
           columns.Command(com => { com.Edit(); });
           dataSource => dataSource
              .Sort(sort => sort.Add("Name").Ascending())
              .Model(model => model.Id(m => m.Company.Id))
              .Update(up => up.Action("UpdateCompany", "Home"))
        .Editable(ed => ed
           .Window(w => w
              .Title("Edit company")
Problem courtesy of: Paul


In order to achieve such layout, you need to handle the scrolling in your own element rather than leave it to the window. This involves some customization that may break the grid functionality, so consider this unsupported, as it may break without notice in the future. Suggesting this on UserVoice might get implemented officially, so it would be better in the long term.

So, in order to do that, attach a window open event handler:

var buttonWrapper = $(".k-edit-buttons");
var formContainer = $(".k-edit-form-container");
    overflow: "auto", // make the container scroll
    maxHeight: 300 // maximum height of the window content, sans the chrome

You will also need to add the styles to the button wrapper:

.k-edit-form-container .k-edit-buttons {
    clear: both;
    text-align: right;
    border-width: 1px 0 0;
    border-style: solid;
    position: relative;
    bottom: -1em;
    padding: .6em;
Solution courtesy of: Alex Gyoshev


Try removing the Resizable() property from the window. I typically don't specify the Height() or Resizable() attributes for my Kendo Windows.

Discussion courtesy of: Matt Millican

This recipe can be found in it's original form on Stack Over Flow.