---
title: "Upgrading to AG Grid 34"
framework: vue
version: "36.1.0"
---

# Upgrading to AG Grid 34

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

## What's New

AG Grid 34.0 adds important new features – [New Filters Tool Panel](https://www.ag-grid.com/vue-data-grid/tool-panel-filters-new/), [Cell Editor Validation](https://www.ag-grid.com/vue-data-grid/cell-editing-validation/), [Batch Editing](https://www.ag-grid.com/vue-data-grid/cell-editing-batch/), [Date Picker Time Support](https://www.ag-grid.com/vue-data-grid/cell-data-types/#datetime), [Tree Data Row Dragging](https://www.ag-grid.com/vue-data-grid/tree-data-row-dragging/), as described in the [release post](https://blog.ag-grid.com/whats-new-in-ag-grid-34/).

These improvements involve no breaking changes as listed below.

## Documentation

[See AG Grid 34.0 Documentation](https://www.ag-grid.com/archive/34.0.2/documentation)

## Breaking Changes

There are no breaking changes in AG Grid version 34.0.

## Behaviour Changes

There are no behaviour changes in AG Grid version 34.0.

## Removal of Deprecated APIs

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

## Deprecations

### Grid Options

- `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

- `ISetFilter` interface is deprecated. When retrieving a Set Filter via `api.getColumnFilterInstance(column)`, use `SetFilterUi`. To access the methods that were previously available on `ISetFilter` (but not on `SetFilterUi`), instead retrieve the Set Filter Handler via `api.getColumnFilterHandler(column)` and use the `SetFilterHandler` interface. See [Set Filter API](https://www.ag-grid.com/vue-data-grid/filter-set-api/#set-filter-api) for more information.
- `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](https://www.ag-grid.com/vue-data-grid/tool-panel-filters-new/).

See [Custom Filter Components](https://www.ag-grid.com/vue-data-grid/component-filter/) 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:

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

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

New:

```ts
<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](https://www.ag-grid.com/vue-data-grid/component-filter/#doesfilterpass-callback).

See [Filter Logic](https://www.ag-grid.com/vue-data-grid/component-filter/#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](https://www.ag-grid.com/vue-data-grid/component-filter/#custom-filter-parameters) for more information.

To enable custom filter components to work with [Filter Buttons](https://www.ag-grid.com/vue-data-grid/filter-applying/) (including apply), use the `state.model` and `onStateChange({ model })` parameters instead of `model` and `onModelChange(model)`. See [Using Buttons](https://www.ag-grid.com/vue-data-grid/component-filter/#using-buttons) for more information.

## Changes List

[See the full changelog for v34.0.0](https://www.ag-grid.com/changelog/?fixVersion=34.0.0)