Update the Kendo window scrolling feature to include fixed update and cancel buttons

I've encountered an issue while using ASP MVC and the latest version of Kendo. When I add too much content to a Kendo window, it starts scrolling vertically, which ends up hiding the cancel/update buttons at the bottom. This is not ideal as the user shouldn't have to scroll to access these buttons. Is there a way to make only the "form-horizontal" section scrollable and stop the "k-window" from scrolling?

Full Window:

Window with scrolling:

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)
           )
        )
     )

Answer №1

To achieve a layout like this, it's essential to handle the scrolling within your specific element instead of relying on the window. This will require some customization that may interfere with the grid functionality, so please be aware that this method is not officially supported and could potentially stop working in the future without notice. If you want to see this feature implemented officially, consider submitting a suggestion on UserVoice for long-term benefits.

To implement this approach, you can create an "open event" handler for the window:

var buttonWrapper = $(".k-edit-buttons");
var formContainer = $(".k-edit-form-container");
formContainer.css({
    overflow: "auto", // enable container scrolling
    maxHeight: 300 // set maximum height for window content, excluding the browser interface
});
buttonWrapper.insertAfter(formContainer);

Additionally, make sure to add styling rules for 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;
}

Answer №2

I find that it's best to leave out the Resizable() property when working with Kendo Windows. I usually don't even bother setting the Height() or Resizable() attributes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging text in CSS for responsive design

One issue I encountered was setting a division on the webpage. When I try to minimize the browser, the division does not adjust properly to fit the screen: width:1300px; margin:0 auto; height:40px; ...

Ways to modify the .MuiSelect-nativeInput element within Material-UI

const styles = makeStyles((theme) => ({ root: { margin: "0px 20px" }, textStyle: { fontFamily: "Comfortaa", }, container: {}, textField: { fontFamily: "Comfortaa", }, dropDownFormSize: { width: &qu ...

Understanding the usage of jQuery transitionend to prevent interruptions in CSS animations

I found a similar thread on StackOverflow but I'm struggling to apply it in my current scenario. The Setup (Welcome Ideas) I've developed a jQuery slider that will have multiple instances on one page, each containing an unknown number of childr ...

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

The printed PDF of a webpage does not display HTML table background colors in Chrome or Firefox

Is there a way to change the colors of table cells in an HTML table when exporting to PDF? I'm creating content dynamically that includes background-color: #ffffff (or red) and showing it on a webpage, but the cell backgrounds appear as white in the P ...

Ways to retrieve element(s) and delete a specific class located in the DOM structure

This is my first time using stackoverflow and posting a question here! :] Can someone guide me on the best way to write JQuery code for this particular task? Task: My goal is to remove the 'active' CLASS from a nav element when it is active: ...

Creating visually appealing definition lists

My goal is to customize the appearance of a shopping cart that is created by a rigid system where I cannot modify the html code. The categories list is generated in the following manner: <dl id='dlCatLvl1' class='clsCatLvl1 clsOffCat1&ap ...

Unusual margin glitch discovered in Chrome version 9

Encountered a strange issue with Google Chrome 9: A left-margin for an input element is specified but Chrome fails to apply it upon page load. Oddly enough, when I toggle the specific declaration off and then back on using Developer Tools, the margin is f ...

Unable to navigate through images on Bootstrap Carousel using previous and next buttons

Despite following tutorials and examining the HTML code on bootstrap, I'm facing issues while trying to create a carousel. I believed that everything was done correctly, but when I click on the next button, nothing happens. <!DOCTYPE html> < ...

How to access the CSS and JS files in the vendor folder using linemanjs

Currently, I am in the process of developing a web application utilizing linemanjs. However, I have encountered an issue where the vendor css and js files are not being referenced correctly when explicitly included. I would appreciate any guidance on what ...

retrieve the height value of a div element using AngularJS

I'm having trouble retrieving the updated height of a div using AngularJS. It seems to only provide the initial value and does not update as expected: vm.summaryHeight = $(".history-log-container").height(); console.log(vm.summaryHeight);//always dis ...

Managing errors in Kendo UI Grid within an MVC framework

Utilizing the Kendo UI grid through the MVC Helper object has presented a challenge for me. In case of an error during the ajax call (such as when the web server is unavailable), the request returns an error code. However, the Kendo UI grid fails to respon ...

remove a section from the main body

body { display: flex; justify-content: center; align-items: center; background: #0e1538; } <canvas id="spaceholder" width="804" height="604"></canvas> </div> <div class="MenüCenter"> <canvas id="canvas" width="800" ...

In React development, a div (button) is visible, but in the production build, it becomes hidden from

I have been working on a website for my job, and I have added a "Gallery" button on top of two slideshows. Everything works perfectly fine on the development build, but when it comes to the production build, the button doesn't show up for some reason. ...

Can animations be stacked in a queue while using velocity.js?

I'm currently tackling a project involving a push menu. When the content div slides over, the menu buttons come in with a slight animation as they appear on the screen. However, if the user rapidly opens and closes the menu multiple times, the items o ...

Identifying activity on a handheld device

I am currently working on a website and I have noticed that it doesn't work as well on mobile devices as it does on desktop. There are performance issues that need to be addressed. I've seen other websites redirecting users to a different page wh ...

Scroll horizontally within each row

I am attempting to create a table with individual horizontal scrolling for each row, dynamically. Currently, my code only allows the entire table to scroll horizontally, not the individual rows. https://i.sstatic.net/3oaPl.jpg <table class="table-mai ...

Tips for resolving flickering animations in CSS and JavaScript

Is it possible to dynamically set a scale and margin for an element in order to center it fluidly using the wheel event? I am aiming to achieve a smooth transition while also adjusting scroll position on the wrapping element in a fluid manner. In the prov ...

What are the steps to create a connect4 board featuring rounded corners and curved sides?

How can I create a Connect4 board with the exact styles and properties shown in the image? I want to achieve the curved sides effect as displayed. Can this be done using only HTML elements, or is there an easy SVG solution available? Here is my current co ...

When aligning to the right, input box does not wrap

Is there a way to prevent an input box from displaying on a lower line than the menu when using CSS to create a one line menu floated to the right? This is the CSS code being used: <style type="text/css"> #nav { margin:0; padding:0; lis ...