{"id":7832,"date":"2015-10-31T01:24:55","date_gmt":"2015-10-31T01:24:55","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/10\/31\/how-to-append-click-event-to-handsontable-row-column-header-open-source-projects-handsontable-handsontable\/"},"modified":"2015-10-31T01:24:55","modified_gmt":"2015-10-31T01:24:55","slug":"how-to-append-click-event-to-handsontable-row-column-header-open-source-projects-handsontable-handsontable","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/10\/31\/how-to-append-click-event-to-handsontable-row-column-header-open-source-projects-handsontable-handsontable\/","title":{"rendered":"How to append click event to handsontable row\/column header?-open source projects handsontable\/handsontable"},"content":{"rendered":"<p>Implemented by myself based on Handsontable 0.9.9:<\/p>\n<pre><code>From 5e2e8f51374741432d34624eb86edce6a802bf80 Mon Sep 17 00:00:00 2001\nFrom: Xinfeng Li \nDate: Wed, 17 Jul 2013 12:04:21 +0800\nSubject: [PATCH 1\/1] Implement select entire row\/column when click on\n row\/column header.\n\n---\n src\/3rdparty\/walkontable\/src\/event.js    |  5 ++++\n src\/3rdparty\/walkontable\/src\/settings.js |  3 +-\n src\/pluginHooks.js                       |  3 ++\n src\/tableView.js                         | 50 ++++++++++++++++++++++++++++++++\n 4 files changed, 60 insertions(+), 1 deletion(-)\n\ndiff --git a\/src\/3rdparty\/walkontable\/src\/event.js b\/src\/3rdparty\/walkontable\/src\/event.js\nindex e150fef..a4cbb09 100644\n--- a\/src\/3rdparty\/walkontable\/src\/event.js\n+++ b\/src\/3rdparty\/walkontable\/src\/event.js\n@@ -17,6 +17,11 @@ function WalkontableEvent(instance) {\n         that.instance.getSetting('onCellMouseDown', event, cell.coords, cell.TD);\n       }\n     }\n+    else if (cell.TD &amp;&amp; cell.TD.nodeName === 'TH') {\n+      if (that.instance.hasSetting('onHeaderMouseDown')) {\n+        that.instance.getSetting('onHeaderMouseDown', event, cell.coords, cell.TD);\n+      }\n+    }\n     else if (that.wtDom.hasClass(event.target, 'corner')) {\n       that.instance.getSetting('onCellCornerMouseDown', event, event.target);\n     }\ndiff --git a\/src\/3rdparty\/walkontable\/src\/settings.js b\/src\/3rdparty\/walkontable\/src\/settings.js\nindex 35eb736..b16e4cf 100644\n--- a\/src\/3rdparty\/walkontable\/src\/settings.js\n+++ b\/src\/3rdparty\/walkontable\/src\/settings.js\n@@ -41,8 +41,9 @@ function WalkontableSettings(instance, settings) {\n\n     \/\/callbacks\n     onCellMouseDown: null,\n+    onHeaderMouseDown: null,\n     onCellMouseOver: null,\n-\/\/    onCellMouseOut: null,\n+    \/\/onCellMouseOut: null,\n     onCellDblClick: null,\n     onCellCornerMouseDown: null,\n     onCellCornerDblClick: null,\ndiff --git a\/src\/pluginHooks.js b\/src\/pluginHooks.js\nindex afcc7e2..ececdd1 100644\n--- a\/src\/pluginHooks.js\n+++ b\/src\/pluginHooks.js\n@@ -37,6 +37,9 @@ Handsontable.PluginHookClass = (function () {\n       afterSelectionEndByProp : [],\n       afterCopyLimit : [],\n\n+      \/\/ Customer plugin after row\/column header clicked.\n+      afterHeaderClick : [],\n+      \n       \/\/ Modifiers\n       modifyCol : []\n     }\ndiff --git a\/src\/tableView.js b\/src\/tableView.js\nindex 39512c0..ded6b74 100644\n--- a\/src\/tableView.js\n+++ b\/src\/tableView.js\n@@ -242,6 +242,56 @@ Handsontable.TableView = function (instance) {\n         that.settings.afterOnCellMouseDown.call(instance, event, coords, TD);\n       }\n     },\n+    onHeaderMouseDown: function (event, coords, TD) {\n+      var row = coords[0];\n+      var col = coords[1];\n+      var rangeRowStart, rangeColStart, rangeRowEnd, rangeColEnd;\n+\n+      \/\/console.log(\"Clicked on header[row = \" + row + \", col = \" + col + \"], TD.innerHTML.length: \" + TD.innerHTML.length);\n+      if ((row == 0) &amp;&amp; (col == -1) &amp;&amp; (TD.innerHTML.length == 0)) {\n+        \/\/ Click on left upper corner\n+        \/\/ Since the row and col is same when click on left upper corner and row heder of first row,\n+        \/\/ The length of current TD.innerHTML must be checked.\n+        rangeRowStart = 0;\n+        rangeColStart = 0;\n+        rangeRowEnd = instance.countRows() - 1;\n+        rangeColEnd = instance.countCols() - 1;\n+      }\n+      else if (row == 0) {\n+        if (col &gt;= 0) {\n+          \/\/ Click on column header\n+          rangeRowStart = 0;\n+          rangeColStart = col;\n+          rangeRowEnd = instance.countRows() - 1;\n+          rangeColEnd = col;\n+        } else {\n+          \/\/ Click on row header of first row\n+          rangeRowStart = row;\n+          rangeColStart = 0;\n+          rangeRowEnd = row;\n+          rangeColEnd = instance.countCols() - 1;\n+        }\n+      }\n+      else if (col == -1) {\n+        \/\/ Click on row header\n+        rangeRowStart = row;\n+        rangeColStart = 0;\n+        rangeRowEnd = row;\n+        rangeColEnd = instance.countCols() - 1;\n+      }\n+\n+      if ((rangeRowStart != undefined) &amp;&amp; (rangeColStart != undefined) &amp;&amp; (rangeRowEnd != undefined) &amp;&amp; (rangeColEnd != undefined)) {\n+        \/\/console.log(\"Select from [\" + rangeRowStart + \", \" + rangeColStart + \"] to [\" + rangeRowEnd + \", \" + rangeColEnd + \"]\");\n+        instance.selectCell(rangeRowStart, rangeColStart, rangeRowEnd, rangeColEnd);\n+      }\n+\n+      if (!that.settings.fragmentSelection) {\n+        event.preventDefault(); \/\/disable text selection in Chrome\n+        clearTextSelection();\n+      }\n+\n+      instance.PluginHooks.run('afterHeaderClick', event, coords, TD);\n+    },\n     \/*onCellMouseOut: function (\/*event, coords, TD* \/) {\n      if (isMouseDown &amp;&amp; that.settings.fragmentSelection === 'single') {\n      clearTextSelection(); \/\/otherwise text selection blinks during multiple cells selection\n-- \n1.8.1.msysgit.1\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Implemented by myself based on Handsontable 0.9.9: From 5e2e8f51374741432d34624eb86edce6a802bf80 Mon Sep 17 00:00:00 2001 From: Xinfeng Li Date: Wed, 17 Jul 2013 12:04:21 +0800 Subject: [PATCH 1\/1] Implement select entire row\/column when click on row\/column header. &#8212; src\/3rdparty\/walkontable\/src\/event.js | 5 ++++ src\/3rdparty\/walkontable\/src\/settings.js | 3 +- src\/pluginHooks.js | 3 ++ src\/tableView.js | 50 ++++++++++++++++++++++++++++++++ 4 files [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7832","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7832"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7832\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}