Kendo UI for jQuery R2 2020 SP1 trial version download
Kendo UI currently provides four controls: Kendo UI for jQuery , Kendo UI for Angular , Kendo UI Support for React and Kendo UI Support for Vue . Kendo UI for jQuery is the most complete UI library for creating modern web applications.
Height
By default, Grid has no height set and will expand to fit all table rows.
Getting Started
Note : Set the height to Grid only when scrolling is enabled.
To set the height of the grid, use any of the following methods:
- Apply the inline height style to the "div" from which the Grid is initialized.
- Use the height property of the widget, which applies an inline style to the Grid wrapper—the same as the previous option.
- Use external CSS, such as ID or .k-grid CSS class to apply height styles.
After setting the height of the grid, it will calculate the appropriate height of its scrollable data area so that the combination of header row, filter row, data, footer, and pager equals the expected height of the widget. This is why if you change the height of the grid via JavaScript after creating the widget, you must call the resize method subsequently. In this way, Grid can recalculate the height of its data area.
In certain cases, you can use JavaScript or external CSS as a div.k-grid-content element to set the height style to a scrollable data area. In this case, please avoid setting the height for the Grid.
Figure 1: Grid with fixed height and scrolling enabled
Set minimum height
Note : Not applicable when virtual scrolling is enabled.
You can make the Grid expand and contract vertically within a certain range according to its number of rows. For this, please apply the maximum and/or maximum height style to the scrollable data area, and do not set any height of the grid. If you use the MVC wrapper of the grid, please delete the default data area height. In addition to GridID, you can also use the .k-grid class to locate all widget instances.
#GridID .k-grid-content
{
min-height: 100px;
max-height: 400px;
}
Enable auto resizing
Note : Only applicable to scrollable grids.
1. To allow the Grid and its parent to resize, apply a style with a height of 100% to the widget's <div class="k-grid"> wrapper. According to web standards, elements whose height is set as a percentage require the height of their parent to be explicitly set. This requirement is applied recursively until the pixel height element or html element is reached. Elements with a height of 100% cannot have margins, padding, borders, or sibling elements, which is why you must also delete the default border of the grid.
2. Make sure that the internal layout of the Grid adapts to changes in the height of the "div" wrapper. If these changes are triggered by adjusting the size of the browser window, please subscribe to the browser's window resizing event and execute the Grid's resize method. The resizing method will measure the height of the Grid "div" and adjust the height of the scrollable data area.
- If you place the Grid in a Kendo UI Splitter or Kendo UI window, you don't need to call the resize method, because these widgets will execute it automatically. In addition, if you use locked columns, you do not need to apply this method.
- If the vertical space available for the Grid depends on the custom size adjustment of the layout (controlled by the user), use the appropriate event or method related to the layout change to perform the Grid resizing method. In this case, even if you use locked columns, call the resize method.
After Kendo UI Q3 2013 version, the resize method is applicable to Kendo UI version. For earlier versions instead of resizing, please use the following method, which actually works in the same way.
$(window).resize(function() {
var gridElement = $("#GridID"),
newHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function(){
otherElementsHeight += $(this).outerHeight();
});
gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});
Configure loading indicator
Internally, Grid uses the kendo.ui.progress method to display loading overlays during remote read requests. If scrolling is disabled, the overlay will be displayed on the entire grid. If scrolling is enabled, the overlay will be displayed on the scrollable data area. If scrolling is enabled and the Grid has no height set, the data area will initially have zero height, which will make the loading overlay invisible during the first remote request. To load the overlay visually, use one of two methods:
- Set the height of the grid
- Apply minimum height style to div.k-grid-content element
For the latest news about Kendo UI, please follow Telerik Chinese website!