Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid 操作時の非同期ポストバックで WebDataGrid 以外のコントロールのプロパティをサーバーサイドで更新する

WebDataGrid ではセルの値編集、フィルタリング、ソートなど各種操作を行った際に、サーバーサイドのデータソースと同期を取るために非同期ポストバックが発生致します。また、ヘッダチェックボックスの値切り替えなどのタイミングで非同期ポストバックを起こすオプションも用意されています。

よくお問い合わせ頂くご質問に、WebDataGrid に対して何らかの操作を行ったタイミングで、別のコントロールの状態を更新するというものがあります。WebDataGrid の非同期ポストバックでは、WebDataGrid に対してサーバーサイドでプロパティの変更を行うとクライアント側でもプロパティの変更が反映されていますが、WebDataGrid 以外のコントロール(例えば周りに配置されているボタンやラベルなど)に対しては変更が反映されていません。これは、WebDataGrid そのものが UpdatePanel の様に独立した更新領域として存在しており、WebDataGrid 内で発生した非同期ポストバックでは WebDataGrid 以外の領域のコントロールには変更を行わないためです。

WebDataGrid 内で発生した非同期ポストバックで WebDataGrid 以外のコントロールのプロパティ変更を行う方法として、UpdatePanel に WebDataGrid を配置する方法がございます。ここでは WebDataGrid の行を選択したタイミングで、選択行のインデックスを Label コントロールに表示する例をご紹介致します。

 

1.UpdatePanel 内に WebDataGrid を配置

UpdatePanel 側の非同期ポストバックを利用しますので、WebDataGrid の EnableAjax を false に設定してフルポストバックするよう変更を加えます。

 

2.WebDataGrid の行選択を有効化

続いて、WebDataGrid の Behaviors コレクションから Selection を定義し、行選択を有効化します。また、行選択時にポストバックが発生する様に、AutoPostBackFlags.RowSelectionChanged も有効化します。

 

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"
                                UpdateMode="Always">
    <ContentTemplate>
        <%--EnableAjax="False" に設定し、WebDataGrid の非同期ポストバックを OFF にします。 --%>
        <ig:WebDataGrid ID="WebDataGrid1" runat="server"
                                      Height="350px" Width="400px"
                                      EnableAjax="False"
                                      onrowselectionchanged="WebDataGrid1_RowSelectionChanged">
            <ClientEvents Initialize="WebDataGrid1_Grid_Initialize" />
            <Behaviors>
                <ig:Selection CellClickAction="Row" RowSelectType="Single">
                    <AutoPostBackFlags RowSelectionChanged="True" />
                </ig:Selection>
            </Behaviors>
        </ig:WebDataGrid>
        <br />
        <asp:Panel Direction="RightToLeft" Width="400px" BackColor="LightBlue" runat="server">
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

 

ここまでの設定で、行選択時に UpdatePanel の非同期ポストバックが発生します。

 

3.UpdatePanel の非同期ポストバック内で Label コントロールの書き換え

続いて WebDataGrid の行選択時に発生した UpdatePanel の非同期ポストバックで Label コントロールの Text プロパティを書き換えます。

 

C#

protected void WebDataGrid1_RowSelectionChanged(object sender, Infragistics.Web.UI.GridControls.SelectedRowEventArgs e)
{
    // 選択行の ID セルの値を表示する場合
    this.Label1.Text = "現在の選択行: " + e.CurrentSelectedRows[0].Items[0].Text;

    // 選択行インデックスを表示する場合
    //this.Label1.Text = "現在の選択行: " + e.CurrentSelectedRows[0].Index.ToString();
}

 

 

VB.NET

Protected Sub WebDataGrid1_RowSelectionChanged(sender As Object, e As Infragistics.Web.UI.GridControls.SelectedRowEventArgs) Handles WebDataGrid1.RowSelectionChanged

    ' 選択行の ID セルの値を表示する場合
    Me.Label1.Text = "現在の選択行: " + e.CurrentSelectedRows(0).Items(0).Text

    ' 選択行インデックスを表示する場合
    'this.Label1.Text = "現在の選択行: " + e.CurrentSelectedRows[0].Index.ToString();;

End Sub

 

ここまでの設定で、行選択時に Label のテキストが更新されるようになりました。

WebDataGrid ラベル更新


4.WebDataGrid の AjaxIndicator を表示

WebDataGrid ではデフォルトで非同期通信時に処理中を示す AjaxIndicator が表示されますが、WebDataGrid のビルトイン機能のため UpdatePanel の非同期通信では AjaxIndicator は表示されません。UpdatePanel が無い場合にも AjaxIndicator を表示するためクライアントサイドに実装を加えていきます。

(1)行選択が行われたタイミング

非同期ポストバック開始前に発生する PageRequestManager の beginRequest イベント(beforePostback)を登録し、AjaxIndicator を表示します。

(2)非同期通信が完了したタイミング

UpdatePanel の非同期通信が完了し、クライアント側に処理が遷移したタイミングで発生する PageRequestManager の endRequest イベントを登録し、AjaxIndicator を非表示にします。

 

function beforePostback() {
    var grid = $find("WebDataGrid1");
    // ajax indicator を非表示
    grid.get_ajaxIndicator().show(grid);
}
function pageReloaded() {
    var grid = $find("WebDataGrid1");
    // ajax indicator を非表示
    grid.get_ajaxIndicator().hide();
}

function WebDataGrid1_Grid_Initialize(sender, eventArgs)
{
    // 非同期ポストバック終了後に発生するイベントを捕捉
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(beforePostback);
    prm.add_endRequest(pageReloaded);
}

 

これで WebDataGrid 単体で表示していたように非同期通信時に AjaxIndicator が表示されるようになります。

WebDataGrid AjaxIndicator

サンプルはこちらから
WebDataGrid_UpdateControl_CS.zip
WebDataGrid_UpdateControl_VB.zip

(本サンプルは14.1.20141.2194バージョンで作成されました)


WebDataGrid 関連記事

WebDataGrid の機能は多岐にわたります。よくお問い合わせ頂く内容につきましては一部このブログでも実装方法や設定方法を紹介させていただいております。是非ご活用ください。

WebDataGrid 利用方法一覧

弊社製品は機能制限なしのトライアル版もご用意しています。ダウンロードはこちらから。
http://jp.infragistics.com/media/107588/download-button.png

Posted: 25 Sep 2014, 17:53
Anonymous comments are disabled