How to filter?

[SoftCreatR]

Hi,

i try to create a filter, but i must be too stupid. First of all: I use Controller-As, so the model name is controller.filterString if that makes any difference.

I have created a simple text input:

<input type="text" class="form-control" id="filterString" ng-model="controller.filterString">

That doesn't make anything. I also removed the controller. from the model name, but still no luck. Adding console.log(filterString) to the searchFor filter always returns undefined.

Is there a working example?

Furthermore, i would like to know if i can control, what property should be used to filter (e.g. search for xxx in column A or search for yyy in columnB).

[SoftCreatR]

Okay, there must have been a typo somewhere, because it works now for some reason...

However, the 2nd question remains: Can i somehow define, which column/property i want to search? Currently, all columns/properties are searched, which is fine in most cases, but doesn't exactly fit my needs.

[torsten-sauer]

The col_defs definition has a property filterable which controls what fields are searched for filtering.

Please look at the readme (https://github.com/khan4019/tree-grid-directive/blob/master/README.md) - there you can find the description and some example code.

A full working example is under http://khan4019.github.io/tree-grid-directive/test/treeGrid.html

[SoftCreatR]

That's not the point, however you gave me an idea. I could maipulate the filterable property when setting the property that should be searched.

[torsten-sauer]

Ah, I should read more carefully ;-)

Yeah, if you like to search different cols (eg. with multiple inputs) you can't do that at the moment right out of the box.

But your idea sounds good - if you dynamically change the filterable inside the column definition than it might work (not sure, maybe we need a small PR to make it work).

[SoftCreatR]

Made it work. Maybe not the most elegant solution, but a success for an angular beginner :P

$scope.$watch('filterProperty', function (newValue, oldValue, scope) {
    if (newValue == oldValue) return;

    angular.forEach(_self.columns, function(value, key) {
        let field = value.field && value.field.length ? value.field.toLowerCase() : '';
        let filterProperty = newValue && newValue.length ? newValue.toLowerCase() : '';

        if (!filterProperty.length || field.toLowerCase() == newValue.toLowerCase()) {
            _self.tree_data[key].filterable = true;
        }
        else {
            _self.tree_data[key].filterable = false;
        }
    });
});

Where filterProperty is a select-field:

<select class="form-control" ng-model="filterProperty">
    <option value="">All</option>
    <option value="Name">Name</option>
    <option value="Description">Description</option>
    <option value="Area">Area</option>
    <option value="Population">Population</option>
    <option value="TimeZone">Time Zone</option>
</select>

[torsten-sauer]

Doesn't look to bad ;-)

[torsten-sauer]

You need a variable named filterString inside your scope you include the tree (see first post on this thread, there is an example with an input field and ng-model that should work)

[reem80]

Hi SoftCreatR,

do you have any plnkr or jsfiddle? I want to add afilter for each column in my tree. I though to manipulate the filterable for all other columns to be false when the input field for the search column is filled. It will help to see your code working. Thanks a lot!