angular-ui / ui-grid

UI Grid: an Angular Data Grid
http://ui-grid.info
MIT License
5.39k stars 2.46k forks source link

Are there plans to support date or numeric ranges for filtering? #3231

Closed rddolan closed 9 years ago

rddolan commented 9 years ago

My question is two fold:

1) My company has an existing grid that provides filtering based on type: date range, number range, string contains, starts with, etc..., boolean true/false, or an option list. Is it necessary to override the header template in order to add a date widget? Would it be possible to attach 2 widgets to the header to enable range filtering?

2) Is there a specific JSON interface for external filtering?

Thanks

PaulL1 commented 9 years ago

The current ui-grid supports date ranges, number ranges, contains, starts with.

Currently you do need to override the header template if you want to use a filter field other than a dropdown or input box. You shouldn't need to attach two widgets, the logic already provides for that if you attach to it properly.

There is no json interface for external filtering, external filtering relies on events to tell you that the filter criteria have changed, and you then manipulating the data object to present the grid with the filtered data.

Refer http://ui-grid.info/docs/#/tutorial/103_filtering

cmolina commented 9 years ago

I am following this guide to make a header for filtering boolean values (so you click a checkbox instead of writing "true" in an input). http://stackoverflow.com/a/27695238/1419402

The problem is that it seems impossible to filter for "false". I mean, if the filter is checked, then it shows true values as expected; but when unchecked, the filter disappear and shows all the elements.

I am using v3.0 rc 20. Any thoughts?

rddolan commented 9 years ago

camolin, I have also seen this issue trying to modify the header templates.

It seems like it is too easy to break the functionality of the grid when editing these - so maybe type handling should be better supported by the API to prevent issues like this?

I'm sure it's a simple bug to fix in the template; but to have to dig through code each time you want to modify the cell template or header seems like a lot of extra work.

To be fair, I haven't tried Paul's suggestion yet to use the public API to create the grid menu. It's on my TODO list for work.

-ryan

PaulL1 commented 9 years ago

The latest unstable supports customising the filters (http://ui-grid.info/docs/#/tutorial/308_external_filtering). I think bug with filtering for false was also fixed in a recent PR: #3211

PaulL1 commented 9 years ago

No further comment for over a month, solution provided that probably resolves the issue. Closing, please re-raise if there is a reliable recreate or more information.

shrutika-narayana commented 8 years ago

I am using angular along with UI grid for a project. I need to filter out the grid based on which checkbox I select.The checkboxes are outside the grid. Have been trying to bind a checkbox to a column filter as follows:

HTML code <!doctype html>

```



```

javascript

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

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

$scope.gridOptions = {
    modifierKeysToMultiSelectCells: true,
    enableRowSelection: true,
    enableFiltering: true,
    //enableFullRowSelection: true,
    //enableRowHeaderSelection :true,
    showGridFooter: true,
    enableCellEditOnFocus: true
};

$scope.gridOptions.columnDefs = [

{ name: 'id', width: '5%' }, //customized styling //can use a special_flag variable in incoming json data to style { name: 'name', width: '15%', cellTemplate: '

{{COL_FIELD}}
' }, { name: 'age', displayName: 'Age', allowCellFocus: false, width: '5%' }, { name: 'address.city', width: '10%' }, { name: 'R', width: '3%', type: 'boolean', cellTemplate: '' }, { name: 'phone', width: '12%' }, { name: 'company', width: '7%' }, { name: 'email', width: '17%' }, { name: 'balance', width: '8%', enableCellEdit: true }, //adding event to column { name: 'guid', field: 'guid', cellTemplate: '
{{COL_FIELD}}
' },

];
$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
};

$scope.state = false;
$scope.onClick = function (state) {
    if (state == true)

      grid.columns[1].filters[0].term = l1.text;

    };

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
  .success(function (data) {
      $scope.gridOptions.data = data;
  });

}]);

can someone please help me out with this

sanjeevkumarthakur commented 8 years ago

Hi, I am working on ng-grid-2.0.11.js. Is it support numeric ranges for filtering over column ex: <50, >50 . If yes, Can someone provide me sample snippet for this.

Thanks in advance, Sanjeev