Files to look at:

dxDataGrid - How to implement cascading lookup columns

This example demonstrates how to implement cascading lookup columns using the dxDataGrid widget. To accomplish this task, we need to perform the following steps:

1. Reset a value in a cell of the second lookup column (the Product column) when a cell value in the first lookup column (the Category column) is changed. We need to use the dxDataGrid.columns.setCellValue callback function for this. This function accepts two parameters. The first one is data of the current row, and the second one is the inputed value. So, our code should be as follows:

{
    dataField: 'Category',    
    setCellValue: function (rowData, value) {
        rowData.Product = null;
        this.defaultSetCellValue(rowData, value);
    },
    ...
}

2. We need to filter values for a cell in the second lookup column based on the current value from the first column. In this case, we can specify the dxDataGrid.columns.lookup.dataSource option as a callback function. This function must return a data source configuration object and we can specify the filter expression for our data source based on the current value of the first lookup column. The data option will help us to do this. So, the code should be as follows:

{
    dataField: 'Product',
    lookup: {
        dataSource: function (options) {
            var dataSourceConfiguration = {
                store: products
            };
            if (options.data) {
                dataSourceConfiguration.filter = ['CategoryID', '=', options.data.Category];
            }
            return dataSourceConfiguration;
        },
        ...
    }
}

See also:
How to implement cascading lookups