JqGrid on mobile device

Question

I was trying to use jqGrid for a mobile device development, but I am unable to get the same view as the web view. The pager arrows and other images show only when I do a mouseover.

Please let me know if I have to do something special for the plugin to work on a mobile device.

I also have a problem in getting the columnChooser to work. The pop-up is not coming

Thanks

[Update] Please find below the function that I am writing.

The files that I am including are:

jquery.mobile-1.0.min.css
jqmobile-patch.css
jquery-ui.css
ui.jqgrid.css
ui.multiselect.css
jquery-1.7.1.min.js
jquery-ui.min.js
ui.multiselect.js
grid.locale-en.js
jquery.jqGrid.min.js

in the order provided.

function buildGrid() {
var grid = jQuery("#contactGrid");
grid.jqGrid({
  url: '/public/json/contactsdata.json',
  mtype:'GET',
  datatype: 'json',
  headertitles: true,
    sortable: true,
  colNames:['ID','Name','Date of Birth',"Email","Marital Status"],
  colModel:[
    {name:'id', index:'id'},
    {name:'name',index:'name'},
    {name:'dob',index:'dob'},
    {name:'email',index:'email'},
    {name:'maritalstatus',index:'maritalstatus'}
  ],
    sortname: 'id',
    sortorder: 'asc',
    rowNum:5,
    rowList:[5,10,20],
  pager: '#contactPager',
  viewrecords: true,
  autowidth: true,
  shrinkToFit: true,
  loadonce:true,
  emptyrecords: "No Records to display",
  height: 'auto',
  width: '80%',
  caption: "Contact Details",
  ignoreCase: true,
  gridview: true

});

    grid.jqGrid('navGrid', '#contactPager', {refreshstate: 'current', search:true,add: false, edit: false, del: false});
    grid.jqGrid('navButtonAdd', '#contactPager', {
            caption: "",
            buttonicon: "ui-icon-calculator",
            title: "Choose columns",
            onClickButton: function () {
                $(this).jqGrid('columnChooser');
            }
        });
 };

What kind of mobile device is it, and what browser are you using? — Justin Ethier, Apr 16 '12 at 14:15
I am actually evaluating mobile devices for my company. Right now, I am working on Motorola ET1, which is Android based. It does not work even when I try to simulate for iPad. — Sukesh Kumar, Apr 16 '12 at 14:37
@SukeshKumar: The HTML dialect which you use could be also important. You should try to use HTML5. In any way you should verify that some ` — Oleg, Apr 16 '12 at 15:22
Hi @Oleg: Yes, the same sample works on non-mobile computer. I think you missed to make "[the answer]" as the link. Please help. — Sukesh Kumar, Apr 16 '12 at 17:05
@SukeshKumar: Sorry! It's [here](http://stackoverflow.com/a/5901459/315935) and [here](http://stackoverflow.com/a/9688942/315935). If you has no problem on "non-mobile" computer it could be some another problem. You current question contains too few information. You should include some screanshorts and some code which can be used to reproduce the problem. The information only that the code work correctly in one browser and incorrectly in another is too less. — Oleg, Apr 16 '12 at 17:11
@SukeshKumar: Sorry, but from the code I can't see anything suspected. I have no Android at me so I am afraid that I con't help you in solving of the problem. — Oleg, Apr 16 '12 at 21:15
@Oleg: One can use Samsung Remote Test Lab to control real mobile devices over internet. Also we can use Android virtual device included in Android developer kit for less presice emulation. So there is no need for Android device. There is question about jqgrid accessibility issue in Android in http://stackoverflow.com/questions/10164864/how-to-make-jqgrid-accessible-in-android-if-it-is-bigger-than-viewport — Andrus, Apr 17 '12 at 10:55
@Andrus: Sorry, but I have currently no projects for my customers where I need Android developer kit so I don't start the part of development. — Oleg, Apr 17 '12 at 10:59
@Oleg Will it be possible for you to redirect to someone regarding this? I was also trying to follow your post on custom columnChooser http://stackoverflow.com/questions/9687201/jqgrid-column-chooser-modal-overlay/10181376#10181376, but I am getting the error "Result of expression 'selector.data('dialog').uiDialog' [undefined] is not an object.". When I tried to inspect the problem, I do not see uiDialog in the data object. This again works fine on an html page, but does not work on mobile. — Sukesh Kumar, Apr 17 '12 at 12:43
@SukeshKumar: How I can see [here](https://github.com/jquery/jquery-ui/blob/1.8.19/ui/jquery.ui.dialog.js#L103) the `uiDialog` must be created direct in the constructor of jQuery UI Dialog and should be set. You can examine `selector.data()` object. If `selector.data().dialog` is undefined then no dialog is created. You can additional verify that `$(".ui-dialog").length >= 1`, so that at least one UI Dialog is created. If `$(".ui-dialog").length === 1`, then `$(".ui-dialog")` should be the same as `selector.data('dialog').uiDialog`. I don't understand what you meant under "redirect to someone" — Oleg, Apr 17 '12 at 13:43

score 1 · Answer 1 · answered Apr 17 '12 at 18:12

I solved the problem. The issue was with the order of inclusion of the files. The order that I have followed is:

<link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="/public/css/jqmobile-patch.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/plugin/ui.multiselect.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/js/jqmobile-patch.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/plugin/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>

JqGrid on mobile device

1 Answers1