Shulou(Shulou.com)06/01 Report--

This article will explain in detail how Kendo UI defines grid height in Web development, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Download Kendo UI for jQuery R2 2020 SP1 trial version

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 does not set the height and expands to fit all table rows.

Getting started Guid

Note: set the height to Grid only when scrolling is enabled.

To set the height of the mesh, use any of the following methods:

Apply the inline height style to the "div" from which the Grid is initialized.

Use the widget's height property, which applies inline styles to Grid wrapper- the same as the previous option.

Use external CSS, such as ID or .k-grid CSS classes, to apply height styles.

After setting the height of the grid, it calculates the appropriate height of its scrollable data area so that the combination of header rows, filter rows, data, footers, and pager equals the expected height of the widget. This is why if you change the height of the grid through JavaScript after creating the widget, you must then call the resize method. In this way, Grid can recalculate the height of its data region.

In certain cases, you can use JavaScript or an external CSS as a div.k-grid-content element to set the height style to a scrollable data region. In this case, avoid setting the height for Grid.

Figure 1: grid with fixed height and scrolling enabled

Set minimum height

Note: not applicable when virtual scrolling is enabled.

You can make Grid expand and contract vertically according to its number of rows and within a certain range, applying the maximum and / or maximum height style to the scrollable data area, and not setting any height of the grid. If you are using the MVC wrapper of the grid, delete the default data region height. In addition to GridID, you can also use the .k-grid class to locate all widget instances.

# GridID .k-grid-content {min-height: 100pxposition maxmax height: 400px;}

Enable automatic resizing

Note: applies only to scrollable meshes.

1. To allow Grid and its parents to resize, apply a style of 100% height to the wrapper of the widget. According to the web standard, an element that sets the height as a percentage requires that the height of its parent be explicitly set. This requirement is applied recursively until the element or html element reaches the pixel height. Elements with a height of 100% cannot have margins, fills, borders, or siblings, which is why you must also delete the default border of the grid.

two。 Make sure that the Grid internal layout adapts to "div" wrapper height changes, and if these changes are triggered by resizing the browser window, subscribe to the browser window resizing event and execute the resize method of Grid. The resizing method measures the height of the Grid "div" and adjusts the height of the scrollable data area.

If you place 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 have to apply this method.

If the vertical space available for Grid depends on the custom sizing of the layout (controlled by the user), use the appropriate event or method related to layout changes to perform the sizing method of Grid. In this case, the resize method is called even if you use a locked column.

After the Kendo UI Q3 2013 release, the resize method applies to the Kendo UI version. For previous versions that are not resized, 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 = 0scape Elements.each (function () {otherElementsHeight + = $(this). OuterHeight ();}); gridElement.children (".k-grid-content") .height (newHeight-otherElementsHeight);})

Configure load indicator

Internally, Grid uses the kendo.ui.progress method to display the load overlay during a remote read request. If scrolling is disabled, the overlay is displayed on the entire grid. If scrolling is enabled, the overlay is displayed on the scrollable data area. If scrolling is enabled and Grid does not set a height, the data area will initially have zero height, which will make the load overlay layer invisible during the first remote request. To visually load overlay layers, use one of the following two methods:

Set the height of the grid

Apply the minimum height style to the div.k-grid-content element

On the Web development of Kendo UI is how to define the grid height is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.