jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by crunch 12 years, 2 months ago.

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

Author

virtualmode page scrolling Posts

January 8, 2013 at 12:20 pm virtualmode page scrolling #13282

crunch

Member

I can’t seem to get scrolling right for a grid that uses virtualmode without paging. The behavior that I experience in my code is also visible in the virtual scrolling example at http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/virtualscrolling.htm?classic. Initially you will see rows 0 to 13 listed. When clicking on the scrollbar (near the bottom) to scroll one page down, you will see row id’s 16 to 29 listed. It skips rows 14 and 15. I’ve been testing a lot of options but I can’t seem to regulate the exact amount of rows it scrolls when doing a page scroll. I would like to display starting from row 14 in case a do a page down scroll. The problem is more obvious when the data load (from the adapter) has a delay. When scrolling one page down, it skips one or two (in my case) rows. Scrolling up using the scroll arrow shows it will scroll to the missing row without loading new data but then suddenly triggers the data adapter which causes the grid to start displaying one or two lines lower again. Any idea how I can get page down to jump to the exact next row?

Best regards,

Ton

January 8, 2013 at 12:36 pm virtualmode page scrolling #13284

Peter Stoev

Keymaster

Hi Ton,

Clicking the ScrollBar’s up/down area will scroll with 400px up/down depending on whether you click above or below the scroll thumb. That is why it jumps down to row 16. 400/25 = 16. 25 is the rowsheight. The “verticalscrollbarlargestep” property determines the large step value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 8, 2013 at 9:10 pm virtualmode page scrolling #13316

crunch

Member

Hi Peter,

Thanks for the information. However, after some experimenting I’ve not yet been able to solve my issue. Since the scrolling is set using a pixel measure and I want to scroll an exact amount of rows, I somehow need to convert or adjust for that. I use a rowsheight of 20 and lets suppose I have a grid height set to 200. But that includes the grid header and the border so I can’t know exactly how many rows I have, this way I can’t say 200/20 = 10 rows further on. In fact it displays 8 rows plus a small white area at the bottom. And so I don’t know what verticalscrollbarlargestep I need to set in order to scroll exactly the number of pixels to get precisely to a new page. My guess is that I am missing something and therefore trying to solve this in a too complicated way. Would it be possible for your example I mentioned above to demonstrate an page scroll so that it goes to row 14 after the first scroll down? Or do you have some other info that I might be missing?

Best regards,

Ton

January 9, 2013 at 6:04 am virtualmode page scrolling #13339

Peter Stoev

Keymaster

Hi Ton,

Here’s a sample which calculates the View’s height and sets the “verticalscrollbarlargestep” property.

<!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.8.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/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.selection.js"></script> 
     <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            // generate sample data.
            var generatedata = function (startindex, endindex) {
                var data = {};
                for (var i = startindex; i < endindex; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["id"] = i;
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
                    data[i] = row;
                }
                return data;
            }
            var source =
            {
                datatype: "array",
                localdata: {},
                totalrecords: 1000000
            };
            // load virtual data.
            var rendergridrows = function (params) {
                var data = generatedata(params.startindex, params.endindex);
                return data;
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                virtualmode: true,
                rendergridrows: rendergridrows,
                columns: [
                    { text: 'Id', datafield: 'id', width: 100 },
                    { text: 'First Name', datafield: 'firstname', width: 100 },
                    { text: 'Last Name', datafield: 'lastname', width: 100 },
                    { text: 'Product', datafield: 'productname', width: 180 },
                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            var hScrollOffset = $("#jqxgrid").jqxGrid('hScrollBar').css('visibility') == 'hidden' ? 0 : 20;         
            var pageHeight = parseInt((400 - hScrollOffset - $("#jqxgrid").jqxGrid('columnsheight')));
            $("#jqxgrid").jqxGrid({ verticalscrollbarlargestep: pageHeight });     
        });
    </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,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 10, 2013 at 9:32 pm virtualmode page scrolling #13461

crunch

Member

Works like a charm now, thanks for the help.

Ton

Author

Posts

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

You must be logged in to reply to this topic.