Vue Data GridUpgrading to AG Grid 34

New Filters Tool Panel, Cell Editor Validation, Batch Editing, Date Picker Time Support, Tree Data Row Dragging.

What's New Copy Link

AG Grid 34.0 adds important new features – New Filters Tool Panel, Cell Editor Validation, Batch Editing, Date Picker Time Support, Tree Data Row Dragging, as described in the release post.

These improvements involve no breaking changes as listed below.

Breaking Changes Copy Link

There are no breaking changes in AG Grid version 34.0.

Behaviour Changes Copy Link

There are no behaviour changes in AG Grid version 34.0.

Removal of Deprecated APIs Copy Link

There are no deprecated API removals in AG Grid version 34.0.

Deprecations Copy Link

Grid Options Copy Link

suppressAdvancedFilterEval is deprecated without replacement. No longer using eval at all in advanced filters so this is now default behaviour. This improves security by not requiring script-src 'unsafe-eval' for advanced filters.

Filters Copy Link

ISetFilter interface is deprecated. When retrieving via api.getColumnFilterInstance(column), use SetFilterUi. To access the methods that were previously available on ISetFilter (but not on SetFilterUi), instead retrieve the filter handler via api.getColumnFilterHandler(column) and use the SetFilterHandler interface.
getModel() and setModel() on all grid-provided filter instances are deprecated. Use api.getColumnFilterModel(column) and api.setColumnFilterModel(column) instead.

Migrating to Filter Handlers

Filter Handlers simplify custom filter components by splitting the filter logic out from the UI component. They also enable new features such as the New Filters Tool Panel.

See Custom Filter Components for the full guide on using filter handlers.

To migrate a custom filter component, firstly move the logic from the doesFilterPass method inside the filter component to a callback in the column definition.

Old:

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    {
        filter: CustomFilter,
        // other props
    }
];

New:

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    {
        filter: {
            component: CustomFilter,
            doesFilterPass: (params) => {
                // filter logic
            }
        },
        // other props
    }
];

Properties access from the component props can now be accessed from the parameters passed to doesFilterPass.

See Filter Logic for more information, including handling more advanced cases.

The doesFilterPass, getModel, setModel and isFilterActive methods can all be removed from the component. The filter is now treated as active when the model is not null. The filter model is provided to the component via the model parameter (which is updated after any change via the refresh method), and changes to the model are passed back to the grid via onModelChange(model).

See Custom Filter Parameters for more information.

To enable custom filter components to work with Filter Buttons (including apply), use the state.model and onStateChange({ model }) parameters instead of model and onModelChange(model). See Using Buttons for more information.

Changes List Copy Link

See the full list of changes in the AG Grid 34.0 changelog.

Getting Started

Layout & Styling

Charting

Core Features

Advanced Features