Binding to Data

• Jul 13, 2021
• 2 minutes to read

This document provides information on data binding approaches supported by the Range Selector control.

The following approaches are supported:

• Data Source Controls
• JSON Files
• JSONP

Data Source Controls

The Range Selector control can obtain data from one of the ASP.NET data source controls (such as EntityDataSource) on the server side. Use this to provide large amounts of data from the database to the widget, and if you do not need to get data from third-party sources. To assign a data source to a chart, set the chart’s BootstrapWebClientUIWidget.DataSourceID property.

ASPX

<dx:BootstrapRangeSelector runat="server" DataSourceID="EFDataSource" TitleText="Meat/Poultry Sales">
    <Chart>
        <SeriesCollection>
            <dx:BootstrapChartBarSeries ArgumentField="ProductName" ValueField="ProductSales">
            </dx:BootstrapChartBarSeries>
        </SeriesCollection>
    </Chart>
</dx:BootstrapRangeSelector>

<ef:EntityDataSource runat="server" ID="EFDataSource" ContextTypeName="DevExpress.Web.Demos.NorthwindContextSL" EntitySetName="SalesByCategory"
    Select="it.[ProductName], it.[ProductSales]" Where="it.[CategoryName] = 'Meat/Poultry'" OrderBy="it.[ProductSales] ASC">
</ef:EntityDataSource>

For testing purposes, you can use demo databases supplied with DevExpress Bootstrap components. The databases are installed in the following folder, by default:

C:\Users\Public\Documents\DevExpress Demos 24.1\Components\ASP.NET\CS\BootstrapDemos\App_Data\

JSON Files

Performing AJAX requests is inevitable if your server stores data in JSON. However, instead of configuring these requests manually, you can assign the URL of your data storage to the BootstrapWebClientUIWidget.DataSourceUrl property and the Range Selector control automatically performs the requests required to obtain data from the storage. The URL can specify an absolute or relative path to the resource.

ASPX

<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/data.json" TitleText="Daily Sales">
    <SettingsScale Type="Semidiscrete" ValueType="System.DateTime" RangeIntervalUnit="Day" MinRange="1" />
    <Chart>
        <SeriesCollection>
            <dx:BootstrapChartBarSeries ArgumentField="date" ValueField="sales" />
        </SeriesCollection>
    </Chart>
</dx:BootstrapRangeSelector>

JSONP

You can use a JSONP callback parameter supported by jQuery.ajax() to access a web service that implements a JSONP (JSON with padding) endpoint.

ASPX

<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/RangeSelector/DataBinding.aspx?callback=?" TitleText="Olympic Medals in 2016">
    ...
</dx:BootstrapRangeSelector>