How to filter a column from a radio or button?

[jdhParticipant]

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.

[HristoParticipant]

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

[jdhParticipant]

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);

[HristoParticipant]

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

[jdhParticipant]

@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/

[HristoParticipant]

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

[jdhParticipant]

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.

[jdhParticipant]

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?

[HristoParticipant]

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

[Author]

Posts