This is a migrated thread and some comments may be shown as answers.

Grid Display Issue When Mobile phone or tablet

3 Answers 307 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vineet
Top achievements
Rank 1
Vineet asked on 07 Jan 2017, 09:44 AM

0down votefavorite

Kendo UI Grid is working fine in desktop mode but when mobile : "phone" is enabled the grid do not display correctly.

Kendo ui grid on desktop mode see attached image

Kendo ui grid on mobile or tablet mode see attached image

here is my view

<link href="/assets/plugins/kendoui/styles/kendo.common.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.flat.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.flat.mobile.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet"> <link href="~/assets/plugins/kendoui/styles/kendo.dataviz.flat.min.css" rel="stylesheet" /> <!-- Page-Title --> <div class="row"> <div class="col-sm-12"> <h4 class="page-title">System Logs</h4> <ol class="breadcrumb"> <li><a href="/Dashboard">Home</a></li> <li class="active">System Logs</li> </ol> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="card-box table-responsive"> <div id="tbl_log"></div> </div> </div> </div> <script src="/assets/plugins/kendoui/js/kendo.all.min.js"></script> <script src="/assets/plugins/kendoui/js/jszip.min.js"></script> <script src="/assets/plugins/moment/moment.js"></script> <script src="/CustomScripts/logviewer.js"></script>

 

Kendo UI Grid is working fine in desktop mode but when mobile : "phone" is enabled the grid do not display correctly.
Kendo ui grid on desktop mode enter image description here
Kendo ui grid on mobile or tablet mode
enter image description here
here is my view
<link href="/assets/plugins/kendoui/styles/kendo.common.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.flat.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.flat.mobile.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet"> <link href="~/assets/plugins/kendoui/styles/kendo.dataviz.flat.min.css" rel="stylesheet" /> <!-- Page-Title --> <div class="row"> <div class="col-sm-12"> <h4 class="page-title">System Logs</h4> <ol class="breadcrumb"> <li><a href="/Dashboard">Home</a></li> <li class="active">System Logs</li> </ol> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="card-box table-responsive"> <div id="tbl_log"></div> </div> </div> </div> <script src="/assets/plugins/kendoui/js/kendo.all.min.js"></script> <script src="/assets/plugins/kendoui/js/jszip.min.js"></script> <script src="/assets/plugins/moment/moment.js"></script> <script src="/CustomScripts/logviewer.js"></script>
here is the js
$("#tbl_log").kendoGrid({ toolbar: ["excel"], excel: { allPages: true }, dataSource: { type: "json", transport: { read: "/ViewLog/GetLogs" }, schema: { type: 'json', data: 'msg', total: "total", model: { id: "LogID", fields: { LogID: { type: "number" }, LogModule: { type: "string" }, LogDetails: { type: "string" }, Username: { type: "string" }, LogLevel: { type: "string" }, LogDateTime: { type: "date" } } } }, pageSize: 15 }, height: 670, sortable: true, groupable: true, filterable: true, reorderable: true, resizable: true, mobile: "phone", selectable: "row", pageable: { refresh: true, pageSizes: [15, 25, 50, 100], buttonCount: 5 }, columns: [ { field: "LogID", title: "Log #", width: 120 }, { field: "Username", title: "User", width: 180 }, { field: "LogLevel", title: "Level", width: 120, //template: "#if(ErrorDesc==null){# #: DeviceLabel # #}else If(ErrorDesc==""){# #: DeviceLabel # #}else{# #: DeviceText # #}#" template: '#if(data.LogLevel === "Information"){#<span class="label label-primary"> Information </span>#}#' + '#if(data.LogLevel === "Critical"){#<span class="label label-danger"> Critical </span>#}#' + '#if(data.LogLevel === "Warning"){#<span class="label label-warning"> Warning </span>#}#', }, { field: "LogModule", title: "Module", width: 140 }, { field: "LogDetails", title: "Details", width: 300, }, { field: "LogDateTime", title: "Date", format: "{0:dd-MMM-yyyy hh:mm:ss tt}", parseFormats: ["MM/dd/yyyy h:mm:ss"], width: 160, filterable: { ui: "datetimepicker" } } ] });

 

please advice

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 10 Jan 2017, 03:57 PM

Hi Vineet,

I advise you start by examining this article to see the requirements for such a setup: http://docs.telerik.com/kendo-ui/controls/data-management/grid/adaptive.

If this does not help you resolve the situation, compare your code with the following demo code: http://demos.telerik.com/kendo-ui/m/index#source-code-view?view=grid/adaptive. This will help you see a functioning grid and the code that creates it, including all needed resources and element attributes.

Regards,

Marin Bratanov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rajesh
Top achievements
Rank 1
answered on 07 Mar 2019, 10:35 AM

Hi Bratanov 

i followed your examples but still am facing same issue,

how do i achieve this 

see issue image attaches 

0
Marin Bratanov
Telerik team
answered on 10 Mar 2019, 08:23 AM
Hello,

At this point my best guess is that a Kendo mobile application is not instantiated so that the grid inside can use its mobile rendering, or that the mobile scripts/stylesheets are not present on the page.

I am attaching a sample that showcases the needed web assets and how you can instantiate a mobile rendering of the grid by creating a mobile application for mobile devices. I am also attaching a short video with the expected behavior so you can compare against it and see if there are any significant differences in the testing approach or behavior.

If you are having difficulties with this, please modify my sample to showcase the problem so I can investigate.


Regards,
Marin Bratanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Vineet
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Rajesh
Top achievements
Rank 1
Share this question
or