Changing the scrolling amount of a spark DataGrid when using the mouse wheel

Question

Basically what the title says. I checked DataGridSkin, and it has a Scroller skin part, but I can't find any attribute for the scrolling amount. I might have missed it. Can anybody please help me on this issue? Thanks.

Answer 1

I found a solution: I used the idea described above, but instead of creating a class that extends VScrollBar, I added a MouseWheelChanging event listener to the scroll bar in the Scroller skin:

<fx:Component id="verticalScrollBarFactory">
        <s:VScrollBar visible="false" mouseWheelChanging="outerDocument.vScrollBarWheelChanging(event)"/>
    </fx:Component>

internal function vScrollBarWheelChanging(event:MouseEvent):void
    { event.delta/=Math.abs(event.delta); }

You can set event.delta to the desired scroll amount.

Answer 2

I suggest the following. You can find part of scrolling logic in VScrollBar class in mouseWheelHandler method.

var nSteps:uint = Math.abs(delta);
...
for (var vStep:int = 0; vStep < nSteps; vStep++)
        {
            var vspDelta:Number = vp.getVerticalScrollPositionDelta(navigationUnit);
...

In my case delta equals 3. And grid is scrolled for 3 renderers heights. You can extend VScrollBar class. Then create custom ScrollerSkin (copy from original one) and set you vertical bar there instead of default one. Then create custom DataGrid skin (again copy from original one) and set your custom scroller skin for Scroller there.

In custom VScrollBar class override mouseWheelHandler method. Example:

package {
    import flash.events.Event;
    import flash.events.MouseEvent;

    import mx.core.IInvalidating;

    import mx.core.mx_internal;
    import mx.events.FlexMouseEvent;

    import spark.components.VScrollBar;
    import spark.core.IViewport;
    import spark.core.NavigationUnit;
    import spark.utils.MouseEventUtil;

    use namespace mx_internal;

    public class MyVScrollBar extends VScrollBar {
        public function MyVScrollBar() {

        }

        override mx_internal function mouseWheelHandler(event:MouseEvent):void {
            const vp:IViewport = viewport;
            if (event.isDefaultPrevented() || !vp || !vp.visible || !visible)
                return;

            var changingEvent:FlexMouseEvent = MouseEventUtil.createMouseWheelChangingEvent(event);
            if (!dispatchEvent(changingEvent))
            {
                event.preventDefault();
                return;
            }

            const delta:int = changingEvent.delta;
            var nSteps:uint = 1; //number of renderers scrolled!
            var navigationUnit:uint;
            var scrollPositionChanged:Boolean;
            navigationUnit = (delta < 0) ? NavigationUnit.DOWN : NavigationUnit.UP;
            for (var vStep:int = 0; vStep < nSteps; vStep++)
            {
                var vspDelta:Number = vp.getVerticalScrollPositionDelta(navigationUnit);
                if (!isNaN(vspDelta))
                {
                    vp.verticalScrollPosition += vspDelta;
                    scrollPositionChanged = true;
                    if (vp is IInvalidating)
                        IInvalidating(vp).validateNow();
                }
            }

            if (scrollPositionChanged)
                dispatchEvent(new Event(Event.CHANGE));

            event.preventDefault();
        }
    }
}

Set nSteps variable to number of renderers you want to be scrolled. So in this example grid is scrolled by only one item on wheel.