diff --git a/css/extensions/ColumnHider.css b/css/extensions/ColumnHider.css
index 5cfb8f926..97d8b0018 100644
--- a/css/extensions/ColumnHider.css
+++ b/css/extensions/ColumnHider.css
@@ -8,6 +8,11 @@
top: 0;
}
+.dgrid-rtl-swap .dgrid-hider-toggle {
+ right: auto;
+ left: 0;
+}
+
.dgrid-hider-menu {
position: absolute;
top: 0;
@@ -21,6 +26,11 @@
overflow-y: auto;
}
+.dgrid-rtl-swap .dgrid-hider-menu {
+ right: auto;
+ left: 17px;
+}
+
.dgrid-hider-menu-row {
position: relative;
padding: 2px;
diff --git a/extensions/ColumnHider.js b/extensions/ColumnHider.js
index 6c2ade5c4..7e3f4ea12 100644
--- a/extensions/ColumnHider.js
+++ b/extensions/ColumnHider.js
@@ -129,7 +129,7 @@ function(declare, has, listen, miscUtil, put, i18n){
// Assume that if this plugin is used, then columns are hidable.
// Create the toggle node.
hiderToggleNode = this.hiderToggleNode =
- put(this.headerScrollNode, "button.ui-icon.dgrid-hider-toggle[type=button]");
+ put(this.domNode, "button.ui-icon.dgrid-hider-toggle[type=button]");
this._listeners.push(listen(hiderToggleNode, "click", function(e){
grid._toggleColumnHiderMenu(e);
diff --git a/test/extensions/ColumnHider.html b/test/extensions/ColumnHider.html
index e41b9a8af..a112fa151 100644
--- a/test/extensions/ColumnHider.html
+++ b/test/extensions/ColumnHider.html
@@ -6,6 +6,9 @@