Control State
This demo illustrates the usage of client-side events provided by the Range Selector control.
Handle the Disposing event to perform a custom action when the widget is being removed.
The Drawn event fires when the control has finished drawing itself.
When an error or warning appears, the widget notifies you by passing a message to the browser console. This message contains the ID of the incident, a brief description, and a link to the Errors and Warnings document where further information about this incident can be found. However, you can handle errors and warnings the way you require. To do this, implement a client-side function performing the required actions and assign it to the IncidentOccurred event. Within this function, you have access to the information about an occurred incident. This information can be accessed from the Target field of the object passed to the callback function as a parameter. This information includes the following.
- id - Contains the ID of an incident. The full list of IDs can be found in the Errors and Warnings document.
- type - Contains the type of an incident. This field equals 'error' for errors or 'warning' for warnings.
- args - Contains the argument of an incident's message. The content of this field varies greatly, depending on the incident. For example, it may contain the name of a data source field that has not been specified correctly, or the name of an option that has not been set properly.
- text - Contains text passed to the browser console. This text includes the content of the args field if there is any.
- widget - Contains the name of a widget that produced the error or warning.
- version - Contains the currently used version of the ChartJS library.
<div class="form-inline">
<div class="form-group btn-toolbar">
<dx:BootstrapButton runat="server" Text="Refresh Range Selector" AutoPostBack="false">
<ClientSideEvents Click="refreshRangeSelector" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Force Error" AutoPostBack="false">
<ClientSideEvents Click="forceError" />
</dx:BootstrapButton>
</div>
</div>
<br />
<dx:BootstrapCallbackPanel ID="BootstrapCallbackPanel" runat="server" ClientInstanceName="cp">
<ContentCollection>
<dx:ContentControl>
<dx:BootstrapRangeSelector ID="RangeControlState" runat="server" ClientInstanceName="rangeSelector" SelectionStart="40000" SelectionEnd="90000" TitleSettings-Text="Select House Price Range">
<ClientSideEvents
Drawn = "onDrawn"
Disposing="onDisposing"
IncidentOccurred="onIncidentOccurred" />
<SettingsScale ValueType="System.Decimal" StartValue="15000" EndValue="150000"
TickInterval="10000" MinorTickInterval="500" MinorTickVisible="false">
<Label>
<Format Type="Currency" />
</Label>
</SettingsScale>
<SettingsSliderMarker>
<Format Type="Currency" />
</SettingsSliderMarker>
</dx:BootstrapRangeSelector>
</dx:ContentControl>
</ContentCollection>
</dx:BootstrapCallbackPanel>
function onDrawn(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'Drawn');
}
function onDisposing(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'Disposing');
}
function onIncidentOccurred(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'IncidentOccurred');
}
function refreshRangeSelector() {
cp.PerformCallback();
}
function forceError() {
rangeSelector.SetOptions({ scale: { startValue: 'one' } });
}
Exporting
To perform a custom action before Range Selector data is exported, assign a client-side function to the Exporting event. For example, you can cancel exporting using the Cancel field of the event parameter object.
Assign a client-side function to the Exported event if you need to perform a custom action after Range Selector data is exported. For example, this function can notify the user that the exporting has completed.
To perform a custom action before a file with exported data is saved on the user's local storage, assign a client-side function to the FileSaving event. Using the Cancel field of the event parameter object, you can cancel file saving.
Ice Cream Sales vs Temperature
<dx:BootstrapRangeSelector ID="ExportingRange" runat="server" DataSourceUrl="~/jsondata/icecreamsales.json" TitleSettings-Text="Ice Cream Sales vs Temperature">
<SettingsExport Enabled="true" FileName="icecream_sales" />
<ClientSideEvents
Exporting="onExporting"
Exported="onExported"
FileSaving="onFileSaving" />
<Chart>
<SeriesCollection>
<dx:BootstrapChartLineSeries ArgumentField="temperature" ValueField="sales">
<Label Visible="true" />
</dx:BootstrapChartLineSeries>
</SeriesCollection>
</Chart>
<SettingsScale ValueType="System.Decimal" TickInterval="0.5" MinorTickInterval="0.1">
<Label OnClientCustomizeText="customizeLabelText" OverlappingBehavior="Hide" />
</SettingsScale>
</dx:BootstrapRangeSelector>
function onExporting(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'Exporting');
}
function onExported(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'Exported');
}
function onFileSaving(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'FileSaving');
}
function customizeLabelText(scaleValue) {
return scaleValue.valueText + " °C";
}
Value Changed
The Range Selector control allows you to handle changes of the currently selected value range using the ValueChanged client event.
Use the SettingsBehavior.CallValueChanged property to specify whether the ValueChanged event should fire when a user moves a slider or after he/she has stopped moving it.
Working days count: 260
Calculate the Working Days Count in a Date Period
<dx:BootstrapComboBox runat="server" Caption="Handle Range Changes" IncrementalFilteringMode="None" AutoPostBack="false">
<ClientSideEvents ValueChanged="onEventHandlerBehaviorChanged" />
<Items>
<dx:BootstrapListEditItem Value="onMoving" />
<dx:BootstrapListEditItem Value="onMovingComplete" Selected="true" />
</Items>
</dx:BootstrapComboBox>
<dx:BootstrapRangeSelector ID="WorkingDaysRange" runat="server" DataSourceUrl="~/jsondata/icecreamsales.json" ClientInstanceName="workingDaysRange" TitleSettings-Text="Calculate the Working Days Count in a Date Period">
<ClientSideEvents ValueChanged="onValueChanged" />
<SettingsBehavior CallValueChanged="onMovingComplete" />
<SettingsScale ValueType="System.DateTime" StartValue="2017/1/1" EndValue="2017/12/31"
TickIntervalUnit="Month" TickInterval="1" MinorTickIntervalUnit="Day" MinorTickInterval="1" MinorTickVisible="false"
Marker-Visible="false">
<Label Format-Type="Month" />
</SettingsScale>
<SettingsSliderMarker>
<Format Type="MonthAndDay" />
</SettingsSliderMarker>
</dx:BootstrapRangeSelector>
function onValueChanged(s, e) {
var currentDate = new Date(e.value[0]),
workingDaysCount = 0;
while (currentDate <= e.value[1]) {
if(currentDate.getDay() > 0 && currentDate.getDay() < 6) {
workingDaysCount++;
}
currentDate.setDate(currentDate.getDate() + 1);
}
$("#workingDaysCount").html(workingDaysCount.toFixed());
dxbsDemo.eventMonitor.trace(s, e, 'ValueChanged');
}
function onEventHandlerBehaviorChanged(s, e) {
workingDaysRange.SetOptions({ behavior: { callValueChanged : s.GetValue() } });
}