Progress® Telerik® UI for ASP.NET MVC Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 11 Jan 2021 14:40 by ADMIN
louis
Created on: 01 Mar 2013 02:06
Category: UI for ASP.NET MVC
Type: Feature Request
32
Footer for popup editor / window
I hope, for the grid's custom/template popup editor, you guys can include a footer section at the bottom of the window, and allow us to choose to align the buttons left, middle or right.

Right now there's no separation for these buttons. It blends right in with the rest of the editor, and the buttons are default floated to the left.

It can even be as simple as that, a greyed area at the bottom, just to indicate some separation between the body and "footer"

Like this: http://twitter.github.com/bootstrap/javascript.html#modals


I hope this can be applied to the window component as well 

Right now I have to completely implement my own custom popup/modal window because this isn't supported.
3 comments
ADMIN
Alex Hajigeorgieva
Posted on: 11 Jan 2021 14:40

Hi,

The buttons in the popup editable window are in a container with classes "k-edit-buttons k-state-default" which should allow you to manipulate the buttons together:

Regards,
Alex Hajigeorgieva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Mauricio
Posted on: 28 Aug 2013 23:01 
<div id="window" class="k-popup-edit-form" style="display:none" >
<div class="k-edit-form-container" />
<!-- window/form content -->
<div class="k-edit-buttons k-state-default">
<a href="#" id="cancel" class="k-button k-button-icontext k-grid-cancel"><span class="k-icon k-cancel"></span>Cancel</a>
 </div>
</div>
</div>
Imported User
Posted on: 17 Apr 2013 17:50 
Here's a piece of javascript I used to 'reskin' the footer to work like bootstrap:

BootstrapEditWindow = function (container) {
    var cont = container;
    if (container && container.container)
        cont = container.container;

    var updateButton = $('.k-grid-update', cont),
        cancelButton = $('.k-grid-cancel', cont);

    // empty buttons
    updateButton.empty();
    cancelButton.empty();

    var formActions = $('<div class="form-actions form-inline" />');

    cont.append(formActions);
    formActions.append(updateButton).append('&nbsp;').append(cancelButton);

    updateButton.removeClass('k-button k-button-icontext').addClass('btn btn-large btn-primary').text('Update');
    cancelButton.removeClass('k-button k-button-icontext').addClass('btn btn-large btn-danger').text('Cancel');

    return container;
};
Create an account Log In
View
Type
Status
Category