jQuery UI Widgets Forums Grid scroll event?

This topic contains 17 replies, has 7 voices, and was last updated by  vishalsoni 6 years, 11 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
  • scroll event? #28142

    Peter Sloth
    Participant

    Hi

    I need to be able to implement some logic in response to when the user scrolls in the grid (either using the mouse or the scrollbar).
    Are there any plans to implement a scroll event?

    thanks

    best regards
    Peter Sloth

    scroll event? #28145

    Dimitar
    Participant

    Hello Peter Sloth,

    While there is no scroll event, the scrolling method may be useful to you. Here is more information about it from the API Documentation:

    Returns an object with two boolean fields – “vertical” and “horizontal”. If the user scrolls with the vertical scrollbar, “vertical” field’s value is true. If the user scrolls with the horizontal scrollbar, the “horizontal” field’s value is true.

    Code example

    Invoke the scrolloffset method.

    var scrolling = $(‘#jqxGrid’).jqxGrid(‘scrolling’);

    Best Regards,
    Dimitar

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

    scroll event? #28152

    Peter Sloth
    Participant

    Hi Dimitar

    thanks for the reply, but I’m afraid that I cannot use the scrolling method, since I still need to know when (i.e. an event) the user scrolls the grid.

    thanks

    //Peter

    scroll event? #28187

    Dimitar
    Participant

    Hi Peter,

    Here is an idea on how to use the scrolling method together with jQuery’s mousemove event to determine when the user scrolls the grid vertically using the scrollbar thumb:

    <!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/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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    // 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"
    ];
    for (var i = 0; i < 200; 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["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;
    }
    var source =
    {
    localdata: data,
    datatype: "array",
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'total', type: 'number' }
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    theme: theme,
    columnsresize: true,
    columns: [
    { text: 'Name', dataField: 'firstname', width: 100 },
    { text: 'Last Name', dataField: 'lastname', width: 100 },
    { text: 'Product', editable: false, 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', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
    ],
    ready: function () {
    $("body").mousemove(function () {
    var scrolling = $("#jqxgrid").jqxGrid("scrolling");
    if (scrolling.vertical == true) {
    $("#log").append("scrolling <br />");
    };
    });
    }
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid">
    </div>
    </div>
    <div id="log">
    </div>
    </body>
    </html>

    For the scrollbar arrows and the mouse wheel you would have to implement other bindings.

    Best Regards,
    Dimitar

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

    scroll event? #45653

    Greytrix
    Participant

    Hi Dimitar,

    I have tried above solution and its worked fine but when i use “mousewheel” or “DOMMouseScroll”, i am getting scrolling.vertical = false. Can you please let me know how can i trap this event?

    Regards
    Abdul

    scroll event? #45787

    Dimitar
    Participant

    Hello Abdul,

    Thank you for your feedback. Unfortunately, this is all we can offer on the matter at the moment.

    Best Regards,
    Dimitar

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

    scroll event? #79312

    Sibeesh Venu
    Participant

    Hi Dimitar,
    I tried the code you have posted. In my case in mousemove itself it is showing false for both vertical and horizontal options. Can you please any other options we have. I tried the below code in the ready event.

    $("body").mousemove(function () {
                    var scrolling = $("#jqxgrid").jqxGrid("scrolling");
                    if (scrolling.vertical == true) {
                        $("#log").append("scrolling <br />");
                    };
                });

    Thanks in advance.

    scroll event? #79315

    Dimitar
    Participant

    Hi Sibeesh Venu,

    I tested our example again (with version 3.9.1) and “scrolling” is correctly logged when the grid is scrolled by dragging the vertical slider thumb. Unfortunately, we cannot provide you with a solution for any other scrolling scenarios.

    Best Regards,
    Dimitar

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

    scroll event? #79316

    Sibeesh Venu
    Participant

    Hi Dimitar,
    It is scrolling. Actually I am getting the object as scrolling = Object {vertical: false, horizontal: false}. The horizontal value is suppose to be true when we scroll horizontally and vice versa. Can you please check that? In the above example, it shows false always.

    scroll event? #79317

    Dimitar
    Participant

    Hi Sibeesh Venu,

    We tested the example in Chrome, Firefox and Internet Explorer 11 and it is working as intended. Here is an online version of it you can test directly: https://www.jseditor.io/?key=scroll-event.

    Best Regards,
    Dimitar

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

    scroll event? #79318

    Sibeesh Venu
    Participant

    Hi Dimitar,
    I does not seems to be working there too. Please try adding the object values to the console and check.
    console.log(scrolling.horizontal); It always return false.

    scroll event? #79319

    Dimitar
    Participant

    Hi Sibeesh Venu,

    The example does not have its horizontal scrollbar shown, that is why scrolling.horizontal is false. Please check the following one which has both scrollbars: https://www.jseditor.io/?key=scroll-event-2.

    Best Regards,
    Dimitar

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

    scroll event? #87765

    Llorx
    Participant

    Seriously we have to do such bad performing hacks to detect a common event?

    scroll event? #87774

    Llorx
    Participant

    Created another small hack, accessing internal scrollbar, that will perform better than mousemove or setInterval:

    var scbar = $("#grid").jqxGrid("hScrollBar"); // Horizontal scrollbar. Verical one is vScrollBar
    scbar.jqxScrollBar("_triggervaluechanged", true);
    scbar.on("valueChanged", function() {
        console.log("yay!");
    });
    scroll event? #92777

    Llorx
    Participant

    Note that this event will be removed on each render because of the internal _removeHandlers method, so you will need to attach it again on each “rendered” callback:

    $("#grid").jqxGrid({rendered: attach});
    
    var scbar = $("#grid").jqxGrid("hScrollBar"); // Horizontal scrollbar. Verical one is vScrollBar
    scbar.jqxScrollBar("_triggervaluechanged", true);
    
    function attach() {
        scbar.off("valueChanged").on("valueChanged", function() {
            console.log("yay!");
        });
    }
    attach();
Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.