バージョン

値を表示するために WebDataGrid テンプレート内で WebProgressBar を使用

始める前に

WebProgressBar™ は、グリッドでセルの値を視覚的に表示するために WebDataGrid™ テンプレートに簡単に配置できます。

達成すること

グリッドのセル値を表示するために WebDatGrid テンプレート内で WebProgressBar を使用する方法を学びます。

次の手順を実行します

  1. Visual Studio™ ツールボックスから、ScriptManager コンポーネントと WebDataGrid コントロールをフォームにドラッグ アンド ドロップします。

  2. Page_Load イベントで WebDataGrid に手動でデータをバインドするために以下のコードを追加します。

Visual Basic の場合：

        Dim dt As New DataTable()
        dt.Columns.Add("Column 1", Type.[GetType]("System.Double"))
        dt.Columns.Add("Column 2")
        dt.Columns.Add("Column 3")
        dt.Columns.Add("Column 4")
        For i As Integer = 1 To 10
            Dim dr As DataRow = dt.NewRow()
            dr(0) = i
            dr(1) = DateTime.Today.AddDays(i)
            dr(2) = "Test " & i.ToString()
            dr(3) = (i Mod 2 = 0)
            dt.Rows.Add(dr)
        Next
        Me.WebDataGrid1.DataSource = dt
        Me.WebDataGrid1.DataBind()

C# の場合：

 DataTable dt = new DataTable();
        dt.Columns.Add("Column 1", Type.GetType("System.Double"));
        dt.Columns.Add("Column 2");
        dt.Columns.Add("Column 3");
        dt.Columns.Add("Column 4");
        for (int i = 1; i $$<=$$ 10; i++)
        {
            DataRow dr = dt.NewRow();
            dr[0] = i;
            dr[1] = DateTime.Today.AddDays(i);
            dr[2] = "Test " + i.ToString();
            dr[3] = (i % 2 == 0);
            dt.Rows.Add(dr);
        }
        this.WebDataGrid1.DataSource = dt;
        this.WebDataGrid1.DataBind();

  1. この時点で、WebDataGrid はデータを使用して以下のような画像になります。

images\WebProgressBar Using WebProgressBar as an Editor Control in WebDataGrid 02.png

  1. プロジェクトを中止し、WebDataGrid のスマート タグから [列の編集] をクリックし、テンプレート化された列を追加します。これによって WebDataGrid デザイナーが開きます。

  2. 利用可能なフィールドから TemplateField を選択し、[フィールドを追加] ボタンをクリックしてテンプレート化された列を追加します。

  3. [選択されたフィールド] 領域から追加されたフィールドを選択し、 Key プロパティを “WPB_Template”、そして Header Text を “WPB” に設定します。

  4. [適用] そして [OK] ボタンをクリックして WebDataGrid デザイナーを閉じます。

  5. このプロパティ ウィンドウで、WebDataGrid の EnableRelativeLayout プロパティを True に設定すると、WebProgressBar はグリッドをオーバーフローしません。

  6. WebDataGrid スマート タグから [テンプレートの編集] をクリックし、テンプレート編集モードでグリッドを開きます。

  7. ドロップダウン リストから WPB_Template を選択してテンプレートを編集します。

  8. [項目テンプレート] 領域で、WebProgressBar コントロールをドラッグ アンド ドロップし、プロパティ ウィンドウを使用して Maximum プロパティを 10 に設定します。

  9. [テンプレート編集の終了] をクリックしてテンプレートの編集を終了します。

  10. ASPX マークアップ ソースで、WebProgressBar の Value プロパティを DataBinder.Eval メソッドを使用して Column1 のセル値に設定します。

Visual Basic の場合：

Value=<%# DataBinder.Eval(CType(Container, Infragistics.Web.UI.TemplateContainer).DataItem, "Column 1") %>

C# の場合：

Value=<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Column 1") %>

  1. アプリケーションを保存して実行します。WebDataGrid は以下の画像のようになります。

images\WebProgressBar Using WebProgressBar as an Editor Control in WebDataGrid 01.png