PHP Generator Feature Demo
  • Themes
    • Default
    • Default compact
    • Cerulean
    • Cerulean compact
    • Cosmo
    • Cyborg
    • Darkly
    • Darkly compact
    • Facebook
    • Flatly
    • Journal
    • Lumen
    • Paper
    • Readable
    • Sandstone
    • Simplex
    • Slate
    • Slate compact
    • Spacelab
    • Superhero
    • Superhero compact
    • United
    • United compact
    • Yeti
    • Yeti compact
  • English
    • German
    • Brazilian
    • Czech
    • Danish
    • Spanish
    • Finnish
    • French
    • Hungarian
    • Italian
    • Dutch
    • Polish
    • Russian
    • Swedish
    • Slovak
    • Slovenian
    • Serbian
    • Turkish
    • Arabic
  • Learn more
    • PHP Generator Feature Demo
    • About this demo
    • Download project file for this demo
    • Check out other PHP Generator demos
    • NBA Database Demo
    • Security Demo
    • MySQL Schema Browser Demo
    • Learn more about our products
    • Try PHP Generator for free
    • SQL Maestro Group website
    • Follow us
    • Facebook
    • Twitter
    • YouTube
  • Recently added/updated
    • Grid Toolbar
    • Tabbed Forms
    • Stepped Area Chart
    • Candlestick Chart
    • Histogram Chart
    • Bubble Chart
    • Timeline Chart
    • Gantt Chart
    • Scatter Chart
    • Tree Map Chart
    • Export options
    • Invoice generation
    • Inline Button
    • HTML Wysiwyg
    • Watermarks
  • Data Grid
    • Table View
    • Card View
    • Autohiding Columns
    • Totals
    • Grid Header
    • Column Grouping
    • Record Comparison
    • Unicode Support
    • RSS
    • Custom Drawing
    • Custom Table Template
    • Custom Card Template
    • Custom Toolbar Template
    • Custom View Form
  • Grid Columns
    • Column Types
    • Text Truncating
    • Column Fixed Width
    • Formatting
    • Null Label
    • Hyperlinks
    • Html Display
    • Lookup Data View
    • Custom Rendering
  • Grid Options
    • Fixed Grid Width
    • Fixed Column Header
    • Bordered Table
    • Condensed Table
    • Line Numbers
    • Control Buttons Position
  • Data Sources
    • Table
    • View
    • Non-Updatable Query
    • Updatable Query
    • Updatable View
  • Master-Detail Views
    • Master/Detail Basics
    • Multiple Details
    • Nested Details
    • Card Mode Details
  • Data Input Forms
    • Separate Page
    • Modal Window
    • Inline Editing
    • Form Layouts
    • Tabbed Forms
    • Custom Separate Page
    • Custom Modal Dialog
    • Custom Inline Form
    • Wizard Form
    • Adding multiple records
    • Editors Overview
    • Validation
    • Client-side API
    • Dependent Lookups
    • On-the-Fly Adding
    • Quick Edit
    • Multi Edit
    • Custom Default Values
  • Editors
    • Text
    • Autocomplete
    • Text Area
    • HTML Wysiwyg
    • Spin & Range
    • Upload To Folder
    • Radio Group
    • Combobox
    • Dynamic Combobox
    • Cascading Combobox
    • Dynamic Cascading Combobox
    • Multiple Select
    • Checkbox Group
    • Common Properties
  • Data Filtering
    • Quick Filter
    • Filter Builder
    • Column Filter
    • Preliminary Filter
    • Selection Filters
    • Custom Filter - 1
    • Custom Filter - 2
  • Sorting
    • Sort By Click
    • Sort By Dialog
    • Default Sort Order
  • Partitioning
    • Range
    • List
    • Custom
  • Exporting & Printing
    • Grid
    • Single Record
    • Export Options
    • Custom Grid
    • Custom Single Record
    • User Defined Styles
  • Image Management
    • Image Galleries
    • Thumbnails
    • Linked Images
    • Multi Upload - 1
    • Multi Upload - 2
    • Watermarks
  • Charts
    • Pie Chart
    • Column Chart
    • Bar Chart
    • Line Chart
    • Area Chart
    • Geo Charts
    • Stepped Area
    • Candlestick
    • Histogram
    • Bubble
    • Timeline
    • Gantt
    • Scatter
    • Tree Map
    • Multiple Charts
    • Chart Placement
    • Customizing Charts
    • Dashboard
  • Many-to-Many Relations
    • Classic Junction Table
    • Handling Extra Columns
  • Fine-tuning & Tweaking
    • Custom Icons
    • Custom Theme
    • Custom Editor
    • Page Embedding
    • Ajax-based Validation
    • Color Themes
    • Barcodes Generation
    • Inline Button
    • Conditional Details
    • Using Ajax in Forms
  • Emailing
    • Basic Usage
    • Advanced Usage
  • Calculated Columns
    • Example - 1
    • Example - 2
  • Custom Templates
    • Grid View
    • Card View
    • Grid Toolbar
    • Single Record View
    • Separate Page Editing
    • Modal Dialog Editing
    • Inline Form Editing
    • Wizard Form
    • Custom Filter - 1
    • Custom Filter - 2
    • Export & Print: Data Grid
    • Invoice generation
  1. Data Filtering
  2. Filtering.Custom Filter (Advanced Version)
    • Quick Filter
    • Filter Builder
    • Column Filter
    • Preliminary Filter
    • Selection Filters
    • Custom Filter - 1

