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

Web interface development tool Kendo UI is how to adaptive rendering, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Adaptive rendering

Kendo UI for jQuery provides customers with a consistent experience on any device by supporting adaptive enhancements.

For example, when you filter or edit data on a mobile device, Kendo UI slides through the user's new screen, unlike inline and pop-up operations on desktops.

Enable responsive design

To enable adaptive rendering, set the mobile property to true or "phone":

If set to true, the widget will use adaptive rendering when viewed on a mobile browser.

If set to "phone", the widget is forced to use adaptive rendering regardless of the browser type.

Important: for mobile rendering, we recommend that you also set the height option. If you do not set an explicit height, each view of the grid may have a different height.

KendoGrid ({columns: [{field: "name"}, {field: "age"}, {command: "destroy"}], dataSource: [{name: "Jane Doe", age: 30}, {name: "John Doe", age: 33}], filterable: true,editable: true,columnMenu: true,height: 550 Art mobile: "phone"})

Configure panels on mobile Devic

The mobile panel that places the adaptive grid does not automatically expand its height, to add the adaptive mesh to the Kendo UI mobile application, set the stretch configuration of each view to true, and then apply the 100% height to the grid. Or define an explicit pixel grid height and omit the panel stretch option.

Important: when using adaptive rendering of meshes in Kendo mobile applications, please apply our Less-based theme.

The following example shows how to apply the Stretch option.

Var gridConfig = {columns: [{field: "name"}, {field: "age"}, {command: "destroy"}], dataSource: [{name: "Jane Doe", age: 30}, {name: "John Doe", age: 33}], filterable: true,columnMenu: true,mobile: "phone", height: "100%"}; function onInit () {$("# grid") .kendoGrid (gridConfig);} var app = new kendo.mobile.Application ()

The following example shows how to apply the height option.

Var gridConfig = {columns: [{field: "name"}, {field: "age"}, {command: "destroy"}], dataSource: [{name: "Jane Doe", age: 30}, {name: "John Doe", age: 33}], filterable: true,columnMenu: true,mobile: "phone", height: "140px" / / grid will be 140px height}; $("# grid") .kendoGrid (gridConfig)

Resize the column

When the user puts his finger on the appropriate column header, the column resizing function on the touchscreen device is triggered. When the resize icon appears, the user can resize the column by dragging.

Figure 1: grid with resizable columns on mobile devices

Destroy adaptive mesh

In adaptive mode, the grid generates auxiliary tags, which need to be deleted if you want to destroy the widget manually.

Manually destroy the mesh:

Call kendo.destroy () on the nearest .k-pane-wrapper ancestor created around the Grid widget

Removes the entire .k-pane-wrapper element from DOM.

To recreate the Grid, insert a new div in the same location where the Grid div was originally placed.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.