devexpress
DevExpress GridViewでのグリッド行の条件付き選択の実装

備考

ASP.Net Webフォームを使用したサンプルイラスト

ASPXページのGridView定義

以下に示すように、グリッドの最初の列はチェックボックス列として定義され、下の例に示すように条件付きでクリアされます（ヘッダチェックボックスは現在のページのすべての行を選択/選択解除するためだけですが、グリッド上で簡単に）：

<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="True" ClientInstanceName="ASPxGridView1" KeyFieldName="CustomerID" Width="100%" 
        OnHtmlRowCreated="ASPxGridView1_HtmlRowCreated" OnCustomJSProperties="ASPxGridView1_CustomJSProperties">
    <SettingsPager PageSize="30" />
    <Settings VerticalScrollBarMode="Visible" VerticalScrollableHeight="350" />
    <Paddings Padding="0px" />
    <Border BorderWidth="0px" />
    <BorderBottom BorderWidth="1px" />
    <Columns>
        <dx:GridViewDataTextColumn Caption="#" VisibleIndex="0">
            <DataItemTemplate>
                <dx:ASPxCheckBox ID="cbCheck" runat="server" AutoPostBack="false" CssClass="chkSelDgProdRow" OnLoad="ASPxGridView1_cbCheck_Load" />
            </DataItemTemplate>
            <HeaderTemplate>
                <dx:ASPxCheckBox ID="cbPageSelectAll" runat="server" ToolTip="Select/Unselect all rows on the page" ClientInstanceName="cbPageSelectAll"
                    ClientSideEvents-CheckedChanged="function(s, e) { checkUncheckSelectableRowsOnPage(s.GetChecked()); }" OnLoad="ASPxGridView1_cbPageSelectAll_Load" />
            </HeaderTemplate>
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="ContactName" VisibleIndex="2">
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="CompanyName" VisibleIndex="1">
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="ContactTitle" VisibleIndex="3">
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="City" VisibleIndex="5">
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="Country" VisibleIndex="6">
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="Phone" VisibleIndex="9">
        </dx:GridViewDataTextColumn>
    </Columns>
    <ClientSideEvents BeginCallback="OnGridCallBackBegin" />
</dx:ASPxGridView>

SQLテーブル構造

データは、構造が下にあるSQLテーブル 'Customers'からロードされます（表はNorthwindデータベースの標準構造であり、 '条件付き'選択機能を示すために余分な 'IsRegistered'列があることに注意してください）。

CREATE TABLE [dbo].[Customers] (
    [CustomerID]   NCHAR (5)     NOT NULL,
    [CompanyName]  NVARCHAR (40) NOT NULL,
    [ContactName]  NVARCHAR (30) NULL,
    [ContactTitle] NVARCHAR (30) NULL,
    [Address]      NVARCHAR (60) NULL,
    [City]         NVARCHAR (15) NULL,
    [Region]       NVARCHAR (15) NULL,
    [PostalCode]   NVARCHAR (10) NULL,
    [Country]      NVARCHAR (15) NULL,
    [Phone]        NVARCHAR (24) NULL,
    [Fax]          NVARCHAR (24) NULL,
    [IsRegistered] BIT           NULL
);

ページロードイベント（.CSページ）

.CSページのPage_Load（）イベントとそれに対応する関連コード。 DevExpressのCustom JSプロパティには接頭辞 'cp'が必要です。

    private const string _selectableRowsKey = "cp_SelectableRows";
    private const string _selectedRowsCountKey = "cp_SelectedRowsCount";

    protected void Page_Load(object sender, EventArgs e)
    {
        PopulateGrid();
    }

    private void PopulateGrid()
    {
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["NWindConnectionString"].ConnectionString;
            conn.Open();

            using (SqlCommand cmd = new SqlCommand("SELECT * FROM [Customers]", conn))
            {
                DataTable dt = new DataTable();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);

                ASPxGridView1.DataSource = dt;
                ASPxGridView1.DataBind();
            }

            conn.Close();
        }
    }

HtmlRowCreatedイベント（.CSページ）

このイベントは、データバインディング時にGridViewで作成された各行に対して呼び出されます。これは、 'IsRegistered'が 'true'に設定されている場合、最初の列の 'チェックボックス'がクリアされているかどうかを条件付きでチェックするために使用されます。また、UIでの選択/非選択が許可されている行のリストを＃に区切ったグリッドのカスタムJSプロパティを設定するためにも同じものが使用されます。

    protected void ASPxGridView1_HtmlRowCreated(object sender, ASPxGridViewTableRowEventArgs e)
    {
        if (e.RowType == GridViewRowType.Data)
        {
            if (e.GetValue("IsRegistered") != null)
            {
                if (e.GetValue("IsRegistered") != DBNull.Value && (bool)e.GetValue("IsRegistered"))
                    e.Row.Cells[0].Controls.Clear();
                else
                {
                    string selectableRows = string.Empty;
                    if (ASPxGridView1.JSProperties.ContainsKey(_selectableRowsKey))
                        selectableRows = (string)ASPxGridView1.JSProperties[_selectableRowsKey];
                    selectableRows += "#" + e.VisibleIndex.ToString();
                    ASPxGridView1.JSProperties[_selectableRowsKey] = selectableRows;
                }
            }
        }
    }

グリッドチェックボックスイベントロード（.CSページ）