Filtering.Custom Filter (Advanced Version)

Page settings

Appearance

Here you can select the number of cards to be placed in a row for each of supported screen resolutions. Your current resolution is highlighted in this way.

Page size

Total record count: 223.

page(s).
Cancel Save changes
×

This page demonstrates an advanced version of the Life expectancy custom filter.

Technical details are as follows (click a link below to see the appropriate code):

  • OnGetCustomTemplate event handler code.
  • Customized grid toolbar template including the custom filter template which contains code representing a filter form.
  • OnPreparePage event handler code.
  • OnAfterPageLoad event handler code. Here is the custom filter is initialized.
Add new
Refresh
Export
  • Export to Pdf
  • Export to Excel
  • Export to Word
  • Export to Xml
  • Export to Csv
Print
  • Print current page
  • Print all pages
  • Clear
  • Selection filter
    • Show selected only
    • Show unselected only
    • Show all
  • Export
    • Export to Pdf
    • Export to Excel
    • Export to Word
    • Export to Xml
    • Export to Csv
  • Update

        protected function doGetCustomTemplate($type, $part, $mode, &$result, &$params)
        {
            if ($part == PagePart::GridToolbar && $mode == PageMode::ViewAll) {
                $result = 'custom_advanced_filter_grid_toolbar.tpl';
                
                $sql =
                    'SELECT ' .
                    '    FLOOR(MIN(life_expectancy)) as min_life_expectancy,' .
                    '    CEILING(MAX(life_expectancy)) as max_life_expectancy ' .
                    'FROM v_filtering_custom_filter2';
                $queryResult = array();
                $this->GetConnection()->ExecQueryToArray($sql, $queryResult);
                $minLifeExpectancy = $queryResult[0]['min_life_expectancy'];
                $maxLifeExpectancy = $queryResult[0]['max_life_expectancy'];
            
                $lifeExpectancyFilter = array(
                    'min' => $minLifeExpectancy,
                    'max' => $maxLifeExpectancy
                );
                if (isset($_SESSION['lifeExpectancyFilter'])) {
                    $lifeExpectancyFilter = array_merge($lifeExpectancyFilter, $_SESSION['lifeExpectancyFilter']);     
                } 
            
                $params['MinLifeExpectancy'] = $minLifeExpectancy;
                $params['MaxLifeExpectancy'] = $maxLifeExpectancy;
                $params['LifeExpectancyFilter'] = $lifeExpectancyFilter;
                
                $lifeExpectancyFilterActive = isset($_SESSION['lifeExpectancyFilter']);
                $params['LifeExpectancyFilterActive'] = $lifeExpectancyFilterActive;
                if ($lifeExpectancyFilterActive) {
                   $params['LifeExpectancyFilterAsString'] = 
                       sprintf('Life expectancy Is Between %d And %d years', 
                           $lifeExpectancyFilter['min'], $lifeExpectancyFilter['max']
                       );
                }    
            }
        }
        protected function DoPrepare() {
            // handling custom filter parameters
            $lifeExpectancyFilter = array(
                'min' => -1,
                'max' => -1
            );
               
            if (GetApplication()->isGetValueSet('lifeExpectancyFilter')) {
                $lifeExpectancyFilterValue = GetApplication()->GetGETValue('lifeExpectancyFilter');
                if (is_array($lifeExpectancyFilterValue)) {
                    $lifeExpectancyFilter = array_merge($lifeExpectancyFilter, $lifeExpectancyFilterValue);
                }
            } elseif (isset($_SESSION['lifeExpectancyFilter'])) {
                $lifeExpectancyFilter = array_merge($lifeExpectancyFilter, $_SESSION['lifeExpectancyFilter']);
            }
            
            if ($lifeExpectancyFilter['min'] !== -1 && $lifeExpectancyFilter['max'] !== -1) {
                $this->dataset->AddCustomCondition(
                    sprintf('life_expectancy >= %d AND life_expectancy <= %d', 
                        $lifeExpectancyFilter['min'], $lifeExpectancyFilter['max']
                    )    
                );
                $_SESSION['lifeExpectancyFilter'] = $lifeExpectancyFilter;
            } else {
                unset($_SESSION['lifeExpectancyFilter']);
            }
            
            // auxiliary code
            $this->setDescription(file_get_contents("external_data/doc/filtering_custom_filter_advanced.html"));
            
            $this->setDetailedDescription(
                '<br>' .
                '<div id="on-get-custom-template" class="event-code">' .
                    extractMethodCode($this, 'doGetCustomTemplate') . '</div>' .
                '<div id="on-prepare-page" class="event-code">' .
                    extractMethodCode($this, 'doPrepare') . '</div>' .
                '<div id="on-after-page-load" class="event-code">' .
                    extractClientEventCode($this, 'OnAfterPageLoad') . '</div>' .
                '<div id="custom-grid-toolbar" style="display: none;">' .
                    extractTemplateFileCode('components/templates/custom_templates/custom_advanced_filter_grid_toolbar.tpl') . 
                '</div>' .
                '<div id="custom-advanced-filter" style="display: none;">' .
                    extractTemplateFileCode('components/templates/custom_templates/custom_advanced_filter.tpl') . 
                '</div>'    
            );
        }

