How to Load Full Dataset Column Filters in Server-Paged FlexGrid with AJAX

When implementing client-side AJAX calls or manual server-side pagination with FlexGrid, opening a column filter only displays unique values for the items currently loaded on the active page. Because the grid only has access to the current page's dataset in local memory, users cannot filter across the entire dataset.

Solution
There are two primary approaches to ensure column filters display all unique values across your entire database rather than just the current page:

Option 1: Use RemoteBinding (Recommended)

The cleanest way to handle complete server-side pagination, sorting, and filtering is to use RemoteBind. This handles all request callbacks internally, automatically synchronizing column filter values with your server data source.

Option 2: Custom AJAX Filtering Events

If you prefer managing AJAX calls manually, you can populate the column filter's uniqueValues property dynamically using the filterChanging and filterApplied events of the FlexGridFilter:

1. Populate Filter Values (filterChanging): Intercept the filter opening action, fetch your full list of unique values (via AJAX or local array), and assign them to col.valueFilter.uniqueValues.

2. Apply Server-Side Filtering (filterApplied): Extract the filter criteria using filterDefinition and issue an AJAX request to fetch the filtered dataset back into the grid's CollectionView.

<script type="text/javascript">
    var _firstLoad= true;
    function changingFilter(s,e){
        var _ranks = [];
        for(var i=0;i<50;i++){
            _ranks.push(i);
        }
        var col= s.getColumnFilter(e.col);
        console.log(col,_ranks);
        col.valueFilter.uniqueValues = _ranks;
        if(_firstLoad){
            setTimeout(function(){
                s.closeEditor();
                s.editColumnFilter(e.col);
            },10);
            _firstLoad=false;
        }       
    }
    
    function appliedFilter(s, e) {
        var grid = s.grid;
        var cv = grid.collectionView;
        var filterDef = s.filterDefinition;
        console.log(filterDef);
        // reload data here based on filter definition
    }
</script>

<c1-flex-grid id="main_grid" is-read-only="true" selection-mode="None" sorting-type="None" auto-generate-columns="false" headers-visibility="Column">
    <c1-flex-grid-column binding="Name" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Rank" width="*"></c1-flex-grid-column>
    <c1-flex-grid-filter filter-changing="changingFilter"  filter-applied="appliedFilter"></c1-flex-grid-filter>
</c1-flex-grid>