Grid FilterRow

[Surinder singh]

Hi,
We are sharing our extjs,joomla mootool,jquery extensions on http://www.developerextensions.com


one of them is Grid FilterRow by which you can filter the grid from server side.

You can add any kind of input filter like DropDown/Combobox, Textfield, NumberField, DateField Etc
And You can clear all filters by one click.

In this extension you can add more filter options like
1) if you have a date filter
then options can be [After,Before,Is,ETC]
2)if you have a text filter
then options can be [Equal,Contains,Start With,End With]
3)if there is number filter
then options can be [Equal,Greater than,Less Than,Start With,End With, ETC....]

it is opto you, how u can add more options in backend and frontend, let me show you, how it works

FrontEnd settings:
Grid Columns Configurations:-

var sampleGridColumns= [{
header: 'Id',
width:90,
dataIndex: 'id',
clearFilter:true//used to show clear filter icon in this column
},{
header: 'Title',
dataIndex: 'title',
sortable: true,
width:150,
filterInput: new Ext.form.TextField(),
filterOptions:[{value:'startwith', text:'Start With'},{value:'endwith', text:'End With'},{value:'contain', text:'Contain'},{value:'doesnotcontain', text:'Does Not Contain'}]
},{
header: 'Alias',
dataIndex: 'alias',
sortable: true,
width:230,
filterInput: new Ext.form.TextField(),
filterOptions:[{value:'startwith', text:'Start With'},{value:'endwith', text:'End With'},{value:'contain', text:'Contain'},{value:'doesnotcontain', text:'Does Not Contain'}]
},{
header: 'Created',
width:130,
dataIndex: 'created_date',
filterInput: new Ext.form.DateField({format:'Y-m-d', dataIndex:'created' /* you can pass different dataIndex for filtering into all filter inputs */}),
filterOptions:[{value:'before', text:'Before'},{value:'after', text:'After'},{value:'contain', text:'Is'}]
},{
header: 'Published',
dataIndex: 'state',
sortable: true,
renderer:function(v){if(v==1){return 'Published'}else{return '<span style="color:red">UnPublished</span>'}},
filterInput : new Ext.form.ComboBox({
displayField : 'name',
valueField : 'state',
triggerAction : 'all',
typeAhead : false,
mode : 'local',
listWidth : 160,
hideTrigger : false,
emptyText : 'Select',
store :[['1','Published'],['0','UnPublished']]
}),
filterOptions:[{value:'equal', text:'Is'},{value:'notequal', text:'Not'}]
}];



Backend handler:

<?php
error_reporting(E_ALL&~E_NOTICE);
include('db.php');

/**
* Gets Atricals from the com_extensiondemo_content table by filtering them accroding to $filter option
*
* @param $filter as array ('name'=>"John", "name_filterOption"=>'startwith', 'email'=>'@yahoo.com', "email_filterOption"=>'endwith')
*
* @access public
* @return records found
*/
function filteredMembers( $filter ="" ){
$where = " WHERE ";
$where .= buildFilterCondition($filter);

$sql = "SELECT *, DATE_FORMAT(created, '%b %e, %Y') as created_date FROM com_extensiondemo_content ".$where;
if( $offset > 0 ){
$sql .= " LIMIT ".intval($start).",".intval($offset);
}

$return = loadObjectlist($sql);
return $return;
}

/**
* build the filter condition for query
*
* @param $filter as array ('name'=>"John", "name_filterOption"=>'startwith', 'email'=>'@yahoo.com', "email_filterOption"=>'endwith')
*
* @access public
* @return filter as string
*/
function buildFilterCondition($filter){
$where = ' 1=1 ';
if( $filter && is_array($filter) && count($filter) ){
foreach($filter as $fieldIndex=>$val){
if( substr($fieldIndex, -12 ) == 'filterOption' ){
$fieldName = str_replace('_filterOption', '', $fieldIndex);
$fieldValue = $filter[$fieldName];
if($fieldValue===''){
continue;
}

switch($val){
case 'startwith':
$where .= " AND {$fieldName} like '{$fieldValue}%' ";
break;
case 'endwith':
$where .= " AND {$fieldName} like '%{$fieldValue}' ";
break;
case 'doesnotcontain':
$where .= " AND {$fieldName} NOT like '%{$fieldValue}%' ";
break;
case 'equal':
$where .= " AND {$fieldName} = '{$fieldValue}' ";
break;
case 'notequal':
$where .= " AND {$fieldName} <> '{$fieldValue}' ";
break;
case 'before':
$where .= " AND {$fieldName} < '{$fieldValue}' ";
break;
case 'after':
$where .= " AND {$fieldName} > '{$fieldValue}' ";
break;
case 'NoFilter':
break;
default:
case 'contain':
$where .= " AND {$fieldName} like '%{$fieldValue}%' ";
break;
}
}
}
}
return $where;
}


$filter = $_REQUEST['filter'];
$rows = filteredMembers($filter);
$result = new stdClass();
$result->data = $rows;
$result->total = count($rows);
$result->success = true;
echo $json = json_encode($result);

?>













Demo URL: http://www.developerextensions.com/index.php?option=com_extensiondemo&view=extensiondemo&layout=ext&extension=Ext-FilterRow_1.2&Itemid=482

(http://www.developerextensions.net)

[scottmartin]

Do you have these any extensions in download form? I an interested in the Query Builder.
(table schema)

Regards,
Scott.

[mluethi]

Hi!

This is a very nice extension!
Is it possible to use with the new Ext JS 4?

I was trying with PR5 and it didn't work...

FireBug gives me an error on line 141:
grid.getColumnModel is not a function


Do you have any experience with FilterRow in Ext JS 4 (PR5)?

TIA & best regards,
Marcel

[brittongr]

Query builder looks nice!!

[senacle]

Nice extension !

I've made the following change in filterRow.js :



this.grid.store.load();
in place of


this.grid.store.reload();
because reload() takes the last parameters used

In clearAllFilters and getData functions i've replaced 'dataIndex' by 'id'.
It's for combobox filterInput which have a remote store.

Some example is better to explain.

The grid's column and its combobox filterInput


align: 'center',
dataIndex: 'nom_categorie',
header : 'Cat&eacute;gorie',
filterInput: new Ext.form.ComboBox({
displayField: 'libelle_categorie',
hideTrigger: false,
id: 'categorie.id_categorie',
listWidth: 160,
store: store_categorie,
triggerAction: 'all',
typeAhead: false,
valueField: 'id_categorie'
}),
filterOptions: [{
value:'equal', text:'Egal &agrave;'
},{
value:'notequal', text:'Diff&eacute;rent de'
}],
renderer: style_valeur_grid,
sortable : true,
width : 150
The datas in the store_categorie coming from remote query

{"id_categorie":"1","libelle_categorie":"Alcool"},{"id_categorie":"33","libelle_categorie":"Alimentaire & Gourmet"}...If we use dataIndex, it's "nom_categorie" which will be used as the field's name in the query, and the value could be 1, 33... --> no datas returned by query.

If we use the filterInput's id, it's "id_categorie" which will be used as the field's name in the query, and the value could be 1, 33... --> some datas returned by query

[preichow]

Surinder,

What a wonderful grid filter! I just plugged it into my own grid and it works fine. Thank you for sharing.

There is just one problem: when I resize the columns, there is a bug: the data gets separated from the column header. I've found this problem on the demonstration grid on your website as well, so I know that it's not just my grid.

Is there any way to correct this? I hope so, because I think your filter is among the best out there.