Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Kendo window change scrolling to have static update/cancel buttons

Kendo window change scrolling to have static update/cancel buttons

Problem

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

Code:

@(Html.Kendo().Grid(Model.CompanyList)
        .Name("grid")
        .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(); });
        })
        .Pageable()
        .Sortable()
        .DataSource(
           dataSource => dataSource
              .Server()
              .Sort(sort => sort.Add("Name").Ascending())
              .Model(model => model.Id(m => m.Company.Id))
              .Update(up => up.Action("UpdateCompany", "Home"))
        )
        .Editable(ed => ed
           .Mode(GridEditMode.PopUp)
           .TemplateName("Company")
           .Window(w => w
              .Title("Edit company")
              .Draggable()
              .Resizable()
              .Width(436)
              .Modal(true)
              .Animation(false)
           )
        )
     )
Problem courtesy of: Paul

Solution

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");
formContainer.css({
    overflow: "auto", // make the container scroll
    maxHeight: 300 // maximum height of the window content, sans the chrome
});
buttonWrapper.insertAfter(formContainer);

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

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Kendo window change scrolling to have static update/cancel buttons

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×