Example of Window with toolbar or footer?

4 posts, 0 answers
  1. Alex
    Alex avatar
    55 posts
    Member since:
    May 2015

    Posted 17 Feb Link to this post

    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?

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    612 posts

    Posted 21 Feb Link to this post

    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.
  3. Alex
    Alex avatar
    55 posts
    Member since:
    May 2015

    Posted 22 Feb in reply to Veselin Tsvetanov Link to this post

    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.
  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    612 posts

    Posted 24 Feb Link to this post

    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.
Back to Top