// OnAfterPageLoad event body
 function initCustomFilter() {
    var contentHtml = $('#custom_filter_content').html();
    var $form = $('.js-custom-filter-container').first();

    $('.js-reset-custom-filter').on('click', function() {
        window.location = $.query.set('lifeExpectancyFilter', '');
        return false;
    });

    $form.find('a.js-filter-trigger').each(function (i, el) {
        var $a = $(el);
        var $originalContent = $a.next('.js-content');

        var popover = $a.webuiPopover({
            trigger: 'click',
            backdrop: true,
            content: ''
        }).data('plugin_webuiPopover');

        $a.on('show.webui.popover', function () {
            var $content = $(contentHtml);
            $content.find('.js-content').html($originalContent.html());

            popover.$contentElement
                .html($content.prop('outerHTML'))
                .find('.js-apply').on('click', function () {
                    $originalContent.replaceWith(popover.$contentElement.clone());
                    popover.hide();
                    $form.trigger('submit');
                });

            popover.$contentElement.find('.close').on('click', function () {
                popover.hide();
            });

        });
    });

};

initCustomFilter();

{if $DataGrid.ActionsPanelAvailable}
    <div class="addition-block js-actions">
        <div class="btn-toolbar addition-block-left pull-left">
            {include file="list/grid_toolbar_add_button.tpl"}
            {include file="list/grid_toolbar_multi_upload_button.tpl"}
            {include file="list/grid_toolbar_refresh_button.tpl"}
            {include file="list/grid_toolbar_export_print_rss_buttons.tpl"}
            {include file="list/grid_toolbar_selection_button.tpl"}
        </div>

        {if not $isInline}
            <div class="addition-block-right pull-right">
                {include file="list/grid_toolbar_filter_builder_button.tpl"}
                {include file="list/grid_toolbar_sort_button.tpl"}
                {include file="list/grid_toolbar_settings_button.tpl"}
                {include file="list/grid_toolbar_description_button.tpl"}
            </div>
            {include file="list/quick_filter.tpl" filter=$DataGrid.QuickFilter}
        {/if}
    </div>
{/if}

{if $GridViewMode == 'card'}
    {include file='list/column_filters.tpl'}
{/if}

{* The string below is retained for compatibility *}
{$GridBeforeFilterStatus}

{* Custom Code *}
{include file='custom_templates/custom_advanced_filter.tpl'}

{capture assign=FilterStatus}
    {if $LifeExpectancyFilterActive}
        <div class="filter-status-value filter-status-value-custom-filter" title="{$LifeExpectancyFilterAsString}">
            <svg viewBox="0 0 48 48" class="svg-icon filter-status-value-icon">
                <use xlink:href="#icon-custom-filter"></use>
            </svg>
            <span class="filter-status-value-expr">{$LifeExpectancyFilterAsString}</span>
            <div class="filter-status-value-controls">
                <a href="#" class="js-reset-custom-filter" title="{$Captions->GetMessageString('ResetFilter')}">
                    <i class="icon-remove"></i>
                </a>
            </div>
        </div>
    {/if}
{/capture}
{* /Custom Code *}

{include file='list/grid_filters_status.tpl'}

{include file='common/messages.tpl' type='danger' dismissable=true messages=$DataGrid.ErrorMessages displayTime=$DataGrid.MessageDisplayTime}
{include file='common/messages.tpl' type='success' dismissable=true messages=$DataGrid.Messages displayTime=$DataGrid.MessageDisplayTime}

