Filter input not working

[gerrywParticipant]

Hi,
I’m trying to get a grid filter working. I basically want to filter all columns based on the text in a jqxinput. What am I doing wrong?

 $("#filter-input").jqxInput({
    placeHolder: "Enter filter text", 
    height: 25, 
    minLength: 1});

  // Initialize jqxGrid
  $("#jqxgrid").jqxGrid({
    width: '100%',
    height: '100%',
    source: dataAdapter,
    columnsresize: true,
    filterable: true,
    theme: "metro",
    columns: [...]
  });

 // Filter input handling
  $('#filter-input').on('input', function () {
    var searchText = $(this).val().toLowerCase();
    $("#jqxgrid").jqxGrid('clearfilters');
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;

    source.datafields.forEach(function (field) {
      var filtervalue = searchText;
      var filtercondition = 'contains';
      var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
      filtergroup.addfilter(filter_or_operator, filter);
    });

      $("#jqxgrid").jqxGrid('addfilter', 'name', filtergroup);
      $("#jqxgrid").jqxGrid('applyfilters');
      alert("filter")
  });

Thanks,
-G

[adminKeymaster]

Hi,

This is already built-in and supported by jqxGrid. Please, take a look at https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filterall.htm?fluent

Hope this helps.

Best regards,
Peter Stoev

JQWidgets Team
https://www.jqwidgets.com/

[gerrywParticipant]

Hi,

That worked. Thanks! Is there a way to resize the search field and add a button to the filter bar?

Thanks,
-G

[adminKeymaster]

Hi,

This is possible with this code: .jqx-grid .jqx-input-group-addon { width: 300px; }

Best regards,
Peter Stoev

JQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts