Skip to content

Search

Grid allows variety of different options to make search feature more usable.

Autofilter toolbar

You can enable it by setting:

$g->set_actions(array(
                        // ...
                        "autofilter" => true
                        // ...
                    )
                );

By default it will be hidden and once you set xs+ autofilter will come back on extra small and onwards.

$opt["search_options"]["autofilter"] = "xs+"; // xs+, sm+, md+
$g->set_options($opt);

Autofilter toolbar search

Search Dialog

Basic search dialog can be enabled by search key in set_actions function. Possible values are simple, advance

Values Description
simple Single column search dialog
advance Multi column search with AND / OR option
group Multi column search with multiple AND / OR groups 
$g->set_actions(array(
                        // ...
                        "search" => "advance"
                        // ...
                    )
                );

Group Search Dialog

Resources

Search Templates

You can also set predefined search templates using grid options.

// Define predefined search templates
$opt["search_options"]["tmplNames"] = array("Template1", "Template2");
$opt["search_options"]["tmplFilters"] = array(
    array(
        "groupOp" => "AND",
        "rules" => array (
                        array("field"=>"name", "op"=>"cn", "data"=>"Maria"),
                        array("field"=>"closed", "op"=>"cn", "data"=>"No"),
                        )
    ),
    array(
        "groupOp" => "AND",
        "rules" => array (
                        array("field"=>"total", "op"=>"gt", "data"=>"50")
                        )
    )
);

$g->set_options($opt);

Search Templates

Resources

Search External Form

For further customizations, you can create an custom HTML form and connect it to datagrid search javascript api.

External Search Form

Resources

Search on Load

Following config will enable search on load. Initialize search with name field equal to eq 'Client 1'

$sarr = <<< SEARCH_JSON
{
    "groupOp":"AND",
    "rules":[
      {"field":"name","op":"eq","data":"Client 1"}
     ]
}
SEARCH_JSON;

$opt["search"] = true;
$opt["postData"] = array("filters" => $sarr );

If you wish to persist search settings on page reload:

$opt["persistsearch"] = true;

Resources

Search based on URL parameters

You can filter datagrid based on URL parameter as well. Url format is {gridid}_{colname}={value} e.g. page.php?grid_id=list1&filter_closed=1 will filter grid with id list1 on page.php with column name closed to 1 You can add multiple filtering (AND) conditions as shown in image.

URL Based Filtering

To have a numeric range filter, (total > 10) you can set e.g. ?grid_id=list1&filter_total=>10

Resources

Show / Hide columns based on URL parameters

You can show or hide certain column based on URL parameter as well. Url format is {gridid}_showcols={col1},{col2} or {gridid}_hidecols={col1},{col2}

e.g. page.php?list1_showcols=id,invdate,note&list1_hidecols=total

This will show columns with name id,invdate,note (if defined and hidden) and hide column name total where list1 is grid id on page.php.

Useful JS Search Events

You can also use following events to perform custom operation after search.

// invoked after toolbar search
$opt["autofilter_options"]["afterSearch"] = "function(){alert('after search toolbar');}";

// invoked after dialog search
$opt["search_options"]["onSearch"] = "function(){alert('after search dialog');}";