jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Create more than one grid in a page doesn’t work fully in iPad
Tagged: grid, grid on ipad, mobile grid, touch grid
This topic contains 4 replies, has 2 voices, and was last updated by vudh 12 years, 8 months ago.
-
Author
-
Hi,
When creating 2 grids in a page with touchmode enabled, only second grid scrolls when touching but the first one is not when running in iPad (safari and chrome desktop browsers are ok).
Any ideas for me? A small example would be better…Thanks,
vudhHi vudh,
Could you provide a sample that reproduces the reported behavior? That will allow us to debug the specific application scenario. Thanks in advance!
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for your prompt reply !
I send you an example that occurs the problem:jqxGrid Demo
$(document).ready(function () {
var theme = ”;var data = generatedata(500);
var source =
{
localdata: data,
datatype: “array”
};var dataAdapter = new $.jqx.dataAdapter(source);
$(“#gridUp”).jqxGrid(
{
width: $(window).width() – 30,
height: 400,
columnsmenu: false,
columnsheight: 35,
rowsheight: 30,
source: dataAdapter,
theme: theme,
//groupable: true,
groups: [‘productname’],
sortable: true,
pageable: true,
pagerheight: 35,
pagerrenderer: function () {
var element = $(““);
var paginginfo = $(“#gridUp”).jqxGrid(‘getpaginginformation’);
for (i = 1; i <= paginginfo.pagescount; i++) {
var anchor;
if (i == 1) {
anchor = $("”
+ “” + i + “”);
}
else {
anchor = $(“”
+ “” + i + “”);
}
anchor.appendTo(element);
anchor.click(function (event) {
if ($(this).val() != ”) {
var pagenum = parseInt($(this).val());$(“#gridUp”).jqxGrid(‘gotopage’, pagenum – 1);
}
});
}return element.appendTo($(“
“));
},
touchmode: true,
pagesize: 50,
pagesizeoptions: [’50’, ’80’, ‘100’],
columns: [
{ text: ‘First Name’, dataField: ‘firstname’, minwidth: 100, classname: ‘header’, cellclassname: ‘textcell’},
{ text: ‘Last Name’, dataField: ‘lastname’, minwidth: 100, classname: ‘header’, cellclassname: ‘textcell’ },
{ text: ‘Product’, dataField: ‘productname’, minwidth: 100, classname: ‘header’, cellclassname: ‘textcell’}
],
ready: function () {
$(“#gridUp”).jqxGrid(‘sortby’, ‘firstname’, ‘asc’);
}
});$(“#gridDown”).jqxGrid(
{
width: $(window).width() – 30,
height: 400,
columnsmenu: false,
columnsheight: 35,
rowsheight: 30,
source: dataAdapter,
theme: theme,
//groupable: true,
groups: [‘productname’],
sortable: true,
pageable: true,
pagerheight: 35,
pagerrenderer: function () {
var element = $(““);
var paginginfo = $(“#gridDown”).jqxGrid(‘getpaginginformation’);
for (i = 1; i <= paginginfo.pagescount; i++) {
var anchor;
if (i == 1) {
anchor = $("”
+ “” + i + “”);
}
else {
anchor = $(“”
+ “” + i + “”);
}
anchor.appendTo(element);
anchor.click(function (event) {
if ($(this).val() != ”) {
var pagenum = parseInt($(this).val());$(“#gridDown”).jqxGrid(‘gotopage’, pagenum – 1);
}
});
}return element.appendTo($(“
“));
},
touchmode: true,
pagesize: 50,
pagesizeoptions: [’50’, ’80’, ‘100’],
columns: [
{ text: ‘First Name’, dataField: ‘firstname’, minwidth: 100, classname: ‘header’, cellclassname: ‘textcell’},
{ text: ‘Last Name’, dataField: ‘lastname’, minwidth: 100, classname: ‘header’, cellclassname: ‘textcell’},
{ text: ‘Product’, dataField: ‘productname’, minwidth: 100, classname: ‘header’, cellclassname: ‘textcell’},
{ text: ‘Quantity’, dataField: ‘quantity’, width: 80, cellsalign: ‘right’, classname: ‘header’, cellclassname: ‘numbercell’ }
],
ready: function () {
$(“#gridDown”).jqxGrid(‘sortby’, ‘firstname’, ‘asc’);
}
});
});.header
{
font-weight: bold;
font-size: 14px; /*margin-top:5px;*/
}.textcell
{
}.numbercell
{
color: Red;
}Grid Up
Grid Down
Best regards,
vudh.Hi vudh,
Each Grid must be associated to an instance of jqxDataAdapter. That was the reason of the issue.
Here’s the updated code:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../jqxgrid/generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var data = generatedata(500); var source = { localdata: data, datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); $("#gridUp").jqxGrid( { width: $(window).width() - 30, height: 400, columnsmenu: false, columnsheight: 35, rowsheight: 30, source: dataAdapter, theme: theme, //groupable: true, groups: ['productname'], sortable: true, pageable: true, pagerheight: 35, pagerrenderer: function () { var element = $(""); var paginginfo = $("#gridUp").jqxGrid('getpaginginformation'); for (i = 1; i <= paginginfo.pagescount; i++) { var anchor; if (i == 1) { anchor = $("" + "" + i + ""); } else { anchor = $("" + "" + i + ""); } anchor.appendTo(element); anchor.click(function (event) { if ($(this).val() != "") { var pagenum = parseInt($(this).val()); $("#gridUp").jqxGrid('gotopage', pagenum - 1); } }); } return element.appendTo($("")); }, touchmode: true, pagesize: 50, pagesizeoptions: ['50', '80', '100'], columns: [ { text: 'First Name', dataField: 'firstname', minwidth: 100, classname: 'header', cellclassname: 'textcell' }, { text: 'Last Name', dataField: 'lastname', minwidth: 100, classname: 'header', cellclassname: 'textcell' }, { text: 'Product', dataField: 'productname', minwidth: 100, classname: 'header', cellclassname: 'textcell' } ], ready: function () { $("#gridUp").jqxGrid('sortby', 'firstname', 'asc'); } }); var dataAdapter = new $.jqx.dataAdapter(source); $("#gridDown").jqxGrid( { width: $(window).width() - 30, height: 400, columnsmenu: false, columnsheight: 35, rowsheight: 30, source: dataAdapter, theme: theme, //groupable: true, groups: ['productname'], sortable: true, pageable: true, pagerheight: 35, pagerrenderer: function () { var element = $(""); var paginginfo = $("#gridDown").jqxGrid('getpaginginformation'); for (i = 1; i <= paginginfo.pagescount; i++) { var anchor; if (i == 1) { anchor = $("" + "" + i + ""); } else { anchor = $("" + "" + i + ""); } anchor.appendTo(element); anchor.click(function (event) { if ($(this).val() != "") { var pagenum = parseInt($(this).val()); $("#gridDown").jqxGrid('gotopage', pagenum - 1); } }); } return element.appendTo($("")); }, touchmode: true, pagesize: 50, pagesizeoptions: ['50', '80', '100'], columns: [ { text: 'First Name', dataField: 'firstname', minwidth: 100, classname: 'header', cellclassname: 'textcell' }, { text: 'Last Name', dataField: 'lastname', minwidth: 100, classname: 'header', cellclassname: 'textcell' }, { text: 'Product', dataField: 'productname', minwidth: 100, classname: 'header', cellclassname: 'textcell' }, { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right', classname: 'header', cellclassname: 'numbercell' } ], ready: function () { $("#gridDown").jqxGrid('sortby', 'firstname', 'asc'); } }); }); </script></head><body class='default'> <div id="gridUp"> </div> <div id="gridDown"> </div></body></html>
In addition, you don’t have to set the ‘touchmode’ property. The Grid auto-detects the device.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for your help ! It works great now.
Best regards,
vudh -
AuthorPosts
You must be logged in to reply to this topic.