dataSource.md

id	GridBaseColumn.lookup.dataSource
type	Array<any> | Store | DataSource_Options | function(options) | null | undefined
default	undefined

---

shortDescription

Specifies the data source for the lookup column.

param(options): Object

Information on the current row.

field(options.data): Object

The row's data.

field(options.key): any

The row's key.

return: Array | Store | DataSource_Options

An array of objects or primitives, a store instance, or a DataSource configuration.

---

This property accepts one of the following:

• Array of objects or primitives
  A JavaScript array that contains plain objects or primitives.

• DataSource configuration object
  A DataSource configuration object. You can find code for this example in the following help topic: Bind a Lookup Column to a Custom Data Source. For more information about the DataSource and DevExtreme Data Layer, refer to the Data Layer article.

  [important] DataSource instances are not supported.

• Store instance
  An ArrayStore, LocalStore, ODataStore, or CustomStore instance.

• Function
  A function that returns one of the above.

  [note]

  When the component is initialized, it calls the dataSource function with an empty options object. To avoid execution errors, check that options properties are defined before accessing them. The following code snippet demonstrates how to check if options.data is defined before using the property in a filter expression:

  ---

  jQuery

    <!-- tab: index.js -->
    $("#{widgetName}Container").dx{WidgetName}({
        columns: [{
            lookup: {
                dataSource(options) {
                    return {
                        store: dataStore,
                        filter: options.data ? ['StateID', '=', options.data.StateID] : null,
                    };
                },
            }
        }]
    })
  

  Angular

    <!-- tab: app.component.html -->
    <dx-{widget-name} ... >
        <dxi-{widget-name}-column ... >
            <dxo-{widget-name}-lookup [dataSource]="lookupDataSource" ... ></dxo-{widget-name}-lookup>
        </dxi-{widget-name}-column>
    </dx-{widget-name}>
  
    <!-- tab: app.component.ts -->
    export class AppComponent {
        lookupDataSource = (options) => {
            return {
                store: this.dataStore,
                filter: options.data ? ['StateID', '=', options.data.StateID] : null,
            }
        }
    }
  

  Vue

    <!-- tab: App.vue -->
    <script setup>
    import { Dx{WidgetName}, DxColumn, DxLookup } from 'devextreme-vue/{widget-name}';
  
    const lookupDataSource = (options) => {
        return {
            store: dataStore,
            filter: options.data ? ['StateID', '=', options.data.StateID] : null,
        }
    }
    </script>
  
    <template>
        <Dx{WidgetName} ... >
            <DxColumn ... >
                <DxLookup :dataSource="lookupDataSource" ... />
            </DxColumn>
        </Dx{WidgetName}>
    </template>
  

  React

    <!-- tab: App.js -->
    import { {WidgetName} } from 'devextreme-react';
    import { Column, Lookup } from 'devextreme-react/{widget-name}';
  
    function App() {
        function lookupDataSource(options) {
            return {
                store: dataStore,
                filter: options.data ? ['StateID', '=', options.data.StateID] : null,
            }
        }
        return (
            <>
                <{WidgetName} ... >
                    <Column ... >
                        <Lookup dataSource={lookupDataSource} ... />
                    </Column>
                </{WidgetName}>
            </>
        )
    }
  

  ---

  [/note]

If the lookup data source contains objects, specify the valueExpr and displayExpr properties in addition to the dataSource.

[note] Collections of primitives are not supported if you use the DevExtreme.AspNet.Data library API directly or via a server-side wrapper (as with the DevExtreme ASP.NET MVC Controls) to load the collections from a remote data source. Reconfigure the data source to return collections of objects.

#include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CascadingLookups/" }