CODEWITHSUNDEEP
javascriptdrop-down-menuag-grid
Mario Andrade
Mario Andrade

Reputation: 515

Ag-grid filter Dropdown Options

I have a grid with several columns and the column "Vehicle" of the columns has the options presented in a dropdown menu (html select element). I also have an input type text where the user can type a string.

I want to filter all the Dropdowns options in the Vehicle column according to the string the inserted by the user in the input field.

For example:

Dropdown has 4 options:

If the user types "car" in the input the input, the Dropdown should show only the options with Car (Car 1, Car 2).

I do not want to affect rows. Just the dropdown options, of all the dropdowns, in the Vechicle column.

I am unable to provide the code due to restrictions.

How may I achieve this using vanilla JavaScript?

Thanks in advance.

Upvotes: 2

Views: 5055

Answers (1)

Mario Andrade
Mario Andrade

Reputation: 515

I know my question with no code was a bit abstract as I wanted some guidance rather than a straight answer.

Like I mentioned in the question I have a input field used to filter the options. If the user presses "Enter" an Ajax call is made to get filtered results from the database. The database returns a string containing a json object.

var httpRequest = new XMLHttpRequest();
var jsonData = null;
    httpRequest.onload = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                jsonData = json.parse(httpRequest.responseText);
            } else {
                jsonData = httpRequest.statusText;
            }
        }
    };

After this I use columnApi.getColumn("vehicles") to get the column I want to affect.

var col = gridOptions.columnApi.getColumn("vehicles");

With the the above code I can now use the cellEditorParams to change it's values:

col.colDef.cellEditorParams.values  = jsonData;

Hope this is useful to someone in the future.

Upvotes: 0

Related Questions