ASPxClientTrackBar.PositionChanging Event

Occurs on the client before a user changes track bar position.

Declaration

PositionChanging: ASPxClientEvent<ASPxClientTrackBarPositionChangingEventHandler<ASPxClientTrackBar>>

Event Data

The PositionChanging event's data class is ASPxClientTrackBarPositionChangingEventArgs. The following properties provide information specific to this event:

Property	Description
cancel	Gets or sets a value indicating whether the action which raised the event should be canceled.
currentPosition	Gets the current drag handle position.
currentPositionEnd	Gets the current secondary drag handle position.
currentPositionStart	Gets the current main drag handle position.
newPosition	Gets a position where the drag handle is being moved.
newPositionEnd	Gets a position where the secondary drag handle is being moved.
newPositionStart	Gets a position where the main drag handle is being moved.
processOnServer	Specifies whether or not to process the event on the server. Inherited from ASPxClientProcessingModeEventArgs.

Remarks

The PositionChanging event occurs when a user is about to change a drag handle position. You can use the event arguments to cancel the action, and/or to get the current and new handle positions.

If the TrackBarProperties.AllowRangeSelection property is set to false the current and new positions of the single drag handle can be determined via the currentPosition and newPosition properties.

If the AllowRangeSelection property is set to true a track bar displays two drag handles to support the value range selection. In this case, use the currentPositionStart and newPositionStart properties to get the main drag handle positions, and currentPositionEnd and newPositionEnd to get the secondary drag handle positions.

To cancel the operation, set the cancel property to true.

Example

The code sample below demonstrates how you can use the ASPxTrackBar control to specify a filter condition for the ASPxGridView control.

Handle the ASPxClientTrackBar.PositionChanging event to update label content that displays the currently selected range. The ASPxClientTrackBar.PositionChanged event handler applies the specified filter to the grid by using the ASPxClientGridView.ApplyFilter method. Note that the ASPxTrackBar.ValueChangedDelay property specifies the time interval between when a user changes the editor’s value and when the filter is applied.

The image below shows the result.

JS

function initLbRange() {
     lbRange.SetText('$' + tbSale.GetPositionStart() + ',000 - $' + tbSale.GetPositionEnd() + ',000');
     updateGrid();
};

function updateLbRange(s, e) {
     lbRange.SetText('$' + e.newPositionStart + ',000 - $' + e.newPositionEnd + ',000');
};

function updateGrid() {
     var filterCondition = "[Sale] > " + tbSale.GetPositionStart() * 1000 
     + " AND [Sale] < " + tbSale.GetPositionEnd() * 1000;
     grid.ApplyFilter(filterCondition);
};

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="Glass"%>

...

<dx:ASPxTrackBar ID="TbSale" runat="server" AllowRangeSelection="True" 
     LargeTickInterval="100" MaxValue="500" MinValue="100" PositionEnd="500" 
     PositionStart="100" ScalePosition="LeftOrTop" Step="10" 
     ClientInstanceName="tbSale" LargeTickEndValue="500" LargeTickStartValue="100" 
     ValueChangedDelay="1000" ValueToolTipPosition="None" Width="300px">
     <ClientSideEvents Init="initLbRange" PositionChanging="updateLbRange" 
          PositionChanged="updateGrid" />
</dx:ASPxTrackBar>

<dx:ASPxLabel ID="LbRange" runat="server" Text="" ClientInstanceName="lbRange">
</dx:ASPxLabel>

<dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="False" 
     DataSourceID="AccessDataSource1" ClientInstanceName="grid">
     <Columns>
          <dx:GridViewDataTextColumn FieldName="TitleOfCourtesy" VisibleIndex="0">
          </dx:GridViewDataTextColumn>
          <dx:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="1">
          </dx:GridViewDataTextColumn>
          <dx:GridViewDataTextColumn FieldName="LastName" VisibleIndex="2">
          </dx:GridViewDataTextColumn>
          <dx:GridViewDataTextColumn FieldName="Sale" VisibleIndex="3">
               <PropertiesTextEdit DisplayFormatString="c" />
          </dx:GridViewDataTextColumn>
     </Columns>
</dx:ASPxGridView>

<asp:AccessDataSource ID="AccessDataSource1" runat="server" 
     DataFile="~/App_Data/Employees.mdb" 
     SelectCommand="SELECT [TitleOfCourtesy], [FirstName], [LastName], [Sale] FROM [Employees]">
</asp:AccessDataSource>