<div class="js-grid-message-container"></div>
{* Custom filter icon *}
<svg  viewBox="0 0 48 48" enable-background="new 0 0 48 48" class="hide">
    <defs>
        <symbol id="icon-custom-filter">
            <path id="path0_fill" d="M 46.522 3.55271e-15L 0.0750411 0C -0.0269589 0 0.0580411 17.636 0.0190411 17.73C -0.0199589 17.824 0.00204105 17.934 0.0750411 18.005L 17.57 35.406L 17.57 47.747C 17.57 47.888 17.683 48 17.822 48L 28.775 48C 28.914 48 29.027 47.888 29.027 47.747L 29.027 35.408L 46.522 18.005C 46.595 17.933 46.617 17.824 46.578 17.73C 46.538 17.635 46.522 3.55271e-15 46.522 3.55271e-15Z"/>
        </symbol>
    </defs>
</svg>
{* /Custom filter icon *}

<div class="custom-filter-container">
    <form class="js-custom-filter-container" method="get">
        <ul class="nav nav-pills pull-right grid-card-column-filter">
            <li {if $LifeExpectancyFilterActive}class="active"{/if}>
                <a href="#" class="js-filter-trigger" title="">
                    <svg viewBox="0 0 48 48" class="svg-icon">
                        <use xlink:href="#icon-custom-filter"></use>
                    </svg>&nbsp;Life expectancy
                </a>
                <div class="js-content hide">
                    <div class="form-group">
                        <table width="100%">
                            <tr>
                                <td width="45%">
                                    <label for="minLifeExpectancy">Min age</label>
                                    <input type="number" id="minLifeExpectancy" class="form-control input-sm"
                                           name="lifeExpectancyFilter[min]" value="{$LifeExpectancyFilter.min}"
                                           min="{$MinLifeExpectancy}" max="{$MaxLifeExpectancy}"
                                            >
                                </td>
                                <td width="10%">&nbsp;</td>
                                <td width="45%">
                                    <label for="maxLifeExpectancy">Max age</label>
                                    <input type="number" id="maxLifeExpectancy" class="form-control input-sm"
                                           name="lifeExpectancyFilter[max]" value="{$LifeExpectancyFilter.max}"
                                           min="{$MinLifeExpectancy}" max="{$MaxLifeExpectancy}"
                                            >
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </li>
        </ul>
    </form>
</div>

<script type="text/html" id="custom_filter_content">
    <div class="custom_filter">
        <button data-dismiss="alert" class="close" type="button">&times;</button>
        <div class="js-content"></div>
        <hr class="custom_filter_separator">
        <div class="btn-toolbar pull-right custom_filter_toolbar">
            <button type="submit" class="btn btn-sm btn-primary js-apply">Apply</button>
        </div>
        <div class="clearfix"></div>
    </div>
</script>

 
  •  Life expectancy
     
Actions Code Country Continent Population Life Expectancy
ABW Aruba North America 103,000 78.40
AFG Afghanistan Asia 22,720,000 45.90
AGO Angola Africa 12,878,000 38.30
AIA Anguilla North America 8,000 76.10
ALB Albania Europe 3,401,200 71.60
AND Andorra Europe 78,000 83.50
ANT Netherlands Antilles North America 217,000 74.70
ARE United Arab Emirates Asia 2,441,000 74.10
ARG Argentina South America 37,032,000 75.10
ARM Armenia Asia 3,520,000 66.40
ASM American Samoa Oceania 68,000 75.10
ATG Antigua and Barbuda North America 68,000 70.50
AUS Australia Oceania 18,886,000 79.80
AUT Austria Europe 8,091,800 77.70
AZE Azerbaijan Asia 7,734,000 62.90
BDI Burundi Africa 6,695,000 46.20
BEL Belgium Europe 10,239,000 77.80
BEN Benin Africa 6,097,000 50.20
BFA Burkina Faso Africa 11,937,000 46.70
BGD Bangladesh Asia 129,155,000 60.20
There are no records to display

Multiple Sort

Column Order

Filter builder

  • «
  • 1
  • 2
  • ...
  • 11
  • ...
  • 12
  • »

About this demo

This demo application contains 100+ pages and illustrates most of features provided by PHP Generator. Hope it will help you to create even more powerful websites for your users.

You can download the demo project from our website and run the demo on your webserver as described in readme.txt.

Download PHP Generator Free Trial

Legend
New Recently added or significantly updated pages.
Pro Pages illustrating features available only in the Professional edition of PHP Generator.

© 2002- SQL Maestro Group. Follow us:

Created with PHP Generator for MySQL. Want to learn more? Download the demo project!

Change your password

Change password for user ''

Passwords do not match. Please try again.

Close Change password