jQuery UI Widgets Forums Grid horizontal scroll with autoheight set to true

This topic contains 8 replies, has 4 voices, and was last updated by  Bazman 9 years, 8 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author

  • ballmw
    Participant

    We have a jqxgrid that we’ve set autoheight to true.

    It needs to scroll horizontally but it is not responding the same way when autoheight = true vs. height = 500px;

    For example I cannot click with the mouse and drag back and forth with autoheight = true.

    Is this an issue or a configuration thing I may have missed?


    Dimitar
    Participant

    Hello ballmw,

    We tested for the reported issue but it does not occur on our side. Please make sure you are using the latest version of jQWidgets (3.0.4). Here are two examples, based on the demo Default Functionality, one with auto height and one with fixed height (500 px). Do you experience any issues with them?

    <!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.10.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/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var url = "../sampledata/products.xml";
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ProductName', type: 'string' },
                        { name: 'QuantityPerUnit', type: 'int' },
                        { name: 'UnitPrice', type: 'float' },
                        { name: 'UnitsInStock', type: 'float' },
                        { name: 'Discontinued', type: 'bool' }
                    ],
                    root: "Products",
                    record: "Product",
                    id: 'ProductID',
                    url: url
                };
                var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                    if (value < 20) {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                    }
                    else {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                    }
                }
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 470,
                    source: dataAdapter,
                    theme: theme,
                    pageable: true,
                    autoheight: true,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                      { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                      { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                      { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                      { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                    ],
                    columngroups: [
                        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>
    <!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.10.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/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var url = "../sampledata/products.xml";
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ProductName', type: 'string' },
                        { name: 'QuantityPerUnit', type: 'int' },
                        { name: 'UnitPrice', type: 'float' },
                        { name: 'UnitsInStock', type: 'float' },
                        { name: 'Discontinued', type: 'bool' }
                    ],
                    root: "Products",
                    record: "Product",
                    id: 'ProductID',
                    url: url
                };
                var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                    if (value < 20) {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                    }
                    else {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                    }
                }
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 470,
                    height: "500px",
                    source: dataAdapter,
                    theme: theme,
                    pageable: true,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                      { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                      { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                      { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                      { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                    ],
                    columngroups: [
                        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    ballmw
    Participant

    The link the the Default Functionality does not have horizontally scrolling data.

    We want to be able to have a table that is the full height of all the rows and does not have vertical scrolling.

    We want the table to be of fixed width so that it requires horizontal scrolling using the touch gesture.

    We want this to work on an iPad or tablet.

    If we enable autoheight then we cannot scroll left to right.

    If we set a fixed width height then when we try to scroll the page down by touching the grid, it does allow horizontal scroll but will not scroll vertically.

    Thanks,

    Mike


    ballmw
    Participant

    I forgot to mention that we are not using pageable. We show all our results (usually a couple dozen). That’s why we don’t need vertical scroll.

    But we have several dozen columns which requires horizontal scroll.


    ballmw
    Participant

    Here is an example. I open http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/paging.htm on my ipad.

    I cannot use my finger to scroll horizontally, I have to grab the scrollbar. But the vertical scrolling is correct, it will let me scroll the entire viewport.

    This is dissimilar to the example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/sorting.htm where I can use my finger to scroll horizontally.


    Peter Stoev
    Keymaster

    Hi Mike,

    I would like to make an update here, too. If you enable autoheight, and want to have a fixed width, then you will be able to scroll horizontally only using the Grid’s Horizontal Scrollbar. Another approach is to make the Grid’s Width to be equal to the sum of the column widths and put the Grid in a container DIV tag with overflow: auto, fixed width and fixed height. By doing that, you will use the browser’s native scrolling of the container DIV tag instead of the Grid’s built-in. A problem here could be the fact that when “autoheight” set to true, the Grid will have to create UI Elements for all Data Rows and that may affect the performance of your app, in case you have to display many rows.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    ballmw
    Participant

    OK, this is unfortunate because we were taking advantage of the column pinning.

    The alternative is that we set the height of the table to the total height of all the rows which is easily done.

    Unfortunately when we do that the table is scrollable horizontally, but when we try to drag the grid upward or downward it doesn’t allow viewport scrolling.

    Is there a way to disable vertical scrolling so those events may be disregarded?

    – MB


    ballmw
    Participant

    Update here, I was able to get a workaround functioning using autoheight.

    I implemented touchstart, touchmove and touchend methods to track the position and call the scrolloffset method.

    This works fine and I can scroll both horizontally and vertically.


    Bazman
    Participant

    Hi ballmw,

    I know this is nearly a year old but I’m coming across the exact same problem you had. Are you able to provide any more details on how you got it to work?

    Going to try and play around with it myself now, but any insights you have you be appreciated 🙂

    Thanks,
    Kelly.

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

You must be logged in to reply to this topic.