This is a migrated thread and some comments may be shown as answers.

Example of Window with toolbar or footer?

3 Answers 126 Views
Window
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 17 Feb 2017, 10:56 PM

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?

3 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 21 Feb 2017, 01:07 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alex
Top achievements
Rank 1
answered on 22 Feb 2017, 02:38 PM
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.
0
Veselin Tsvetanov
Telerik team
answered on 24 Feb 2017, 07:19 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Window
Asked by
Alex
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Alex
Top achievements
Rank 1
Share this question
or