-
Notifications
You must be signed in to change notification settings - Fork 95
1.14 Popup filters
koalyptus edited this page May 31, 2017
·
3 revisions
Generates a filter icon placed in the column header toggling a popup filter when clicked.
Property | Type | Description | Remarks | Example |
---|---|---|---|---|
popup_filters | 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 }; // or var tfConfig = { popup_filters: {} }; |
|
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 } }; |
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' } }; |
|
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' } }; |
|
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: ' |
placeholder_css_class | string | defines the css class for the container of the popup element (default - 'popUpPlaceholder') |
var tfConfig = { popup_filters: { placeholder_css_class: 'myCssClass' } }; |
|
div_css_class | string | defines the css class for the popup element containing the column filter (default - 'popUpFilter') |
var tfConfig = { popup_filters: { popup_div_css_class: 'myCssClass' } }; |
|
adjust_to_container | boolean | ensures filter's popup container element width matches column width (default - true) |
var tfConfig = { popup_filters: { adjust_to_container: false } }; |
|
on_before_popup_filter_open | function | callback fired before the popup filter is opened (default - null) |
Note that 3 parameters are sent to callback function:
|
var tfConfig = { popup_filters: { on_before_popup_filter_open: function(tf, popupElm, colIndex) { console.log(tf, popupElm, colIndex); } } }; |
on_after_popup_filter_open | function | callback fired after the popup filter is opened (default - null) |
Note that 3 parameters are sent to callback function:
|
var tfConfig = { popup_filters: { on_after_popup_filter_open: function(tf, popupElm, colIndex) { console.log(tf, popupElm, colIndex); } } }; |
on_before_popup_filter_close | function | callback fired before the popup filter is closed (default - null) |
Note that 3 parameters are sent to callback function:
|
var tfConfig = { popup_filters: { on_before_popup_filter_close: function(tf, popupElm, colIndex) { console.log(tf, popupElm, colIndex); } } }; |
on_after_popup_filter_close | function | callback fired after the popup filter is closed (default - null) |
Note that 3 parameters are sent to callback function:
|
var tfConfig = { popup_filters: { on_after_popup_filter_close: function(tf, popupElm, colIndex) { console.log(tf, popupElm, colIndex); } } }; |