jQuery UI Widgets Forums Grid How to filter a column from a radio or button?

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author

  • jdh
    Participant

    This seems like there should be a quick and simple solution to this, but I’ve been working on it for hours and haven’t been able to put together anything that works.
    My grid has a hidden column by which is a boolean column to change the view of the table. As an example, pretend it’s a Color column that can be either ‘white’ or ‘black’. Being that it’s the primary way to filter the data, I have two buttons outside the table, one says ‘White’ and one says ‘Black’ that call a filter function and pass in the value. I just want to filter the data by that value for that Color column.

    It seems like there should just be some way to do a POJS filter() on the data object for the table, but I haven’t found any examples to help guide me in the right code to use.


    Hristo
    Participant

    Hello jdh,

    If you want to filter boolean value programmatically you could set the relevant “filtertype” – booelanfilter in this case.
    Please, take a look at this example:
    http://jsfiddle.net/jqwidgets/P7BCs/
    You could use this approach and filter with a string value or boolean value with correct filtertype and filtervalue.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    jdh
    Participant

    I had already gone down that route, and I guess I’ll have to keep trying it; it just seemed like the wrong path to need 15 lines of code just to say “filter column X by value Y.”

    I had tried something like this, which is the interface I want and that makes sense intuitively, but this didn’t work:

    
        let filteredData = Object.apply({}, this.source);
        filteredData.localData = this.source.localData.filter(rec => {
          if(status) {
            return rec.rejected === 'Y';
          } else {
            return rec.reject !== 'Y';
          }
        });
        this.dataAdapter = new jqx.dataAdapter(filteredData);
    
    
    • This reply was modified 6 years, 9 months ago by  jdh. Reason: add sample code

    Hristo
    Participant

    Hello jdh,

    About that you try, where you want to create a new datafield I would like to suggest you use “beforeLoadComplete” callback of the jqxDataAdapter.
    Please, take a look at this demo, it demonstrates how to use ‘beforeLoadComplete’:
    https://www.jqwidgets.com/angular/angular-grid/angular-grid-keysvaluescolumn.htm

    Also, I would suggest you and this example: http://jsfiddle.net/69tounht/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    jdh
    Participant

    @hristo: it appears that computed columns are not filterable; can you confirm that? If that’s true, it’s not much use to me, since I would use it to make a 3-option field just 2 options, e.g. a field that can be Yes, No, or null, but No and null should be considered equivalent.
    http://jsfiddle.net/p8nLudph/


    Hristo
    Participant

    Hello yougotnet,

    You should customize this column. In the presented example for the “Av2” column, there is used “cellsrenderer” and this column is just imaginary.
    Another option that I mentioned is to use beforeLoadComplete callback in the DataAdapter and there you can set desired values for each one records.
    Also, you need to treat as a column from type string.
    Please, take a look at this example: http://jsfiddle.net/0y6xku69/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    jdh
    Participant

    Thanks, that’s helpful.
    I took the liberty of simplifying that example for anyone else that finds this post later: http://jsfiddle.net/jdhines/o77ytroy/

    The link above had some irrelevant code and was duplicating every row, but also only applying Yes/No every 5th row.

    • This reply was modified 6 years, 8 months ago by  jdh. Reason: Change fiddle link

    jdh
    Participant

    Is there a way to rebind in the course of action? Taking the above example, if the Available column changes programatically, how to make the computed column update?


    Hristo
    Participant

    Hello jdh,

    Could you clarify it, what you mean with this “how to make the computed column”?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.