devexpress
DevExpress GridView에서 그리드 행의 조건부 선택 구현

비고

ASP.Net Web Forms를 사용한 샘플 일러스트레이션

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'에서로드됩니다 (표는 '조건부'선택 기능을 보여주기 위해 초과 된 'IsRegistered'열이있는 NorthWind 데이터베이스의 표준 구조입니다).

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;
                }
            }
        }
    }

Grid Checkbox 이벤트로드 (.CS 페이지)

이 이벤트는 UI에 'Load'ed 될 때 각 확인란마다 호출됩니다. 이것은 상태를 설정하고 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의 현재 페이지의 '선택된 행 수'를 설정하는 데 사용됩니다. 이것은 헤더 체크 박스를 자동 선택하기 위해 자바 스크립트에서 사용됩니다.

    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 페이지에 정의 된대로 'checkbox'checked change 이벤트 중에 호출됩니다.

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의 현재 페이지에서 선택된 행을 기반으로 헤더에서 '페이지에서 모두 선택'확인란에 사용됩니다.

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;
}