ui grid filtering dropdown

Question

The data in my columns (provided by dropdown) and the filter of a column should match. So I use the same array to populate both. However for the data I can tell ui grid the field names to use for editDropdownValueLabel and editDropdownIdLabel. Is there such a thing for the filter property?

I ask because I'm setting the cell data dropdown values and the filter from an array retrieved from a web api call and my cell data dropdown is populated correctly but my filters all say 'undefined', which leads me to believe it doesn't know what field in the selectOptions array property to use.

When I define my grid I leave out the arrays for the cell and filter as I'll populate that when the web api call returns with that data.

{
    name: 'Status',
    field: 'Status',
    width: 200,
    editType: 'dropdown',
    editableCellTemplate: 'ui-grid/dropdownEditor',
    editDropdownIdLabel: 'Value',
    editDropdownValueLabel: 'Value',
    filter: {
        type: uiGridConstants.filter.SELECT,
        condition: uiGridConstants.filter.EXACT
    }
}

How I populate both the cell dropdown and filter dropdown from web api data.

$scope.gridStore.columnDefs[i].editDropdownOptionsArray = response.data[colFieldName];
$scope.gridStore.columnDefs[i].filter.selectOptions = response.data[colFieldName];

score 1 · Answer 1 · answered Feb 03 '17 at 22:02

1

A neat feature I use when dealing with dropdowns on ui grids is that I treat them like they're always dynamic so I no longer have to deal with OptionsArray, filters, labels and so on (which is a pain with dynamic data).

Just something to look into when you plan on expanding your knowledge in angular ui grid.

HTML:

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

Controller:

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      },
      { field: 'gender', editType: 'dropdown', enableCellEdit: true,
          editableCellTemplate: 'temp.html' },
      { field: 'company', enableSorting: false }
]};

temp.html:

<div>
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

answered Feb 03 '17 at 22:02

McMintz

254
6
19

This work well when you have a few columns, but I have about 15 and would hate to have an htm file for each one. It's actually less code, or should be, with filling in options array. Any idea how to go that route? – user441521 Feb 20 '17 at 21:24
Have you tried using filter method in your dataset? https://docs.angularjs.org/api/ng/filter/filter check this out - this may help. – PKA Feb 21 '17 at 15:48
@KaushalPatel I guess I'm not sure where or why I'd use that? I have the arrays of data coming in just fine. It's just getting those arrays as the column filters that I need to show up. Right now they are showing all 'undefined' which seems like ui-grid can't figure out the the fields in the array objects to use as label/value. – user441521 Feb 21 '17 at 16:17
see I applied a new new html for each column. It allowed me to easily go and make my changes. But I did do this for a grid with few columns like you mentioned. – McMintz Feb 21 '17 at 17:23

score 1 · Accepted Answer · answered Feb 22 '17 at 16:34

Without seeing more of your code it's hard to say exactly what's happening, but in the following example I add the Status column definition dynamically.

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {

  $scope.myData = [{
    "Name": "Cox",
    "Number": 41,
    "Status": 1,
    "Date": "10/06/1981"
  }, {
    "Name": "Lorraine",
    "Number": 431,
    "Status": 2,
    "Date": "03/04/1983"
  }, {
    "Name": "Nancy",
    "Number": 341,
    "Status": 1,
    "Date": "10/06/1981"
  }];

  // grid setup
  $scope.gridStore = {
    data: $scope.myData,
    enableSorting: true,
    enableFiltering: true,
    flatEntityAccess: true,
    fastWatch: true,
    enableHorizontalScrollbar: 1,
    enableCellSelection: true,
    enableCellEditOnFocus: true,
    columnDefs: [{
        name: 'Number',
        field: 'Number',
        width: 100,
        pinnedLeft: true,
        enableCellEdit: false
      }, {
        name: 'Name',
        field: 'Name',
        width: 200,
        pinnedLeft: true,
        enableCellEdit: false
      }, {
        name: 'Date',
        field: 'Date',
        width: 100
      }
    ]
  };
  
  this.typeLookup = function (val, arr) {
    var result = arr.filter(function(v) {
        return v.id === val;
    })[0].type;

    return result;
  };


  /* simulate getting JSON settings data here ... */
  
  var jsonDef = { name: 'Status', field: 'Status', width: 150, editType: 'dropdown', editableCellTemplate: 'ui-grid/dropdownEditor', editDropdownIdLabel: 'id', editDropdownValueLabel: 'type', filter: { type: uiGridConstants.filter.SELECT, condition: uiGridConstants.filter.EXACT } };

  var options = [{
    id: 1,
    type: 'Closed'
  }, {
    id: 2,
    type: 'Pending'
  }, {
    id: 3,
    type: 'Open'
  }];

  $scope.gridStore.columnDefs.push(jsonDef);
  
  var idx = $scope.gridStore.columnDefs.length - 1;
  
  $scope.gridStore.columnDefs[idx].cellTemplate = '<div class="ui-grid-cell-contents">{{ grid.appScope.Main.typeLookup(COL_FIELD,' + JSON.stringify(options) + ') }}</div>';
  $scope.gridStore.columnDefs[idx].editDropdownOptionsArray = options;
  $scope.gridStore.columnDefs[idx].filter.selectOptions = options.map(function(obj) { 
    var rObj = {'value': obj.id, 'label': obj.type};
    return rObj;
  });
  
  /* end simulated JSON retrieval */

}]);

.grid {
  height: 200px;
}

<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="http://ui-grid.info/release/ui-grid.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>

  <div ng-controller="MainCtrl as Main">
    <div id="grid1" ui-grid="gridStore" ui-grid-edit class="grid"></div>
  </div>

</body>

</html>

If my data coming back from the api call has propeties of label and value then it works. I didn't realize that's the properties that ui-grid is looking for. Lower case as well. This lead to the answer so you get the credit. Thanks! — user441521, Feb 23 '17 at 21:20

ui grid filtering dropdown

2 Answers2

Linked