このイベントは、UIに「ロード」されると、各チェックボックスに対して呼び出されます。これは、チェックボックスの行を選択/選択解除するためにJavaScriptコードを付加するだけでなく、状態を設定するためにも使用されます。

    protected void ASPxGridView1_cbCheck_Load(object sender, EventArgs e)
    {
        ASPxCheckBox cb = (ASPxCheckBox)sender;

        GridViewDataItemTemplateContainer container = (GridViewDataItemTemplateContainer)cb.NamingContainer;
        cb.ClientInstanceName = string.Format("cbCheck{0}", container.VisibleIndex);
        cb.Checked = ASPxGridView1.Selection.IsRowSelected(container.VisibleIndex);

        cb.ClientSideEvents.CheckedChanged = string.Format("function (s, e) {{ ASPxGridView1.SelectRowOnPage({0}, s.GetChecked()); updateSelectedKeys(s.GetChecked()); }}", container.VisibleIndex);
    }

イベントのロード（.CSページ）のすべてのページのチェックボックスをオンにします。

このイベントは、選択状態に基づいて、ページをナビゲートするときに「ページ上ですべて選択」チェックボックスを選択/選択解除するために使用されます。

    protected void ASPxGridView1_cbPageSelectAll_Load(object sender, EventArgs e)
    {
        ASPxCheckBox cb = (ASPxCheckBox)sender;
        ASPxGridView grid = (cb.NamingContainer as GridViewHeaderTemplateContainer).Grid;

        bool cbChecked = true;
        int start = grid.VisibleStartIndex;
        int end = grid.VisibleStartIndex + grid.SettingsPager.PageSize;
        end = (end > grid.VisibleRowCount ? grid.VisibleRowCount : end);

        for (int i = start; i < end; i++)
        {
            DataRowView dr = (DataRowView)(grid.GetRow(i));
            if (!grid.Selection.IsRowSelected(i))
            {
                if (dr["IsRegistered"] == DBNull.Value || !(bool)dr["IsRegistered"])
                {
                    cbChecked = false;
                    break;
                }
            }
        }
        cb.Checked = cbChecked;
    }

Grid CustomJSプロパティ設定イベント（.CSページ）

このイベントは、GridViewの現在のページの「選択された行数」を設定するために使用されます。これは、ヘッダチェックボックスを自動的に選択するためにJavaScriptで使用されます。

    protected void ASPxGridView1_CustomJSProperties(object sender, ASPxGridViewClientJSPropertiesEventArgs e)
    {
        ASPxGridView grid = sender as ASPxGridView;
        int start = grid.VisibleStartIndex;
        int end = grid.VisibleStartIndex + grid.SettingsPager.PageSize;
        int selectNumbers = 0;

        end = (end > grid.VisibleRowCount ? grid.VisibleRowCount : end);

        for (int i = start; i < end; i++)
            if (grid.Selection.IsRowSelected(i))
                selectNumbers++;

        e.Properties[_selectedRowsCountKey] = selectNumbers;
    }

クライアントのイベントと関連する機能を処理するJavaScriptコード

このJavaScript関数は、ASPXページで定義されている「チェックボックス」チェックチェンジイベント中に呼び出されます。

function checkUncheckSelectableRowsOnPage(isChecked) {
    var selectableRowIndexes = ASPxGridView1.cp_SelectableRows;
    var grdStartIndex = ASPxGridView1.visibleStartIndex;
    var grdEndIndex = grdStartIndex + ASPxGridView1.pageRowCount;

    if (selectableRowIndexes != null && selectableRowIndexes != '') {
        var rowIdxes = selectableRowIndexes.split("#");
        var selectedRowsCount = 0;
        if (rowIdxes != null) {
            try {
                for (var i = 0; i < rowIdxes.length; i++) {
                    if (rowIdxes[i] != "") {
                        var rowIndex = parseInt(rowIdxes[i]);
                        if (rowIndex != NaN && rowIndex >= 0 && rowIndex >= grdStartIndex && rowIndex < grdEndIndex) {
                            if (ASPxClientControl.GetControlCollection().GetByName("cbCheck" + rowIdxes[i]) != null) {
                                if (isChecked) {
                                    ASPxGridView1.SelectRowOnPage(rowIdxes[i]);
                                    selectedRowsCount++;
                                }
                                else
                                    ASPxGridView1.UnselectRowOnPage(rowIdxes[i]);
                                ASPxClientControl.GetControlCollection().GetByName("cbCheck" + rowIdxes[i]).SetChecked(isChecked);
                            }
                        }
                    }
                }
                //updateSelectedKeys();   // Can be used if the selected keys needs to be saved separately in a Hidden field
                ASPxGridView1.cp_SelectedRowsCount = selectedRowsCount;
                currentSelectedRowsCount = selectedRowsCount;
            }
            finally {
            }
        }
    }
}

このJavaScriptコードは、GridViewの現在のページ上の選択された行に基づいて、ヘッダーの 'Select on Page'チェックボックスに使用されます。

var currentSelectedRowsCount = 0;
function updateSelectedKeys(isChecked) {
    var selKeys = ASPxGridView1.GetSelectedKeysOnPage();
    if (selKeys != null) {
        var cpIDsList = '';
        try {
            for (var i = 0; i < selKeys.length; i++) {
                cpIDsList += selKeys[i] + ',';
            }
        }
        finally {
        }
        //$("#hdnSelectedCatProdIDs").val(cpIDsList);
        if (isChecked) {
            currentSelectedRowsCount++;
            cbPageSelectAll.SetChecked(selKeys.length == ASPxGridView1.cp_SelectedRowsCount);
        }
        else {
            cbPageSelectAll.SetChecked(selKeys.length == currentSelectedRowsCount);
            currentSelectedRowsCount--;
        }
    }
}

このJavaScriptクライアントイベントハンドラは、サーバーから設定されている現在選択されている行を設定するために使用されます。

function OnGridCallBackBegin(s, e) {
    currentSelectedRowsCount = ASPxGridView1.cp_SelectedRowsCount;
}