How to change the data source or columns dynamically in Vue Grid component

13 Apr 20235 minutes to read

The grid can be dynamically update the data source, columns, or both, using the changeDataSource method. However, it is important to note that during the changing process for the data source and columns, the grid’s existing actions such as sorting, filtering, grouping, aggregation, and searching will be removed. The changeDataSource method has two optional arguments, the first argument being the data source, and the second argument being the columns. So, you need to pass the two required arguments to the changeDataSource method. Some of the uses for using the changeDataSource method are explained in the topic below.

1. Change both data source and columns:

To modify both the existing columns and the data source, you need to pass the both arguments to the changeDataSource method. The following example demonstrates how to change both the data source and columns.

You can assign a JavaScript object array to the dataSource property to bind local data to the grid. The code below provides an example of how to create a data source for the grid.

    export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', Freight: 32.38,
        ShipCity: 'Reims'
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61,
        ShipCity: 'Münster'
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', Freight: 61.34,
        ShipCity: 'Rio de Janeiro'
    }];

The following code demonstrates how to create the columns for the grid, which are based on the provided grid data source.

    newcolumn: [
        { field: 'Freight', headerText: 'Employee ID', width: 120, textAlign: 'Right' },
        { field: 'ShipRegion', headerText: 'Ship City', width: 140 }
    ]

The following code demonstrates updating the data source and columns defined above using the changeDataSource method.

    this.$refs.gridInstance.changeDataSource(data, newColumn);

2. Modify only the existing columns:

To modify the existing columns in a grid, you can either add or remove columns or change the entire set of columns using the changeDataSource method. To use this method, you should set the first parameter to null and provide the new columns as the second parameter. However, please note that if a column field is not specified in the data source, its corresponding column values will be empty. The following example illustrates how to modify existing columns.

The following code demonstrates how to add new columns with existing grid columns (‘newColumn’) by using changeDataSource method.

    newcolumn: [
        { field: 'Freight', headerText: 'Employee ID', width: 120, textAlign: 'Right' },
        { field: 'ShipRegion', headerText: 'Ship City', width: 140 }
    ]
    let column: any = this.newColumn.push(...this.newColumn1);
    this.$refs.gridInstance.changeDataSource(null, column);

3. Modify only the data source:

You can change the entire data source in the grid using the changeDataSource method. To use this method, you should provide the data source as the first argument, and the second argument which is optional can be used to specify new columns for the grid. If you are not specifying the columns, the grid will generate the columns automatically based on the data source. The following example demonstrates how to modify the data source.

You can assign a JavaScript object array to the dataSource property to bind local data to the grid. The code below provides an example of how to create a new data source for the grid.

     export let employeeData: Object[] = [
    {
        FirstName: 'Nancy', City: 'Seattle', Region: 'WA',
        Country: 'USA'
    },
    {
        FirstName: 'Andrew', City: 'London', Region: null,
        Country: 'UK',
    },
    {
        FirstName: 'Janet', City: 'Kirkland', Region: 'WA',
        Country: 'USA'
    }];

The following code demonstrates, how to use the changeDataSource method to bind the new employeeData to the grid.

    this.$refs.gridInstance.changeDataSource(employeeData);

The Grid state persistence feature does not support the changeDataSource method.

In this document, the above sample uses the local data for changeDataSource method. For those using a remote data source, refer to the FlexibleData resource.