Example of key:value use in a pqSelect-filtered column on infinite-rows grid

[orlando_acevedo]

Is there a good example of how to use a key:value pair list to show a pqSelect-filtered column in an infinite-row grid?

For example:
Let's say I have a table with a column called State with each state's two-character abbreviation. I also have a JSON key:value pair array (2-char-abbreviation: State-Name) of all states.
I want to only show the state name, not the abbreviation, but be able to use pqSelect to pick multiple States' names and filter by abbreviation on the database accordingly.


Thank you,

Orlando.

[paramvir]

Not exact but there are examples which would help to accomplish it.

1.  API and format of select list options are similar for filters and editor.
This example shows how to use key value pairs in select list / pqSelect ( Ship Via column): https://paramquery.com/pro/demos/editing_custom


2. Since you mentioned infinite scrolling grid, you would need to make separate ajax request to pull options for the select list and fill them in select list after initialization of grid ( use complete event ):

Code: [Select]

$.getJSON(url, function( data ){
            var column = grid.getColumn({ dataIndx: "ShipRegion" });
            var filter = column.filter;
            filter.cache = null;
            filter.options = data;
            grid.refreshHeader();
});

3. This example shows how to use pqSelect in filter init event ( ShipRegion column )
https://paramquery.com/pro/demos/filter_header_local


4. When an option is selected in filter drop down, its value (key) is posted to the server.
This example shows how to handle filtering in remote scripts.
https://paramquery.com/pro/demos/filter_header

5. Filtering, sorting and paging need to be combined in remote script for infinite scrolling grid.
https://paramquery.com/pro/demos/infinite_scroll