Example of Window with toolbar or footer?

[Alex]

I am loading the content of an MVC Window

@(Html.Kendo().Window()
.Name(modalWindowName)
.Visible(false)
.Title("Loading...")
.Modal(true)
.Actions(actions => actions
    .Maximize()
    .Close()
)
.Scrollable(true)
.Pinned(true)
//.Draggable(true)
.Resizable()
.Animation(false)
.Height(600)
.Width(navbarWindowWidth)
.Events(events => events.Refresh(onWindowRefresh))
)

 

via url, so I can re-use the window

var navbarWindow = $("#@(modalWindowName)");
var navbarWindowData = navbarWindow.data("kendoWindow");

 

var  navbarWindowURL = "@Html.Raw(@Url.Action("actionName", "controllerName")

navbarWindowData.refresh({

    url: navbarWindowURL

}).center();

 

But, I'm having trouble coming up with a way to put a toolbar or group of buttons in a footer at the bottom of the window. 

Below is a brief example of what the view from the URL (navbarWindowURL) will look like. You can I created a panel with a footer and such, but if the body of the panel is very large I have to scroll through the window to get to the footer, which is not a very pleasing UI for the end-user. Is there some way I can create a footer that will always stick to the bottom of the window or something so the end-user can always see the button? It also has to be able to re-adjust if the size of the window changes.

@using (Ajax.BeginForm("Update", "Settings", FormMethod.Post,
        new AjaxOptions
        {
            HttpMethod = "POST",
            OnBegin = "saving();",
            OnSuccess = "saved();",
            OnFailure = "failed();",

        }
        ))
{



    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="row" id="settingsResults"></div>
        </div>
        <div class="panel-body">
            <div>
                @(Html.EditorFor(m => Model.Settings))
            </div>
        </div>
        <div class="panel-footer">
            <button id="btnSave" class="btn btn-primary" type="submit">Save</button>
        </div>
    </div>
}

Are there any examples of windows with a toolbar or footer that contains buttons?

[Veselin Tsvetanov]

Hi Alex,

Attached you will find a simple project, based on the described scenario. You will notice, that the Window has a Toolbar stuck as a footer. This is achieved by adding the following CSS rule to the Toolbar styles:

html .k-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    border: 0;
    width: 100%;
}

Regards,
Veselin Tsvetanov
Telerik by Progress

[Alex]

This works until the HTML you load inside the window is longer than the window, in which case vertical scroll bars appear. I fyou scroll using the vertical scroll bar, the toolbar doesn't stay stay at the bottom; it moves along with the page as you scroll.

[Veselin Tsvetanov]

Hello Alex,

In order to keep the Toolbar fixed, while the Window content scrolls, you will need to extend a bit the suggested CSS rules:

.k-window .k-window-content {
    position: static;
    padding-bottom: 50px;
}

html .k-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    border: 0;
    width: 97%;
}

Keep in mind, that you may have to further adjust the styling according to your specific needs.

Attached you will find a modified version of the sample.

Regards,
Veselin Tsvetanov
Telerik by Progress