jQWidgets Forums

Tagged: event, grid, jqxgrid, scroll, scrolling

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

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

scroll event? Posts

September 2, 2013 at 8:48 am scroll event? #28142

Participant

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

September 2, 2013 at 9:24 am 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/

September 2, 2013 at 10:57 am 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

September 3, 2013 at 5:06 am 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/

November 30, 2013 at 5:25 am 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

December 2, 2013 at 7:46 am 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/

December 15, 2015 at 9:30 am 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.

December 15, 2015 at 10:16 am 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/

December 15, 2015 at 10:39 am 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.

December 15, 2015 at 10:54 am 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/

December 15, 2015 at 11:14 am 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.

December 15, 2015 at 11:29 am 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/

September 28, 2016 at 11:48 am scroll event? #87765

Llorx

Participant

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

September 28, 2016 at 2:58 pm 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!");
});

April 7, 2017 at 10:17 am 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();

Author

Posts

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

You must be logged in to reply to this topic.