jqgrid top header not moving with left scroll , when used mCustomScrol(v3.1.5)

Question

I am trying to use mCustomScrollbar on jqgrid( 4.9.2). The design of the scrollbar is getting changed but when scrolling horizontally the top headers does not move as they do normally. The example I am trying to work on is of collapsable grid. and for the mCustomScroll

$(".ui-jqgrid-bdiv").mCustomScrollbar({
    axis:"yx",
});

Is it not possible at all to use any custom scroll bar on jqgrid ?

You should never use retro versions of any products. [Free jqGrid](https://github.com/free-jqgrid/jqGrid) 4.9.2 is two years old. I posted 14 more recent versions after 4.9.2. Please use the lased released 4.14.1 or the latest code from GitHub (preliminary code of 4.15.0). Moreover, one can help you only if one will be able to *reproduce* the problem, which you report. Thus it's strictly recommended to include the demo (in jsfiddle for example), which reproduces the problem. You can get a demo from [the page](https://free-jqgrid.github.io/getting-started/index.html) as the base and modify it. — Oleg, Aug 01 '17 at 09:29

score 0 · Answer 1 · answered Aug 01 '17 at 12:27

I had made some customized changes to jqgr so migrating to the other version will be a tough task, so Instead, I made the changes in the mcustomscrollbar and posting the answer so if any one else come across the same problem it will be beneficial. so there is a methods _tweetTo, which is called for the container on which the scrollbar is assigned by the initializing as

$(".ui-jqgrid-bdiv").mCustomScrollbar({
    axis:"yx",
});

now just after the method call _tweenTo(line# 2131 for V:3.1.5) insert the following code

if ($(".ui-jqgrid-hdiv").length > 0) {

                    $(".ui-jqgrid-view").css("overflow", "hidden");
                    $(".ui-jqgrid-hdiv").css("width", $("#grid1").width() + "px"); // grid1 is the id of your gridcontainer/table
                    _tweenTo($(".ui-jqgrid-hdiv")[0], property, Math.round(scrollTo[0]), dur[0], options.scrollEasing, options.overwrite, {
                        onStart: function () {
                            if (options.callbacks && options.onStart && !d.tweenRunning) {
                                /* callbacks: onScrollStart */
                                if (_cb("onScrollStart")) { _mcs(); o.callbacks.onScrollStart.call(el[0]); }
                                d.tweenRunning = true;
                                _onDragClasses(mCSB_dragger);
                                d.cbOffsets = _cbOffsets();
                            }
                        }, onUpdate: function () {
                            if (options.callbacks && options.onUpdate) {
                                /* callbacks: whileScrolling */
                                if (_cb("whileScrolling")) { _mcs(); o.callbacks.whileScrolling.call(el[0]); }
                            }
                        }, onComplete: function () {
                            if (options.callbacks && options.onComplete) {
                                if (o.axis === "yx") { clearTimeout(mCSB_container[0].onCompleteTimeout); }
                                var t = mCSB_container[0].idleTimer || 0;
                                mCSB_container[0].onCompleteTimeout = setTimeout(function () {
                                    /* callbacks: onScroll, onTotalScroll, onTotalScrollBack */
                                    if (_cb("onScroll")) { _mcs(); o.callbacks.onScroll.call(el[0]); }
                                    if (_cb("onTotalScroll") && scrollTo[1] >= limit[1] - totalScrollOffset && d.cbOffsets[0]) { _mcs(); o.callbacks.onTotalScroll.call(el[0]); }
                                    if (_cb("onTotalScrollBack") && scrollTo[1] <= totalScrollBackOffset && d.cbOffsets[1]) { _mcs(); o.callbacks.onTotalScrollBack.call(el[0]); }
                                    d.tweenRunning = false;
                                    mCSB_container[0].idleTimer = 0;
                                    _onDragClasses(mCSB_dragger, "hide");
                                }, t);
                            }
                        }
                    });
                }

and in the method definition of _tweenTo there is another method _tween update that method as

 function _tween() {
                    // added condition so the top headers remains fixed
                    if (el.classList.contains("ui-jqgrid-hdiv") && prop == "top") {
                        return;
                    }
                    //ends here 
                    if (duration > 0) {
                        tobj.currVal = _ease(tobj.time, from, diff, duration, easing);
                        elStyle[prop] = Math.round(tobj.currVal) + "px";
                    } else {
                        elStyle[prop] = to + "px";
                    }
                    onUpdate.call();
                }

and the scrollbar is up and running.. !!

jqgrid top header not moving with left scroll , when used mCustomScrol(v3.1.5)

1 Answers1