From 0440719e5b9179decd736023210cc6d5c14212f9 Mon Sep 17 00:00:00 2001 From: koalyptus Date: Wed, 31 May 2017 21:10:57 +1000 Subject: [PATCH] Updated 1.14 Popup filters (markdown) --- 1.14-Popup-filters.md | 159 ++++++++++++++++++++++++++++++++++-------- 1 file changed, 128 insertions(+), 31 deletions(-) diff --git a/1.14-Popup-filters.md b/1.14-Popup-filters.md index ac0ad58..bd46546 100644 --- a/1.14-Popup-filters.md +++ b/1.14-Popup-filters.md @@ -12,71 +12,132 @@ popup_filters - boolean + boolean|object enables / disables popup filters type, filters will popup when a filter icon placed near the column header is clicked (default - false) - var tfConfig = { popup_filters: true } + + 
+var tfConfig = { popup_filters: true };
+// or
+var tfConfig = { 
+  popup_filters: {} 
+};
+
+ - popup_filters_close_on_filtering + close_on_filtering boolean closes active popup filter upon filtering (default - true) Multiple selection filter types will remain open to allow user to choose other options upon filtering - var tfConfig = { popup_filters_close_on_filtering: false }; + + 
+var tfConfig = { 
+  popup_filters: {
+    close_on_filtering: false
+  } 
+};
+
+ - popup_filters_image + image string sets the path to the filter icon placed in the header. It toggles the popup filter for that column (default - 'style/themes/icn_filter.gif') - var tfConfig = { popup_filters_image: 'myDir/my_filterIcon.png' - } + + 
+var tfConfig = { 
+  popup_filters: {
+    image: 'myDir/my_filterIcon.png'
+  } 
+};
+
+ - popup_filters_image_active + image_active string sets the path to the filter icon when active (default - 'style/themes/icn_filterActive.gif') - var tfConfig = { popup_filters_image_active: 'myDir/my_filterIconActive.png' - } + + 
+var tfConfig = { 
+  popup_filters: {
+    image_active: 'myDir/my_filterIconActive.png'
+  } 
+};
+
+ - popup_filters_image_html + image_html string sets the HTML of the filter icon placed in the header (default - '<img src="'+ this.popUpImgFlt +'" alt="Column filter" />') Note that the onclick event is added automatically to the html element and overwrites any onclick attribute - var tfConfig = { popup_filters_image_html: '<img src="myDir/my_filterIcon.png" - alt="Toggle filters"/>' } + + 
+var tfConfig = { 
+  popup_filters: {
+    image_html: 'Toggle filters'
+  } 
+};
+
+ - popup_placeholder_css_class + placeholder_css_class string defines the css class for the container of the popup element (default - 'popUpPlaceholder') - var tfConfig = { popup_placeholder_css_class: 'myCssClass' } + + 
+var tfConfig = { 
+  popup_filters: {
+    placeholder_css_class: 'myCssClass'
+  } 
+};
+
+ - popup_div_css_class + div_css_class string defines the css class for the popup element containing the column filter (default - 'popUpFilter') - var tfConfig = { popup_div_css_class: 'myCssClass' } + + 
+var tfConfig = { 
+  popup_filters: {
+    popup_div_css_class: 'myCssClass'
+  } 
+};
+
+ - popup_filters_adjust_to_container + adjust_to_container boolean ensures filter's popup container element width matches column width (default - true) - var tfConfig = { popup_filters_adjust_to_container: false }; + + 
+var tfConfig = { 
+  popup_filters: {
+    adjust_to_container: false
+  } 
+};
+
+ on_before_popup_filter_open @@ -85,12 +146,21 @@ is opened (default - null)

Note that 3 parameters are sent to callback function:

- var tfConfig = { on_before_popup_filter_open: function(o,popupElm,colIndex){alert(o - +' '+ popupElm +' '+ colIndex); } } + + 
+var tfConfig = { 
+  popup_filters: {
+    on_before_popup_filter_open: function(tf, popupElm, colIndex) {
+      console.log(tf, popupElm, colIndex); 
+    }
+  } 
+};
+
+ on_after_popup_filter_open @@ -99,12 +169,21 @@ opened (default - null)

Note that 3 parameters are sent to callback function:

- var tfConfig = { on_after_popup_filter_open: function(o,popupElm,colIndex){alert(o - +' '+ popupElm +' '+ colIndex); } } + + 
+var tfConfig = { 
+  popup_filters: {
+    on_after_popup_filter_open: function(tf, popupElm, colIndex) {
+      console.log(tf, popupElm, colIndex); 
+    }
+  } 
+};
+
+ on_before_popup_filter_close @@ -113,12 +192,21 @@ is closed (default - null)

Note that 3 parameters are sent to callback function:

- var tfConfig = { on_before_popup_filter_close: function(o,popupElm,colIndex){alert(o - +' '+ popupElm +' '+ colIndex); } } + + 
+var tfConfig = { 
+  popup_filters: {
+    on_before_popup_filter_close: function(tf, popupElm, colIndex) {
+      console.log(tf, popupElm, colIndex); 
+    }
+  } 
+};
+
+ on_after_popup_filter_close @@ -127,12 +215,21 @@ closed (default - null)

Note that 3 parameters are sent to callback function:

- var tfConfig = { on_after_popup_filter_close: function(o,popupElm,colIndex){alert(o - +' '+ popupElm +' '+ colIndex); } } + + 
+var tfConfig = { 
+  popup_filters: {
+    on_after_popup_filter_close: function(tf, popupElm, colIndex) {
+      console.log(tf, popupElm, colIndex); 
+    }
+  } 
+};
+
+ \ No newline at end of file