jQWidgets Forums

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.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Create more than one grid in a page doesn’t work fully in iPad Posts

June 25, 2012 at 3:25 am Create more than one grid in a page doesn’t work fully in iPad #5277

vudh

Member

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,
vudh

June 25, 2012 at 5:02 am Create more than one grid in a page doesn’t work fully in iPad #5288

Peter Stoev

Keymaster

Hi 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 Stoev

jQWidgets Team
http://www.jqwidgets.com

June 25, 2012 at 6:54 am Create more than one grid in a page doesn’t work fully in iPad #5297

vudh

Member

Hi 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.

June 25, 2012 at 2:11 pm Create more than one grid in a page doesn’t work fully in iPad #5309

Peter Stoev

Keymaster

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 Stoev

jQWidgets Team
http://www.jqwidgets.com

June 26, 2012 at 1:20 am Create more than one grid in a page doesn’t work fully in iPad #5321

vudh

Member

Hi Peter,

Thanks for your help ! It works great now.

Best regards,
vudh

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.