In this post we will see how to add a select dropdown to a cell header in ui-grid and filter the grid rows based on the selection (here you know that the dropdown has predefined set of values).
Have all the modules and dependencies
required for Angular ui-grid included in your application as shown in the
example in this demo . Choose the column which needs to have the
select dropdown and modify its column definition to include a filter. Inject
uiGridConstants and use it to configure the filter options .A filter consists
of a condition , type and selectOptions.
Condition –
Defines how to filter the grid rows
Type –
A select dropdown or an input text
SelectOptions – Values that populate the dropdown
$scope.gridOptions = {
data : this.myData ,
enableFiltering : true,
{field : 'company',
name : 'company',
visible :true ,
filter: {
type:
uiGridConstants.filter.SELECT,
condition
: uiGridConstants.filter.STARTS_WITH,
selectOptions:
[
{
value: 'Enormo', label: 'Enormo' },
{
value: 'Comveyer', label: 'Comveyer' },
{
value: 'Fuelton', label: 'Fuelton' }
]
}
}
This example filters all the grid rows whose 'Company' column value starts with the value of the label in the selection . You can customize the value and the label of the select dropdown . Refer the
documentation on uiGridConstants for more filter conditions and options . Note : Values in the dropdown need to be configured and are not dynamically populated based on the column values and this feature is mostly used for filtering the already loaded records in the grid .
Here is the link to plunker showing the demo
If you are looking for an example on how to filter rows
based on a date range i.e by passing a from and to date , please refer the
plunker http://plnkr.co/edit/HvKuNMdh9IdptBdj7x8v?p=preview .
No comments :
Post a Comment