Resize column interacting with search grid on the page
Hi,
I use a grid and made an extra grid to enter the search fields just below. When I resize the grid the columns of the search grid must resize to.
How could i program this nicely? Must I change the resize routine directly (startColumnResize endResize) or should I pass the event to the second grid?
John
May 5,
Hi,
Found the code myself:
In the style section I have:
#entityviewer .active-column-0 {width: 80px;}
#entityviewer .active-column-1 {width: 200px;}
#entityviewer .active-column-2 {width: 80px;}
#entityviewer .active-column-3 {width: 80px;}
#entityviewer .active-column-4 {width: 80px;}
/* actions of the grid search/filter/add */
#entitygridaction .active-grid-column {border-right: 1px solid threedlightshadow;}
#entitygridaction .active-grid-row {height: 25px; border-bottom: 1px solid threedlightshadow;}
#entitygridaction .active-scroll-left .active-list-item {height: 25px}
#entitygridaction .active-grid-row-actions {background-color: threedlightshadow;}
#entitygridaction .active-column-0 {width: 80px;}
#entitygridaction .active-column-1 {width: 200px;}
#entitygridaction .active-column-2 {width: 80px;}
#entitygridaction .active-column-3 {width: 80px;}
#entitygridaction .active-column-4 {width: 80px;}
#entitygridaction .active-templates-header .active-box-normal {background-color: #F0C080;}
#entitygridaction .active-templates-header .active-box-item {background-color: #F0C080;}
#entitygridaction .active-templates-header .active-box-sort {background-color: #F0C080;}
// customise resize takes care of resize both grids
// this = the enitityviewer object which has pointer to both grids
this.grid.setAction("startColumnResize", resizebothgrids );
// update the standard Alex routine little bit ugly but I dont know how it can be done otherwise
var resizebothgrids = function(header){
var el = header.element();
var pos = event.clientX;
var size = el.offsetWidth;
var grid = this;
var doResize = function(){
var el = header.element();
var sz = size + event.clientX - pos;
el.style.width = sz < 5 ? 5 : sz;
el = null;
};
var endResize = function(){
var el = header.element();
if( typeof el.onmouseleave == "function") {
el.onmouseleave();
}
el.detachEvent("onmousemove", doResize);
el.detachEvent("onmouseup", endResize);
el.detachEvent("onlosecapture", endResize);
el.releaseCapture();
var width = size + event.clientX - pos;
if (width < 5) {width = 5}
el.style.width = width;
var ss = document.styleSheets[document.styleSheets.length-1];
var i, selector = " .active-column-" + header.getItemProperty("index");
var nlenrules = ss.rules.length;
var ldone = false;
// here we update the styles of multiple grids
for(i=0; i<nlenrules;i++){
if (ss.rules[i].selectorText.indexOf (selector) != -1){
ss.rules[i].style.width = width;
el = null;
if (selector.indexOf ("#" + grid.getId()) != -1 ) {
grid.getTemplate("layout").action("adjustSize");
} else {
// entityviewer is the main page control pointer to both grids
grid.entityviewer.entitygridactions.getTemplate("layout").action("adjustSize");
}
ldone = true;
}
}
if (!ldone) {
ss.addRule(selector, "width:" + width + "px");
el = null;
// adjust both grids
grid.getTemplate("layout").action("adjustSize");
grid.entityviewer.entitygridactions.getTemplate("layout").action("adjustSize");
} else {
el = null;
return;
}
};
el.attachEvent("onmousemove", doResize);
el.attachEvent("onmouseup", endResize);
el.attachEvent("onlosecapture", endResize);
el.setCapture();
// break object reference to avoid memory leak
el = null;
event.cancelBubble = true;
};
Hope more people enjoy!
Alex keep up the good work! Any chance of Opera 8 support in next release?
John
May 5,