Custom filter conditions for numeric filter

[SergioV85Participant]

Hi!
There is strange behavior for numeric filter element in filter row when using custom filter condition

Here is sample code

$(document).ready(function() {
  var loc = {
    filterstringcomparisonoperators: ['Contains', 'Does not contain', 'Empty', 'Not empty'],
    filternumericcomparisonoperators: ['Equal', 'Not equal', 'Null', 'Not null'],
    filterdatecomparisonoperators: ['less than', 'greater than'],
    filterbooleancomparisonoperators: ['Equal', 'Not equal']
  };
  var data = generatedata(500);
  var source = {
    localdata: data,
    datafields: [{
      name: 'name',
      type: 'string'
    }, {
      name: 'productname',
      type: 'string'
    }, {
      name: 'available',
      type: 'bool'
    }, {
      name: 'date',
      type: 'date'
    }, {
      name: 'quantity',
      type: 'number'
    }],
    datatype: "array"
  };

  var dataAdapter = new $.jqx.dataAdapter(source);

  $("#jqxgrid").jqxGrid({
      width: 850,
      source: dataAdapter,
      showfilterrow: true,
      filterable: true,
      localization: loc,
      selectionmode: 'multiplecellsextended',
      updatefilterconditions: function(type, defaultconditions) {
        var stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN', 'EMPTY', 'NOT_EMPTY'];
        var numericcomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'NULL', 'NOT_NULL'];
        var datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
        switch (type) {
          case 'stringfilter':
            return stringcomparisonoperators;
          case 'numericfilter':
            return numericcomparisonoperators;
          case 'datefilter':
            return datecomparisonoperators;
          case 'booleanfilter':
            return booleancomparisonoperators;
        }
      },
      columns: [{
        text: 'Name',
        columntype: 'textbox',
        filtertype: 'input',
        datafield: 'name',
        width: 215
      }, {
        text: 'Product',
        filtertype: 'checkedlist',
        datafield: 'productname',
        width: 220
      }, {
        text: 'Available',
        datafield: 'available',
        columntype: 'checkbox',
        filtertype: 'bool',
        width: 67
      }, {
        text: 'Ship Date',
        datafield: 'date',
        filtertype: 'range',
        width: 210,
        cellsalign: 'right',
        cellsformat: 'd'
      }, {
        text: 'Qty.',
        datafield: 'quantity',
        filtertype: 'number',
        cellsalign: 'right'
      }]
    })
    .on('filter', function(event) {
      console.log(event);
      $('#console').append('<p>Filtred</p>');
    });
});

Also, here is prepared http://jsfiddle.net/SergioV/7mjs3e9u/

As you can check, if change filter conditions in dropdowns, filter event fired for every selector, except numeric. This mean, that we can’t filter table with null values, for example

[ChristopherParticipant]

Hi SergioV85,

in order for your example to work properly, first you need to bind to the bindingcomplete event before the Grid’s initialization. Here is the example you provided with the needed corrections to make it work as expected:
http://jsfiddle.net/Xr4LS/125/
You can read more about how to add custom filtering to a grid, here:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-filtering.htm

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts