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
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,
Telerik by Progress
Rank 1
Hi Bratanov
i followed your examples but still am facing same issue,
how do i achieve this
see issue image attaches
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