Ng-grid external filter using select

Question

Hi I am new to angular and im using ng-grid to display a set of table data. The issue im facing recently is that I need an external filter which is a select dropdown so based on the selected value i need to filter my data grid I searched a lot but couldn't get any solutions. Any help here will be appreciated. I tried even this solution How to filter my data? (ng-grid) of @cObra but not successful.

Here is my code

<select id="source" style="margin:5px" ng-model="sourceNameSelected"
ng-options="source.sourceName for source in lstsource.sources">
<option value="" selected>
 -- Select Source --
 </option>
</select>
<div id="leftJobManagerInfo" class="span8" >
<!-- <input type="text" ng-model="filterOptions.filterText" > -->

<div class="gridStyle" ng-grid="gridOptions" ng-controller="JobManagerController as jobManager" ></div>
</div>

in controller

$scope.gridOptions = { 

            data: 'jobs',
            enablePaging:true,
            columnDefs:[{field:"jobId",displayName:"Id",visible: false},
                     {field:"fileName",displayName:"File"},
                     {field:"sourceId",visible: false},
                     {field:"sourceName",displayName:"Source"},
                     {field:"groupId",visible:false},
                     {field:"groupName",displayName:"Group"},
                     {field:"status",displayName:"Status",cellTemplate:'views/templates/statusDisplayImageTemplate.html'},
                     {field:"time",displayName:"Time",cellTemplate: templateForWrappingData},
                     {field:"trigger",displayName:"Trigger"},
                     {field:"triggerBy",displayName:"Trigger By"},
                     {field:"arrivalTime",displayName:"Arrival Time",cellTemplate:templateForWrappingData},
                     {field:"server",displayName:"Server"}],
              filterOptions: {filterText: '',useExternalFilter: true},

        };

I also tried keeping an hidden input element and bind it to filterText like this

<input type="hidden" ng-model="filterOptions.filterText" ng-init="filterOptions.filterText=sourceNameSelected.sourceName">

but didn't work. Thanks a lot in advance.

Answer 1

try this:

1. first of all move your select box under the scope of the same controller where you have your grid

2. on chnage of select box reset the filterOptions.filterText (you can also assign it directly to the ng-model of select box as well, if you want)

HTML

<div id="leftJobManagerInfo" class="span8" ng-controller="JobManagerController">
    <select id="source" style="margin:5px" ng-model="sourceNameSelected" ng-options="source.sourceName for source in lstsource.sources" ng-change="filterOptions.filterText = sourceNameSelected.sourceName">
        <option value="" selected>
            -- Select Source --
        </option>
    </select>
<!-- <input type="text" ng-model="filterOptions.filterText" > -->

<div class="gridStyle" ng-grid="gridOptions"></div>
</div>

JobManagerController Controller

$scope.lstsource = //put your select box options list here
$scope.sourceNameSelected='';

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

$scope.gridOptions = { 

        data: 'jobs',
        enablePaging:true,
        columnDefs:[{field:"jobId",displayName:"Id",visible: false},
                 {field:"fileName",displayName:"File"},
                 {field:"sourceId",visible: false},
                 {field:"sourceName",displayName:"Source"},
                 {field:"groupId",visible:false},
                 {field:"groupName",displayName:"Group"},
                 {field:"status",displayName:"Status",cellTemplate:'views/templates/statusDisplayImageTemplate.html'},
                 {field:"time",displayName:"Time",cellTemplate: templateForWrappingData},
                 {field:"trigger",displayName:"Trigger"},
                 {field:"triggerBy",displayName:"Trigger By"},
                 {field:"arrivalTime",displayName:"Arrival Time",cellTemplate:templateForWrappingData},
                 {field:"server",displayName:"Server"}],
          filterOptions: {
                filterOptions : $scope.filterOptions,
                useExternalFilter: true
          },

    };

Hope it helps you :)