dataSource.md

id	dxHtmlEditorVariables.dataSource
type	Store | DataSource | DataSource_Options | String | Array<String> | null
default

---

shortDescription

Specifies a collection of variables available for a user.

---

The following list shows how to specify the dataSource property depending on your data source:

• Data Array
  Assign the array to the dataSource property.

• Read-Only Data in JSON Format
  Set the dataSource property to the URL of a JSON file or service that returns JSON data.

• OData
  Implement an ODataStore.

• Web API and MongoDB
  Use one of the following extensions to enable the server to process data according to the protocol DevExtreme UI components use:

  • DevExtreme.AspNet.Data
  • devextreme-query-mongodb

  Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

  ---

  jQuery

    <!-- tab: JavaScript -->
    $(function() {
        let serviceUrl = "https://url/to/my/service";
        $("#{widgetName}Container").dx{WidgetName}({
            // ...
            variables: {
                dataSource: DevExpress.data.AspNet.createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction"
                })
            }
        })
    });
  

  Angular

    <!-- tab: app.component.ts -->
    import { Component } from '@angular/core';
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
  
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        store: CustomStore;
        constructor() {
            let serviceUrl = "https://url/to/my/service";
            this.store = createStore({
                key: "ID",
                loadUrl: serviceUrl + "/GetAction"
            })
        }
    }
  
    <!-- tab: app.component.html -->
    <dx-{widget-name} ... >
        <dxo-{widget-name}-variables [dataSource]="store"></dxo-{widget-name}-variables>
    </dx-{widget-name}>
  
    <!-- tab: app.module.ts -->
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
  
    import { Dx{WidgetName}Module } from 'devextreme-angular';
  
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            Dx{WidgetName}Module
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
  

  Vue

    <!-- tab: App.vue -->
    <template> 
        <Dx{WidgetName} ... >
            <DxVariables :data-source="store"></DxVariables>
        </Dx{WidgetName}>
    </template>
  
    <script>
    import 'devextreme/dist/css/dx.fluent.blue.light.css';
  
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import { Dx{WidgetName}, DxVariables } from 'devextreme-vue/{widget-name}';
  
    export default {
        components: {
            Dx{WidgetName},
            DxVariables
        },
        data() {
            const serviceUrl = "https://url/to/my/service";
            const store = createStore({
                key: "ID",
                loadUrl: serviceUrl + "/GetAction"
            });
            return {
                store
            }
        }
    }
    </script>
  

  React

    <!-- tab: App.js -->
    import React from 'react';
    import 'devextreme/dist/css/dx.fluent.blue.light.css';
  
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import {WidgetName}, { Variables } from 'devextreme-react/{widget-name}';
  
    const serviceUrl = "https://url/to/my/service";
    const store = createStore({
        key: "ID",
        loadUrl: serviceUrl + "/GetAction"
    });
  
    class App extends React.Component {
        render() {
            return (
                <{WidgetName} ... >
                    <Variables dataSource={store} />
                </{WidgetName}>
            );
        }
    }
    export default App;
  

  ---

• Any other data source
  Implement a CustomStore.

[note]

#include api-dataSource-stores-are-immutable

[/note]