jQWidgets Forums

Tagged: autoheight, grid, height, horizontal, jqxgrid, scroll

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

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

Author

horizontal scroll with autoheight set to true Posts

December 11, 2013 at 7:58 pm horizontal scroll with autoheight set to true #46360

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?

December 12, 2013 at 5:55 am horizontal scroll with autoheight set to true #46377

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/

December 16, 2013 at 7:46 pm horizontal scroll with autoheight set to true #46619

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

December 16, 2013 at 8:02 pm horizontal scroll with autoheight set to true #46621

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.

December 16, 2013 at 8:18 pm horizontal scroll with autoheight set to true #46622

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.

December 16, 2013 at 8:18 pm horizontal scroll with autoheight set to true #46623

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/

December 16, 2013 at 8:55 pm horizontal scroll with autoheight set to true #46627

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

December 18, 2013 at 3:10 am horizontal scroll with autoheight set to true #46667

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.

September 26, 2014 at 4:12 am horizontal scroll with autoheight set to true #60092

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.

Author

Posts

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

You must be logged in to reply to this topic.