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.

@c0bra can you please have a look at this thanks. – Lakshmi Jul 21 '14 at 05:12 — Lakshmi, Jul 21 '14 at 05:12

score 1 · Accepted Answer · answered Jul 21 '14 at 07:32

try this:

first of all move your select box under the scope of the same controller where you have your grid
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 :)

Ng-grid external filter using select

1 Answers1