How to append click event to handsontable row/column header? - events

Question

I'm trying to implement some features like excel to click row/column header to select entire row/column, I think I should append a click event to all row/column header, so I tried add code below in core.js, but it was never been trigged:
this.click = function() {
alert("Clicked!");
};
So where should I begin with?
Thanks for any help.

Answer 1

Implemented by myself based on Handsontable 0.9.9:
From 5e2e8f51374741432d34624eb86edce6a802bf80 Mon Sep 17 00:00:00 2001
From: Xinfeng Li <xinfli#gmail.com>
Date: Wed, 17 Jul 2013 12:04:21 +0800
Subject: [PATCH 1/1] Implement select entire row/column when click on
row/column header.
---
src/3rdparty/walkontable/src/event.js | 5 ++++
src/3rdparty/walkontable/src/settings.js | 3 +-
src/pluginHooks.js | 3 ++
src/tableView.js | 50 ++++++++++++++++++++++++++++++++
4 files changed, 60 insertions(+), 1 deletion(-)
diff --git a/src/3rdparty/walkontable/src/event.js b/src/3rdparty/walkontable/src/event.js
index e150fef..a4cbb09 100644
--- a/src/3rdparty/walkontable/src/event.js
+++ b/src/3rdparty/walkontable/src/event.js
## -17,6 +17,11 ## function WalkontableEvent(instance) {
that.instance.getSetting('onCellMouseDown', event, cell.coords, cell.TD);
}
}
+ else if (cell.TD && cell.TD.nodeName === 'TH') {
+ if (that.instance.hasSetting('onHeaderMouseDown')) {
+ that.instance.getSetting('onHeaderMouseDown', event, cell.coords, cell.TD);
+ }
+ }
else if (that.wtDom.hasClass(event.target, 'corner')) {
that.instance.getSetting('onCellCornerMouseDown', event, event.target);
}
diff --git a/src/3rdparty/walkontable/src/settings.js b/src/3rdparty/walkontable/src/settings.js
index 35eb736..b16e4cf 100644
--- a/src/3rdparty/walkontable/src/settings.js
+++ b/src/3rdparty/walkontable/src/settings.js
## -41,8 +41,9 ## function WalkontableSettings(instance, settings) {
//callbacks
onCellMouseDown: null,
+ onHeaderMouseDown: null,
onCellMouseOver: null,
-// onCellMouseOut: null,
+ //onCellMouseOut: null,
onCellDblClick: null,
onCellCornerMouseDown: null,
onCellCornerDblClick: null,
diff --git a/src/pluginHooks.js b/src/pluginHooks.js
index afcc7e2..ececdd1 100644
--- a/src/pluginHooks.js
+++ b/src/pluginHooks.js
## -37,6 +37,9 ## Handsontable.PluginHookClass = (function () {
afterSelectionEndByProp : [],
afterCopyLimit : [],
+ // Customer plugin after row/column header clicked.
+ afterHeaderClick : [],
+
// Modifiers
modifyCol : []
}
diff --git a/src/tableView.js b/src/tableView.js
index 39512c0..ded6b74 100644
--- a/src/tableView.js
+++ b/src/tableView.js
## -242,6 +242,56 ## Handsontable.TableView = function (instance) {
that.settings.afterOnCellMouseDown.call(instance, event, coords, TD);
}
},
+ onHeaderMouseDown: function (event, coords, TD) {
+ var row = coords[0];
+ var col = coords[1];
+ var rangeRowStart, rangeColStart, rangeRowEnd, rangeColEnd;
+
+ //console.log("Clicked on header[row = " + row + ", col = " + col + "], TD.innerHTML.length: " + TD.innerHTML.length);
+ if ((row == 0) && (col == -1) && (TD.innerHTML.length == 0)) {
+ // Click on left upper corner
+ // Since the row and col is same when click on left upper corner and row heder of first row,
+ // The length of current TD.innerHTML must be checked.
+ rangeRowStart = 0;
+ rangeColStart = 0;
+ rangeRowEnd = instance.countRows() - 1;
+ rangeColEnd = instance.countCols() - 1;
+ }
+ else if (row == 0) {
+ if (col >= 0) {
+ // Click on column header
+ rangeRowStart = 0;
+ rangeColStart = col;
+ rangeRowEnd = instance.countRows() - 1;
+ rangeColEnd = col;
+ } else {
+ // Click on row header of first row
+ rangeRowStart = row;
+ rangeColStart = 0;
+ rangeRowEnd = row;
+ rangeColEnd = instance.countCols() - 1;
+ }
+ }
+ else if (col == -1) {
+ // Click on row header
+ rangeRowStart = row;
+ rangeColStart = 0;
+ rangeRowEnd = row;
+ rangeColEnd = instance.countCols() - 1;
+ }
+
+ if ((rangeRowStart != undefined) && (rangeColStart != undefined) && (rangeRowEnd != undefined) && (rangeColEnd != undefined)) {
+ //console.log("Select from [" + rangeRowStart + ", " + rangeColStart + "] to [" + rangeRowEnd + ", " + rangeColEnd + "]");
+ instance.selectCell(rangeRowStart, rangeColStart, rangeRowEnd, rangeColEnd);
+ }
+
+ if (!that.settings.fragmentSelection) {
+ event.preventDefault(); //disable text selection in Chrome
+ clearTextSelection();
+ }
+
+ instance.PluginHooks.run('afterHeaderClick', event, coords, TD);
+ },
/*onCellMouseOut: function (/*event, coords, TD* /) {
if (isMouseDown && that.settings.fragmentSelection === 'single') {
clearTextSelection(); //otherwise text selection blinks during multiple cells selection
--
1.8.1.msysgit.1