DevExpress の ASPxTrackBar での選択値取得（JavaScript）

DevExpress の ASPxTrackBar での選択値取得（JavaScript）のサンプルです。

現状の画面デザインはこのようになっています。

＜選択値取得（JavaScript）＞

「>」をクリックします。

↓

「Designer…」を選択します。

↓

「Client-Side Events」を選択します。

↓

「LostFocus」を選択します。

↓

選択値を取得してメッセージ表示の処理を記載します。

【サンプルプログラム】

<form id="form1" runat="server">
<div>
<dx:ASPxTrackBar ID="ASPxTrackBar1" runat="server" Caption="分設定" 
    LargeTickInterval="10" MaxValue="60"
    ScaleLabelFormatString="{0}分" ScaleLabelHighlightMode="AlongBarHighlight" 
    ScalePosition="Both" SmallTickFrequency="2" Step="5" Theme="RedWine" 
    Width="350px" PositionStart="25" LargeTickEndValue="60" Position="25" 
    AllowRangeSelection="True" PositionEnd="40">
    <ClientSideEvents LostFocus="function(s, e) {
        var myString = '';
        myString = s.GetPositionStart();
        myString = myString + '〜';
        myString = myString + s.GetPositionEnd();
        myString = myString + '分を選択';
        alert(myString);	
    }" />
    <CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False" 
        VerticalAlign="Middle" />
    <CaptionStyle Font-Bold="True" Font-Size="Medium" ForeColor="Blue">
    </CaptionStyle>
</dx:ASPxTrackBar>
</div>
</form>

<div>

<dx:ASPxTrackBar ID="ASPxTrackBar1" runat="server" Caption="分設定"

LargeTickInterval="10" MaxValue="60"

ScaleLabelFormatString="{0}分" ScaleLabelHighlightMode="AlongBarHighlight"

ScalePosition="Both" SmallTickFrequency="2" Step="5" Theme="RedWine"

Width="350px" PositionStart="25" LargeTickEndValue="60" Position="25"

AllowRangeSelection="True" PositionEnd="40">

<ClientSideEvents LostFocus="function(s, e) {

var myString = '';

myString = s.GetPositionStart();

myString = myString + '〜';

myString = myString + s.GetPositionEnd();

myString = myString + '分を選択';

alert(myString);

}" />

<CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False"

VerticalAlign="Middle" />

</CaptionStyle>

</dx:ASPxTrackBar>

</div>

</form>

それでは、実行して動作確認を行います。

↓

無事にトラックバーの選択値取得が出来ました。

関連記事はこちら:

DevExpress の ASPxTrackBar のまとめ DevExpress の ASPxTrackBar のまとめです。「ASPxTrackBar」は、デザイン重視の場合に使用すれば良いと思います。特別な機能が入っているというわけではありませんので。＜メリット＞・デ ......
DevExpress の ASPxTrackBar での色選択設定（JavaScript） DevExpress の ASPxTrackBar での色選択設定（JavaScript）のサンプルです。実際の画面はこのような感じです。サンプル作成までの大きな手順は7点です。・ASPxTrackBar を3個生 ......
DevExpress の ASPxGridView のボタン一括選択（1ページアイテムの選択/解除） DevExpress　のボタン一括選択（1ページアイテムの選択/解除）のサンプルです。今回はボタンを用意して、ボタンクリックで1ページアイテムの「選択/解除」を行います。設定する内容は4点です。 1点目：ボタンを配置 ......
DevExpress の ASPxMemo でのスクロールバー非表示設定（JavaScript） DevExpress の ASPxMemo でのスクロールバー非表示設定（JavaScript）のサンプルです。現状の画面デザインはこのようになっています。＜スクロールバー非表示設定（JavaScript）＞「In ......
DevExpress の ASPxTrackBar でのメモリ開始設定 DevExpress の ASPxTrackBar でのメモリ開始設定のサンプルです。現状の画面デザインはこのようになっています。＜メモリ開始設定＞「LargeTickStartValue=”20 ......
DevExpress の ASPxTrackBar でのメモリ表示設定 DevExpress の ASPxTrackBar でのメモリ表示設定のサンプルです。現状の画面デザインはこのようになっています。＜幅設定＞「ScalePosition=”Both”」を設定 ......
DevExpress の ASPxTimeEdit のまとめ DevExpress の ASPxTimeEdit のまとめです。「ASPxTimeEdit」は、日付入力の場合必須と思います。ベースはテキストボックスですので、直接入力が可能です。また、スピンドルボタンでも変更可 ......
DevExpress の ASPxPopupControl でのスクロールバー表示設定 DevExpress の ASPxPopupControl でのスクロールバー表示設定のサンプルです。デフォルトは、スクロールバー表示なし（None）設定です。今回は、スクロールバー表示自動（Auto）設定を行います ......
DevExpress の ASPxPopupControl での表示位置設定（横） DevExpress の ASPxPopupControl での表示位置設定（横）のサンプルです。今回は、表示位置設定（横）を行い、画面中央表示にします。現状の画面デザインはこのようになっています。「ASPxPop ......
DevExpress でのコンボボックスのキー値取得設定（JavaScript） DevExpress でのコンボボックス（ASPxComboBox）のキー値取得設定（JavaScript）のサンプルです。コンボボックス（ASPxComboBox）の「JavaScript」一覧は「ASPxClien ......

投稿タグ: ASPxTrackBar, JavaScript

MENU

最近の投稿

人気記事