I want to only have a vertical scrollbar on my grid, i managed to hide the bottom scrollbar by changing the style.
.tundra .dojoxGrid-scrollbox {
background-color:#FEFEFE;
overflow:hidden;
overflow-y:scroll;
position:relative;
width:100%;
}
background-color:#FEFEFE;
overflow:hidden;
overflow-y:scroll;
position:relative;
width:100%;
}
but space is still reserved for the scrollbar. Is this the right way to do it?
regards,
rob
yes that should hide it, but
yes that should hide it, but i think the grid has [several] functions to check the inner width vs the viewport size and determine if it "should" have a scrollbar (because the scrollbar isn't actually the scrollbar for the data, it's just "there", in the scrollbox), so it allots the extra 16px ... you might try hacking in a return false somewhere on a hasScrollBars() call.
hope this helps.
Managed to remove the space
it not so good but i just resized it but traversing the created DOM nodes. the defaultUpdate and render functions were overridden to call correctHeight() (via resizeGrid()). For some reason Grid.update() isn't called from the framework when updating. Probably ideally should have used the widget override markup stuff though.
recallingUpdate:false,
headerDiv:"",
resizeGrid:function (){
if (this.recallingUpdate) {return}
this.resizeGridColumns();
this.correctHeight();
$(this.headerDiv).style.width=this.views.views[0].getWidth();
},
resizeGridColumns: function (){
var grid = this;
var view = this.views.views[0];
var viewWidth = view.getWidth();
grid.domNode.style.width = viewWidth;
var tableWidth=290;//parseInt($(this.headerDiv).parentNode.clientWidth);
var titleWidth=parseInt(grid.getCell(1).unitWidth);
if (titleWidth>tableWidth-80) {
titleWidth=tableWidth-80;
grid.views.views[0].setColWidth( 1, titleWidth);
}
var otherColsWidth=parseInt((tableWidth-titleWidth)/2);
view.setColWidth( 2, otherColsWidth);
view.setColWidth( 3, otherColsWidth);
grid.views.views[0].updateStructure();
this.recallingUpdate=true;
grid.update();
this.recallingUpdate=false;
},
correctHeight: function () {
// This is needed to update the height to remove the scrollbar space.
// The scroll bar is hidden in the style. the div is 2 x 19px smaller for ome reason though.
var scrollNode=this.domNode.childNodes[1].childNodes[0];
var theHeight = parseInt( scrollNode.style.height);
var ctnrHeight = parseInt(document.getElementById(this.id).clientHeight);
if (theHeight==(ctnrHeight-19)) {
scrollNode.style.height = ( theHeight -19)+ "px";
}
},
defaultUpdate:function() {
this.inherited(arguments);
this.resizeGrid();
},
render:function() {
this.inherited(arguments);
this.resizeGrid();
}
});
<div class="header" style="width:100%;height:20px" id="itemHeader">
<span style="padding:2px">Items</span>
<img src="grid/refresh.gif" style="width:20px;height:17px"/>
</div>
<div id="itemGrid" dojoType="custom.Grid" model="itemModel" structure="itemLayout" elasticView="1" class="capita" headerDiv="itemHeader" onRowClick="itemCellClick"></div>
</div>
did u try
did u try noscroll?
{
noscroll: true,
cells:
[
[
{name: 'Column 2'},
{name: 'Column 3', width: "150px"},
{name: 'Column 4'},
]
]
};
But it removes both the scroll bars anyways... :(
Regards,
Yazad Khambata