-
1. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
charlesyang Dec 23, 2009 10:20 AM (in response to bungrudi)I also had severl problems with ExtendedDataTable in various cases, forced me go back to use the basic Richfaces DataTable, which is much stable. I think ExtendedDataTable is donated by someone and has not being thoroughly tested. -
2. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
nbelaevski Dec 23, 2009 4:45 PM (in response to bungrudi)Hi,
You can start the search from these JS functions of the component: calculateWidthsFromRatios() and updateLayout().
-
3. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
bungrudi Dec 29, 2009 3:31 AM (in response to nbelaevski)Solved.
For you who has the same problem and seeking some working solution, here it goes.
Put these on the header of your page, inside <script> tag:
ExtendedDataTable.DataTable.header.prototype.OnSepMouseMove = function(event) { if(this.dragColumnInfo && this.dragColumnInfo.mouseDown) { if(!this.dragColumnInfo.dragStarted) { this.dragColumnInfo.dragStarted = true; this._showSplitter(this.dragColumnInfo.srcElement.columnIndex); } var delta = Event.pointerX(event) - this.dragColumnInfo.startX if (delta < this.minDelta) { delta = this.minDelta; } /*if (delta > this.maxDelta) { delta = this.maxDelta; }*/ var x = this.dragColumnInfo.originalX + delta; var finalX = x - this.minColumnWidth - 6 //6 stands for sep span width; this.columnSplitter.moveToX(finalX); Event.stop(event); } } ExtendedDataTable.DataTable.header.prototype.OnSepMouseUp = function(event) { Event.stop(event); Event.stopObserving(document, 'mousemove', this.eventSepMouseMove); Event.stopObserving(document, 'mouseup', this.eventSepMouseUp); if(this.dragColumnInfo && this.dragColumnInfo.dragStarted) { this.dragColumnInfo.dragStarted = false; this.dragColumnInfo.mouseDown = false; var delta = Event.pointerX(event) - this.dragColumnInfo.startX; if (delta < this.minDelta) { delta = this.minDelta; } /*if (delta > this.maxDelta) { delta = this.maxDelta; }*/ var columnIndex = this.dragColumnInfo.srcElement.columnIndex; var newWidth = this.getColumnWidth(columnIndex) + delta; this.extDt.setColumnWidth(columnIndex, newWidth); this.setColumnWidth(columnIndex,newWidth); this.extDt.updateLayout(); if (this.extDt.onColumnResize){ //set properly value to this.columnWidths this.extDt.columnWidths = ""; for (i=0; i<this.columnsNumber; i++){ this.extDt.columnWidths += "" + this.getColumnWidth(i) + ";"; }//for this.extDt.onColumnResize(event, this.extDt.columnWidths); } } this._hideSplitter(); }
Notice that I comment out the lines that check for 'maxDelta'. This checking for maxDelta that prevents the column to be resized wider.
For you who want to change directly in the source code and recompile, you can find this in ExtendedDataTableHeader.js.
I hope this help.
-
4. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
jbalunas Jan 6, 2010 8:42 AM (in response to bungrudi)Thanks for sharing this workaround!!
This should become a wiki article I think.
-
5. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
bungrudi Jan 7, 2010 7:59 PM (in response to jbalunas)Hi Jay,
I'll write the article on the weekend.
-
6. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
fdegrigny Jan 15, 2010 11:54 AM (in response to bungrudi)I have followed this tips because I need an horizontal bar with a data table associated with a pager.
I hav managed to display the horizontal scroll but i still cannot replace the JS functions to enable full column resize functionnality.
I have put the JS functions into the HTML header but it seems that they are never called.
How I can to do this ?
-
7. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
bungrudi Jan 16, 2010 9:52 PM (in response to fdegrigny)Hi Frantz,
What version of Richfaces are you using?The tips was tested with 3.3.2.
If you want, you can paste your (x)html code in pastebin.com so I can check it.
I promised to write a wiki article. But currently I am really busy , barely have time to breath, let alone writing an article.
-
8. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
fdegrigny Jan 18, 2010 3:06 AM (in response to bungrudi)I am using the 3.3.2 version too. (with IE 7 browser)
Here is my source page : http://pastebin.com/m577750cf
-
9. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
cobaasta Feb 10, 2010 4:58 AM (in response to bungrudi)For those who don't want do change the source,
here is how i changed the OnSepMouseDown() Method with the help of addMethods() during 'runtime' (onload="setMaxDelta")
function setMaxDelta() {
try {
// Overwrite the function window.ExtendedDataTable.DataTable.header.OnSepMouseDown()
window.ExtendedDataTable.DataTable.header.addMethods({
OnSepMouseDown : function(event) {
Event.stop(event);
this.dragColumnInfo = {
srcElement: Event.element(event),
dragStarted: false,
mouseDown: true,
startX: Event.pointerX(event),
originalX: 0
};
var srcElement = this.dragColumnInfo.srcElement;
this.maxDelta = 99999;
if (ClientUILib.isOpera) {
this.maxDelta -= 1;
};
this.minDelta = this.minColumnWidth - this.getColumnWidth(srcElement.columnIndex);
Event.observe(document, 'mousemove', this.eventSepMouseMove, true);
Event.observe(document, 'mouseup', this.eventSepMouseUp, true);
}
});
// Add the events listeners to the instance
var header = document.getElementById('yourFormId:yourTableId').component.header;
header.eventSepMouseDown = header.OnSepMouseDown.bindAsEventListener(header);
header.addListeners();
} catch (e) { }
}A note to the solution for the horizontal scrollbar:
overflow-x:auto instead of overflow-x:scroll shows the scrollbar only if needed.
You can apply the same style to extdt-outerdiv instead of extdt-innerdiv too.A problem with the horizontal scrollbar solution in IE:
Although the scrollbar works fine, i got a JavaScript error (DnD is undefined) on resize of the window!
I got this error as soon as a part of the table is cropped, and it doesn't matter if i style the extdt-innerdiv or the extdt-outerdiv with scroll or auto.
IE 7, RichFaces 3.3.2.SR1
problem with the horizontal scrollbar solution in IE
-
10. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
cobaasta Feb 10, 2010 8:22 AM (in response to bungrudi)And how can i disable the column resize on window resize?
I mean the addaption of the extendedDataTable to the available space.
I want the columns to be as wide as they are (their size in px or 100px default), and nothing else... -
11. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
lucas.marti Jul 27, 2010 5:11 AM (in response to bungrudi)Hy all,
first I'd like to thank you for posting this solution! It works fine. But there is still one problem left:
when resizing the window the scrollbar disappears and the table gets resized. Once I reload the page, the scrollbar appears again.
I suppose that I have to register a function to the onResize event.
Does anyone have an idea?
thanks
Lucas
-
12. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
rafaeluchoanaskar Mar 21, 2012 1:45 PM (in response to bungrudi)For legacy systems that need that feature, there is a javascript that copies the THEAD to other DIV and adds the scroll-x and scroll-y css styles.
-
13. Re: ExtendedDataTable: resizing column when horizontal scrollbar is shown
vpenugo Sep 8, 2015 10:19 AM (in response to bungrudi)If we want to work same thing in RF 4.x, Is there any modification required for this. actually I am getting 'ExtendedDataTable is undefined' javascript error.