React Lookup - Access the DataSource
Regardless of the data source you use, the Lookup always wraps it in a DataSource. Call the getDataSource() method to get the instance of the DataSource.
jQuery
JavaScript
const lookupDataSource = $("#lookupContainer").dxLookup("getDataSource");
Angular
TypeScript
import { DxLookupModule, DxLookupComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxLookupComponent, { static: false }) lookup: DxLookupComponent; // Prior to Angular 8 // @ViewChild(DxLookupComponent) lookup: DxLookupComponent; lookupDataSource = this.lookup.instance.getDataSource(); } @NgModule({ imports: [ // ... DxLookupModule ], // ... })
Vue
<template> <DxLookup ... ref="lookup" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxLookup } from 'devextreme-vue/lookup'; export default { components: { DxLookup }, methods: { getDataSource() { this.ds = this.$refs.lookup.instance.getDataSource(); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { Lookup } from 'devextreme-react/lookup'; class App extends React.Component { constructor(props) { super(props); this.lookupRef = React.createRef(); this.getDataSource = this.getDataSource.bind(this); } getDataSource() { this.ds = this.lookupRef.current.instance.getDataSource(); } render() { return ( <Lookup ... ref={this.lookupRef} /> ); } } export default App;
Now, you can call any method the DataSource exposes. For example, you can reload data using the reload() method.
JavaScript
lookupDataSource.reload();
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.