Header Button *Sticks*

[infringer]

The drop down menu icon on the header column, sticks when you mouse
out. You'll notice it stays at whatever the last column you were on.

I was able to fix this by inserting the following code in the
_applyHeaderButtons function. I inserted this just after the
'mousemove' event observer.

Event.observe(element, 'mouseout', function () {
headerButton.setStyle({visibility: 'hidden'});
});

HTH,
-David

[Pablo Aravena]

I tried this code, but it didn't work, where exactly did you put this code?

Thanks

Pablo

--
You received this message because you are subscribed to the Google Groups "MyTableGrid" group.
To post to this group, send email to mytab...@googlegroups.com.
To unsubscribe from this group, send email to mytablegrid...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mytablegrid?hl=en.

[infringer]

Here is the applyHeaderButtons function... I added it just after the
Event.observe(element, 'mousemove', function() { closing bracket and
parenthesis.


_applyHeaderButtons : function() {
var self = this;
var id = this._mtgId;
var headerHeight = this.headerHeight;
var headerButton = $('mtgHB' + this._mtgId);
var headerButtonMenu = $('mtgHBM' + this._mtgId);
var sortAscMenuItem = $('mtgSortAsc'+this._mtgId);
var sortDescMenuItem = $('mtgSortDesc'+this._mtgId);
var topPos = 0;
if (this.options.title) topPos += this.titleHeight;
if (this.options.toolbar) topPos += this.toolbarHeight;
var selectedHCIndex = -1;
$$('.mtgIHC' + id).each(function(element, index) {
var editor = null;
var sortable = true;
var hbHeight = null;
Event.observe(element, 'mousemove', function() {
var cm = self.columnModel;
if (!element.id) return;
selectedHCIndex =
parseInt(element.id.substring(element.id.indexOf('_') + 1,
element.id.length));
editor = cm[selectedHCIndex].editor;
sortable = cm[selectedHCIndex].sortable;
hbHeight = cm[selectedHCIndex].height;
if (sortable || editor == 'checkbox' || editor
instanceof MyTableGrid.CellCheckbox) {
var hc = element.up();
var leftPos = hc.offsetLeft + hc.offsetWidth;
leftPos = leftPos - 16 - self.scrollLeft;
if (leftPos < self.bodyDiv.clientWidth) {
headerButton.setStyle({
top: (topPos + 3 + headerHeight -
hbHeight) + 'px',
left: leftPos + 'px',
height: hbHeight + 'px',
visibility: 'visible'
});
}


sortAscMenuItem.onclick = function() {
self._sortData(selectedHCIndex, 'ASC');
};

sortDescMenuItem.onclick = function() {
self._sortData(selectedHCIndex, 'DESC');
};
}
});

Event.observe(element, 'mouseout', function () {
headerButton.setStyle({visibility: 'hidden'});
});

// Sorting when click on header column
Event.observe(element, 'click', function() {
if (!element.id) return;
selectedHCIndex =
parseInt(element.id.substring(element.id.indexOf('_') + 1,
element.id.length));
self._toggleSortData(selectedHCIndex);
});
});

Event.observe(headerButton, 'click', function() {
var cm = self.columnModel;
if (headerButtonMenu.getStyle('visibility') == 'hidden') {
if (cm[selectedHCIndex].sortable) {
$('mtgSortDesc'+self._mtgId).show();
$('mtgSortAsc'+self._mtgId).show();
} else {
$('mtgSortDesc'+self._mtgId).hide();
$('mtgSortAsc'+self._mtgId).hide();
}

var selectAllItem = $$('#mtgHBM' + id +
' .mtgSelectAll')[0];
if (cm[selectedHCIndex].editor == 'checkbox' ||
cm[selectedHCIndex].editor instanceof MyTableGrid.CellCheckbox) {
selectAllItem.down('input').checked =
cm[selectedHCIndex].selectAllFlg;
selectAllItem.show();
selectAllItem.onclick = function() { // onclick
handler
var flag = cm[selectedHCIndex].selectAllFlg = $
('mtgSelectAll' + id).checked;
var selectableFlg = false;
if (cm[selectedHCIndex].editor instanceof
MyTableGrid.CellCheckbox
&&
cm[selectedHCIndex].editor.selectable) selectableFlg = true;

var renderedRows = self.renderedRows;
var beginAtRow = 0;
if (self.newRowsAdded.length > 0) beginAtRow =
-self.newRowsAdded.length;
var x = selectedHCIndex;
for (var y = beginAtRow; y < renderedRows; y+
+) {
var element = $('mtgInput' + id + '_' + x
+','+y);
var value = element.checked = flag;
if (!selectableFlg) {
if
(cm[x].editor.hasOwnProperty('getValueOf')) value =
cm[x].editor.getValueOf(element.checked);
self.setValueAt(value, x, y, false);
// if doesn't exist in the array the
row is registered
if (y >= 0 &&
self.modifiedRows.indexOf(y) == -1) self.modifiedRows.push(y);
}
}

if (cm[selectedHCIndex].editor instanceof
MyTableGrid.CellCheckbox
&&
cm[selectedHCIndex].editor.onClickCallback)
cm[selectedHCIndex].editor.onClickCallback();
};
} else {
selectAllItem.hide();
}

var leftPos = parseInt(headerButton.getStyle('left'));
var topPos = self.headerHeight + 2;
if (self.options.title) topPos += self.titleHeight;
if (self.options.toolbar) topPos +=
self.toolbarHeight;
headerButtonMenu.setStyle({
top: topPos + 'px',
left: leftPos + 'px',
visibility: 'visible'
});
} else {
headerButtonMenu.setStyle({visibility: 'hidden'});
}
});

var miFlg = false;
Event.observe(headerButtonMenu,'mousemove', function() {
miFlg = true;
});

Event.observe(headerButtonMenu,'mouseout', function(event) {
miFlg = false;
var element = event.element();
setTimeout(function() {
if (!element.descendantOf(headerButtonMenu) && !miFlg)
headerButtonMenu.setStyle({visibility: 'hidden'});
}, 500);
});
},

On Sep 30, 9:54 am, Pablo Aravena <paraven...@gmail.com> wrote:
> I tried this code, but it didn't work, where exactly did you put this code?
>
> Thanks
> Pablo
>
>
>
> On Wed, Sep 29, 2010 at 5:24 PM, infringer <infrin...@gmail.com> wrote:
> > The drop down menu icon on the header column, sticks when you mouse
> > out.  You'll notice it stays at whatever the last column you were on.
>
> > I was able to fix this by inserting the following code in the
> > _applyHeaderButtons function.  I inserted this just after the
> > 'mousemove' event observer.
>
> > Event.observe(element, 'mouseout', function () {
> >   headerButton.setStyle({visibility: 'hidden'});
> > });
>
> > HTH,
> > -David
>
> > --
> > You received this message because you are subscribed to the Google Groups

> > "MyTableGrid" group.> To post to this group, send email tomyta...@googlegroups.com.
> > To unsubscribe from this group, send email to>mytablegrid...@googlegroups.com<mytablegrid%2Bunsubscribe@googlegr oups.com>
> > .

[infringer]

I should mention I'm using FF 3.6.10 on Windows

> > > You received this message because you are subscribed to the Google Groups> > "MyTableGrid" group.> To post to this group, send emailtomy...@googlegroups.com.> > To unsubscribe from this group, send email to>mytablegrid...@googlegroups.com<mytablegrid%2Bunsubscribe@googl egr oups.com>

[Pablo Aravena]

Hi David

I tried again the code but didn't work well the header button began blinking and the header menu didn't respond well when the mouse get out of the menu displayed

Also I have included the css configuration :-)

Thanks friend

Saludos

Pablo

To post to this group, send email to mytab...@googlegroups.com.
To unsubscribe from this group, send email to mytablegrid...@googlegroups.com.