Resize column interacting with search grid on the page


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?

May 5,

Searching the forum the question was already there (but no reply)

May 5,

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.detachEvent("onmousemove", doResize);
el.detachEvent("onmouseup", endResize);
el.detachEvent("onlosecapture", endResize);

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 ) {
} else {
// entityviewer is the main page control pointer to both grids
ldone = true;
if (!ldone) {
ss.addRule(selector, "width:" + width + "px");
el = null;
// adjust both grids
} else {
el = null;

el.attachEvent("onmousemove", doResize);
el.attachEvent("onmouseup", endResize);
el.attachEvent("onlosecapture", endResize);

// 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?

May 5,

This topic is archived.

See also:

Back to support forum