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