jQWidgets Forums

jQuery UI Widgets Forums Grid Create more than one grid in a page doesn’t work fully in iPad

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

  • 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


    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


    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.


    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


    vudh
    Member

    Hi Peter,

    Thanks for your help ! It works great now.

    Best regards,
    vudh

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

You must be logged in to reply to this topic.