javascript - ag-grid enterprise filter not working

Question

This is my javascript code, where I'm using ag-grid.

 var columnDefs = [
     {headerName: "CLIENT", field: "CLIENT_ACRONYM", width: 150, unSortIcon: true},
    {headerName: "SYM", field: "SYM", width: 150, unSortIcon: true, filter: 'set'},
    {headerName: "SECURITY ID", field: "SECURITY_ID", width: 150, unSortIcon: true, filter: 'set'},
    {headerName: "SIDE", field: "SIDE", width: 150, unSortIcon: true, filter: 'set'},
    {headerName: "ORDER Qty", field: "ORDER_QTY", width: 150, unSortIcon: true, cellStyle:{"text-align":"right"}},
    {headerName: "EXEC Qty", field: "EXEC_QTY", width: 120, unSortIcon: true, cellStyle:{"text-align":"right"}},
    {headerName: "ENTERING_TRADER", field: "ENTERING_TRADER", width: 150, unSortIcon: true},
    {headerName: "EXECUTING TRADER", field: "EXECUTING_TRADER", width: 150, unSortIcon: true},
    {headerName: "ORDER ID", field: "ORDER_ID", width: 150, unSortIcon: true, cellStyle:{"text-align":"center"}},
    {headerName: "URGENCY", field: "URGENCY", width: 150, unSortIcon: true},
    {headerName: "PARTICIPATION RATE", field: "PARTICIPATION_RATE", width: 150, unSortIcon: true},
    {headerName: "VOLUME LIMIT", field: "VOLUME_LIMIT", width: 150, unSortIcon: true},
    {headerName: "EXECUTION STYLE", field: "EXECUTION_STYLE", width: 150, unSortIcon: true},
    {headerName: "TOLERANCE", field: "TOLERANCE", width: 150, unSortIcon: true},
    {headerName: "CCY", field: "ORDER_CCY", width: 150, unSortIcon: true},
    {headerName: "ROOT ORDER ID", field: "ROOT_ORDER_ID", width: 150, unSortIcon: true, cellStyle:{"text-align":"right"}},
    {headerName: "COMPLIANCE ID", field: "COMPLIANCE_ID", width: 150, unSortIcon: true},
    {headerName: "CL ORD ID", field: "CL_ORD_ID", width: 150, unSortIcon: true},
    //{headerName: "Date", field: "date", width: 110, comparator: dateComparator}



];




function dateComparator(date1, date2) {
    var date1Number = monthToComparableNumber(date1);
    var date2Number = monthToComparableNumber(date2);

    if (date1Number===null && date2Number===null) {
        return 0;
    }
    if (date1Number===null) {
        return -1;
    }
    if (date2Number===null) {
        return 1;
    }

    return date1Number - date2Number;
}

//2016-09-06 05:59:57.844 to 20160906055957844
function monthToComparableNumber(date) {
    if (date === undefined || date === null || date.length !== 10) {
        return null;
    }

    var yearNumber = date.substring(0,4);
    var monthNumber = date.substring(5,7);
    var dayNumber = date.substring(8,10);
    var hourNumber = date.substring(11,13);
    var minuteNumber = date.substring(14,16);
    var secondNumber = date.substring(16,18);
    var milisecondNumber = date.substring(19,22);

    var result = (yearNumber*10000000000000) + (monthNumber*100000000000) + (dayNumber*1000000000) + (hourNumber*10000000) + (minuteNumber*100000) + (secondNumber*1000) + milisecondNumber;
    return result;
}



var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true,
    rowModelType: 'virtual',
    paginationPageSize: 100,
    paginationOverflowSize: 2,
    maxConcurrentDatasourceRequests: 2,
    paginationInitialRowCount: 1,
    maxPagesInCache: 2,
    enableServerSideSorting: true,
    enableServerSideFilter: true,
    enableColResize: true,
    rowSelection: 'single',
    rowDeselection: true



};

function buyside() {
    var filterApi = gridOptions.api.getFilterApi('SIDE');
    filterApi.selectNothing();
    filterApi.selectValue('Buy');
    //filterApi.selectValue('Great Britain');
    gridOptions.api.onFilterChanged();
}

function sellside() {
    var filterApi = gridOptions.api.getFilterApi('SIDE');
    filterApi.selectNothing();
    filterApi.selectValue('Sell');
    //filterApi.selectValue('Great Britain');
    gridOptions.api.onFilterChanged();
}


function clearFilters() {
    gridOptions.api.setFilterModel(null);
    gridOptions.api.onFilterChanged();
}




// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var jsondata = document.getElementById("jsonArray");
    //var jsondata = document.getElementById("jsonArray").innerText;
    //var jsondataObj = JSON.parse(jsondata);

    console.log(jsondata);
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', '../dist/output3.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var httpResult = JSON.parse(httpRequest.responseText);


            function isNumeric(n) { 
                return !isNaN(parseFloat(n)) && isFinite(n);
            }

            var parsedData = httpResult.products.map(function(obj) {
                return Object.keys(obj).reduce(function(memo, key) {
                    var value = obj[key];
                    memo[key] = isNumeric(value) ? Number(value) : value;

                    return memo;
                }, {})
            })

            console.log(parsedData);

            gridOptions.api.setRowData(parsedData);
        } 
    };
});

But, I'm getting error: cannot call setRowData unless using normal model (not ag-grid enterprise). However, in this example: https://www.ag-grid.com/javascript-grid-virtual-paging/ https://www.ag-grid.com/javascript-grid-virtual-paging/virtualPagingServerSide.html

They are using ag-grid enterprise only and its working. Why is it not working in my case?

Answer 1

The "normal model" that is being referred to is the rowModelType, not whether you are on enterprise or not. You are setting rowModelType to 'virtual'. The example that you referred to creates a function called setRowData, however it never actually calls the api defined setRowData function. Instead it uses gridOptions.api.setDatasource() as it explained in the example that you linked previously.

So the changes that you would need to make are:

var gridOptions = {
    columnDefs: columnDefs,
    rowData: null, //null is the default value you could remove this
    ...
};
...
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {

        ...yada yada yada...

            console.log(parsedData);

            gridOptions.api.setDatasource(parsedData);
        } 
    };
});