jQuery UI Widgets Forums Grid How to apply filter on event change

This topic contains 2 replies, has 2 voices, and was last updated by  Hristo 5 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • How to apply filter on event change #102967

    sonu
    Participant

    I’m using jqxgrid with initial filter onready function.

    ready: function () {
       addfilter()
    },

    When the grid is load so addfilter is applied and in addfilter function i have checked the status column filteritems values. This is ok for me but i need to change the grid based on event . lets suppose i have a button when i click on button i have update the filteritems source and grid is loaded but in status column filteritems checked box is not checked and grid is not loaded. So based on some event how to addfilter again to the grid.

    This is my change event.

    $('#quickFilter').change(function () {
        var selectedVal = this.value
        var objd = JSON.parse(filterData);
        let defaultData = findObjectByKey(objd, 'name', selectedVal);
        //console.log(defaultData.conditions);
        source.data = {
          params: {
            conditions: defaultData.conditions,
            retailer_id: [1, 2, 4, 5, 12, 20, 23, 24],
            is_sandbox_on: [0]
          }
        }
        html = '';
        repairerSource.localdata = defaultData.repairer_status;
        //alert(JSON.stringify(repairerSource.localdata));
        $('#jqxgrid').jqxGrid('setcolumnproperty', 'repairer_status', 'filteritems', repairerSource.localdata);
        $('#jqxgrid').jqxGrid('updatebounddata','data')
        $('#jqxgrid').jqxGrid('refreshfilterrow')
      })

    on change event i have update the array in repairerSource and it will also reflect in status coloumn . But in addfilter i wrote a code to select all status checkbox but it’s not working.

    `var addfilter = function () {
    var filtergroup = new $.jqx.filter();
    var repLen = repairerSource.localdata;
    for (var j = 0; j < repLen.length; j++) {
    var filter_or_operator = 1;
    var filtervalue = repLen[j].label;
    var filtercondition = ‘equal’;
    var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter);
    }
    $(“#jqxgrid”).jqxGrid(‘addfilter’, ‘repairer_status’, filtergroup);
    $(“#jqxgrid”).jqxGrid(‘applyfilters’);
    }`

    {
              text: 'Status',
              datafield: 'repairer_status',
              filtertype: 'checkedlist',
              filteritems: new $.jqx.dataAdapter(repairerSource),
              cellsalign: 'center',
              createfilterwidget: (column, htmlElement, editor) => {
                editor.jqxDropDownList(
                  {displayMember: 'label', valueMember: 'value'})
              },
    }

    So i want to checked all status checkboxes and the grid should display the records but it works only page load. so how i apply filter onchange event.

    How to apply filter on event change #102973

    sonu
    Participant

    when i add addfilter under click event . so it give me error like

    jqxgrid.filter.js:8 Uncaught Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

    $(‘#quickFilter’).change(function () {
    var source =
    {
    datafields:
    [
    …..
    ]
    };

    $(‘#jqxgrid’).jqxGrid(‘setcolumnproperty’, ‘repairer_status’, ‘filteritems’, repairerSource.localdata);
    addfilter()
    });

    How to apply filter on event change #103025

    Hristo
    Participant

    Hello sonu,

    You could try to bind to the “bindingcomplete” event with a boolean flag to choose the right moment.
    Also, it should be bind to this event before the Grid’s initialization.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.