Is the Kendo UI Web Grid adaptive rendering independent of the Kendo mobile application?

StackOverflow https://stackoverflow.com/questions/23086953

题

I'm trying out the latest Kendo UI Web release with a view to using it in our applications, particularly the Grid component.

As shown here the grid is capable of adaptive rendering on mobile devices, or in any browser if the mobile property is set to "phone" or "tablet". However, I can't get this to work in my code.

Does anyone know if the adaptive rendering is independent of the mobile application functionality in Kendo UI Web or is it a requirement that any adaptive grids are running as part of a Kendo UI mobile application?

I suspect it's the latter. My current code is just using the non-mobile Grid examples with the mobile property set to "phone" and I have not instantiated any instance of the Kendo mobile application (e.g. kendo.mobile.Application(document.body)).

Thanks, Chris.

ps. Following Taras' response I have some code that demonstrates my problem, adapted from his:

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script src="/assets/libraries/kendoui.web/2014.1.318/js/kendo.web.min.js"></script>
    <link href="/Assets/Libraries/KendoUI.Web/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="/Assets/Libraries/KendoUI.Web/2014.1.318/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <link href="/Assets/Libraries/KendoUI.Web/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            columns: [
              { field: "name" },
              { field: "age" },
              { field: "name" },
              { field: "age" },
              { field: "name" },
              { field: "age" },
              { field: "name" },
              { field: "age" },
              { command: "destroy" }
            ],
            dataSource: [
              { name: "Jane Doe", age: 30 },
              { name: "John Doe", age: 33 }
            ],
            filterable: true,
            columnMenu: true,
            mobile: "phone"
        });
    </script>

</body>
</html>
有帮助吗？

解决方案

Kendo UI adaptive rendering is independent part of mobile application functionality. Furthermore it is can automatically detect what type of device is using and apply required rendering style.
You can just enable this features by add mobile: true (or phone, or tablet) to your grid constructor

 <div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [
     { field: "name" },
     { field: "age" },
     { command: "destroy" }
   ],
   dataSource: [
     { name: "Jane Doe", age: 30 },
     { name: "John Doe", age: 33 }
   ],
   filterable: true,
   columnMenu: true,
   mobile: true
});
</script>

If you set is to true, script changes in styling and behavior in order to remain consistent with a device experience (for see difference run page in mobile browser). If you set mobile:phone or mobile:tablet you will see same result with mobile and desktop browser and auto detect device features turns off.

See examples: http://docs.telerik.com/kendo-ui/getting-started/web/grid/adaptive

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top