Angularjs ui-grid Filter from text input field

Question

Maybe somebody can help me with a little problem. I am pretty new in the field of web programming, but I have programming experience. I would like to develop a small website that uses angularjs and ui-grid. Unfortunately the filtering is not working from external input fields.

Could somebody please tell me where my programming bug is?

The code can be found here: http://plnkr.co/edit/fiA666OzpBqpTrCiuXER?p=preview

    var myDummyData = [{name: "Moroni", age: 50},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34}];
    var myDummyData2 = [{name: "aTest", age: 50},
        {name: "bTest1", age: 43},
        {name: "cTest2", age: 27},
        {name: "dTest3", age: 29},
        {name: "eTest4", age: 34}];

    $scope.filterOptions = {
        filterText: ''
    };

    $scope.gridOpts = {
        data: myDummyData,
        enableFiltering: true,
        columnDefs: [
                    {name: 'Name', field: 'name', enableFiltering: true
                        , filter: {
                            term: $scope.filterOptions.filterText //DOES NOT WORK... BUT WHY
                        }
                    },
                    {name: 'Price', field: 'age'}
                ]
    };


    $scope.updateData = function(newValue){
         //console.log($scope.gridOpts.data);

         console.log($scope.gridOpts.columnDefs[0].filter);
         $scope.gridOpts.columnDefs[0].filter = {term: newValue};
         console.log("Scope nameid set " + $scope.gridOpts.columnDefs[0].filter.term); //is set but no update
         //$scope.$apply(); //not possible gives error! WHY??


         //$scope.gridOpts.data = myDummyData; //for testing works
    };


    $scope.swapData = function () {
        if ($scope.gridOpts.data === myDummyData) {
            $scope.gridOpts.data = myDummyData2;
        }
        else {
            $scope.gridOpts.data = myDummyData;
        }
    };

    //DOES NOT WORK BUT WHY
//        $scope.$watch('filterOptions.filterText', function (newValue, oldValue) {
//            if ($scope.filterOptions.filterText) {
//                $scope.filteringText = newValue;
//                $scope.updateData(newValue);
//            }
//        });

The idea is to have a navigation bar that contains a search field. Later I want to filter depending on rangesliders on further columns. However not even the standard string filtering works in my example.

Questions:

1. Could somebody tell me where my current problem is? More specifically: Why does the filtering from external input fields not work?
2. The other question is how can I bind min and max values of range sliders to e.g. the age column in my example? (directly related to the binding problem in question (1))

I looked around for answers, but either this is directly a problem of the binding that I cannot grasp, a mere programming js problem, or a ngGrid update to ui-grid problem.

Thanks a lot in advance

Durtschi

I found that this is apparently a ui-grid problem. Or my interpretation of it. – Durtschi

Answer 1

The answer to your first question, they have not really made a global search option for the UI-Grid yet, so you have to do a bit of a work around. The current way that the column filters work is angular watches the column filter input field for a change, and when you type in the box, it refreshes its filter. So your filter will not apply unless you force this input box to fire the change event. The workaround is to simply filter the data and reload. For example:

In your HTML input search box, add a refresh

<input ng-model="searchText" ng-change="refreshData()" placeholder="Search...">

then in your app.js

$scope.refreshData = function() {
  $scope.myGrid.data = $filter('filter')($scope.data, $scope.searchText);
};

oh, and don't forget to include $filter in your controller

app.controller('myController', function($scope, $filter) {}

I forked your example and modified it with this workaround. Check it out here: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

Vinnie

Great Answer. Is it possible to make it specific to columns. Like i have 2 input search boxes with one search for name and another search for price. – Cheloid

As I'm new to ui-grid I'm not sure which I more "proper" (and less likely to mess with the built in stuff) but I'm handling this by setting a "visible" flag on each row to false if it doesn't match my search in any of the columns. ui-grid seems to respect the flag. Just wanted to present an alternative solution – Cowlick

I have a question. How about if I'm trying to get the text for the filters that are in place already. I want to capture the input text in the current filters instead of creating a new one. – Zerla

why passing "undefined" as a parameter if it's going to be undefined anyway if you dont pass it? – Richert

@ArtSerebryakov You are correct, I wrote this quite a while ago, and I can't remember what I was thinking. Thanks for the catch, I updated the example. – Vinnie

This is not working when i am using 2 ng-model to filter with grid, can you please update the code? to work with 2 or more ng-model searches? – Quantitative

Answer 2

try this:

$scope.gridOpts = {
    data: myDummyData,
    enableFiltering: true,
    columnDefs: [
                {name: 'Name', field: 'name', enableFiltering: true
                    , filter: {
                        noTerm: true,
                        condition: function(searchTerm, cellValue) {
                            return (cellValue+"" === $scope.filterOptions.filterText+"");
                        }
                    }
                },
                {name: 'Price', field: 'age'}
            ]
};

for input box: <input ng-model="searchText" ng-change="refresh()" placeholder="Search...">

$scope.refresh = function()
{
    $scope.gridApi.core.refresh();
}

I hope it works...

Obituary

gridApi.core.refresh() was what helped me. Thanks! – Urtication

Answer 3

There is a simple way to filter on ui-grid. In HTML

<input type="text" ng-model="searchText" ng-change="refreshData()" />

In your js file

 app.controller('myController', function($scope, $filter) {
        $scope.refreshData = function () {
            $scope.myGrid.data = $filter('filter')($scope.myGridData, $scope.searchText);
        }

        $scope.myGrid = { ... }

        $scope.dataBindingWithGrid = function () { 
            ...
            $scope.myGridData = data;
            $scope.myGrid.data = data;
            ...
        }
        ...
        ...
 }

Girard