Attach a div to Dojo DataGrid horizontal scroll

Question

I have a fixed width datagrid being built programatically, and am trying to put a header over top of it that will scroll with it. I can't do it as part of the grid as that destroys the fixed width of the cells.

I would like to be able to scroll the top div as the scrollbar for the DataGrid scrolls. This seems how the header works already, so it should be possible. I just can't figure out how to link/attach it.

Answer 1

Ok, I figured it out... if anyone is interested. You need to extend _View to include what you want to update. The hardest part about this is getting the div structure laid out so it works in IE and FF, just really duplicated what was there for the datagrid header that was already being scrolled. Here is the declare:

dojo.declare("custom.View", dojox.grid._View, {
    doscroll: function(inEvent) {
        this.inherited(arguments);
        var customHeader = dojo.byId('customGridHeader');
        if (customHeader) {
            customHeader.scrollLeft = this.scrollboxNode.scrollLeft;
        }
    },

    update: function(){
        this.inherited(arguments);
        var customHeader = dojo.byId('customGridHeader');
        if (customHeader) {
            customHeader.scrollLeft = this.scrollboxNode.scrollLeft;
        }
    }
});

Answer 2

Hi,

I am facing this weired issue with dojo data grid in horizontal scroll bar , where the scroll bar will go back to its initial position when we click on the vertical scroll bar, also the horizontal scroll bar will not move at all once it reaches extream right on the window and can not be dragged back.

please help, if u have any suggestions. This happens only in mozilla and chrome and it works fine with internet explorer,

thanks in advance..