Grid View Selecting Rows and cells guide, UI Control for ASP.NET AJAX, C#, VB.NET, select single or multiple rows by clicking, checkbox, button

GridView Selecting Rows in ASP.NET AJAX

Home > How to > Grid Selecting Rows

Kettic ASP.NET Ajax GridView provides users of GridView Control the selection functionality to select one or more rows or cells from the shown data items. This selection features support multiple selection functionality and rows and cells selection in C# code. For example, the asp.net GridView component supports a single row selection, multiple rows selection, a single cell selection, as well as multiple cells selection. Web UI designers can easily customize the GridView selection manually.

How to Select Grid Row in C#

To select rows from asp.net data grid view, we need enable the selection feature to DataGrid. Select row in gridview, it means the whole row line will be selected. The default selection setting of Kettic web GridView allows users select one row from the data grid. The C# code below demonstrates the default setting of this property.


KaxGrid1.MultiSelect = false;
KaxGrid1.SelectMode = GridViewSelectMode.SelectFullRows;

How to Select Grid Cell in C#

To select cells from asp.net data grid, we can change the value of the SelectMode property to SelectCell from the GridViewSelectMode enumeration. Select cell in gridview, it means only one cell in the row will be selected. The C# example code below shows how to achieve this.


KaxGrid1.MultipleSelect = false;
KaxGrid1.SelectMode = GridViewSelectMode.SelectCell;

How to Select Multiple Rows in C#

To perform the multiple rows selection, we need enable the MultipleSelect property first, and then set the SelectMode to GridViewSelectMode.SelectFullRows. The C# sample code below shows how to achieve this.


KaxGrid1.MultipleSelect = true;
KaxGrid1.SelectMode = GridViewSelectMode.SelectFullRows;

Click to Select a Row

Besides selecting rows and cell using C# language code programmatically in the aspx.cs class, users can also select single row in the asp.net gridview by clicking operation. While users click one row in the client side, this row will change to be with another background color to shown as selected dynamically. And the javascript will record this operation and the row index, then postback the parameters to the Kettic asp.net grid view control in the server side, so the gridview control can do the corresponding operation.
Set ClientSettings.Selecting.AllowRowSelect property is True, users can select a single data row by clicking current row. And users can change the style while the row is selected.

ASPX code:


<kettic:KaxGrid ID="KaxGrid1" runat="server" Width="500px" AllowPaging="true" PageSize="10" Height="300px"
    DataSourceID="SqlDataSource1">
    <ClientSettings>
        <Selecting AllowRowSelect="True" />
    </ClientSettings>
    <SelectedItemStyle ForeColor="White" BorderColor="Purple" BorderStyle="Dashed" BorderWidth="1px" />
</kettic:KaxGrid>

click to select single row in grid in asp.net ajax

If you want to select multiple rows, you need to set AllowMultiRowSelection property to True. There are two ways to select multiple rows in the asp.net data gridview.
The one is using Ctrl. When multi-row selection is enabled, pressing the Ctrl key down, you can click the wanted rows, and these rows will be selected after your click. What's more, the multiple selected rows can be in a discontiguous IDs.

click to select multiple rows in grid in asp.net ajax

click to select multiple rows in grid in asp.net ajax

The other is using Shift key. Pressing the Shift key down, the selected rows will be the rows between the two clicks. So that in this way, the selected rows must be continuous.

click and press shift to select rows in grid in asp.net ajax

click and press shift to select rows in grid in asp.net ajax

Selecting Rows with CheckBoxes

Another way is adding checkbox to select grid rows.
Here, you can add checkbox into two areas.
One is in HeaderItemTemplate, the checkbox will appear in the column header. Specify the OnCheckChanged event, so that when the checkbox is selected, all the rows in the asp.net grid is selected.
The other is in ItemTemplate, the checkbox will appear in each rows. Specify the OnCheckChanged event, so that when the checkbox is selected, the current row line in the grid will be selected.
ASPX code:


<kettic:KaxGrid ID="KaxGrid1" runat="server" Width="500px" PageSize="10" Skin="MetroBlue" DataSourceID="SqlDataSource1" AllowMultiRowSelection="true">
    <MainView>
        <Columns>
            <kettic:GridTemplateColumn>
                <HeaderTemplate>
                    <asp:CheckBox ID="chkAllSelect" runat="server" OnCheckedChanged="ChangeSelectedState"
                        AutoPostBack="True" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkSingleSelect" runat="server" OnCheckedChanged="ChangeRowSelection"
                        AutoPostBack="True" />
                </ItemTemplate>
            </kettic:GridTemplateColumn>
        </Columns>
    </MainView>
</kettic:KaxGrid>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="Select SupplierId,CompanyName,ContactName,Address,City From Suppliers"
    runat="server"></asp:SqlDataSource>

C# code:


protected void ChangeRowSelection(object sender, EventArgs e)
{
    ((sender as CheckBox).NamingContainer as GridItem).Selected = (sender as CheckBox).Checked;
    bool checkHeader = true;
    foreach (GridDataItem dataItem in KaxGrid1.MainView.Items)
    {
        if (!(dataItem.FindControl("chkSingleSelect") as CheckBox).Checked)
        {
            checkHeader = false;
            break;
        }
    }
    GridHeaderItem headerItem = KaxGrid1.MainView.GetItems(GridItemType.Header)[0] as GridHeaderItem;
    (headerItem.FindControl("chkAllSelect") as CheckBox).Checked = checkHeader;
}
protected void ChangeSelectedState(object sender, EventArgs e)
{
    CheckBox headerCheckBox = (sender as CheckBox);
    foreach (GridDataItem dataItem in KaxGrid1.MainView.Items)
    {
        (dataItem.FindControl("chkSingleSelect") as CheckBox).Checked = headerCheckBox.Checked;
        dataItem.Selected = headerCheckBox.Checked;
    }
}

Selecting Rows with Select Button

Be similar with selecting rows by checkbox, users can insert button into the asp.net gridview control to do the selection. There will be two button appear in each row, "select" and "unselect". Using "select" to select current row in web gridview, and using "unselect" to cancel the select before.
You can set GridButtonColumn with select and deselect commands to select grid rows.
ASPX code:


<kettic:KaxGrid ID="KaxGrid1" runat="server" Width="500px" PageSize="10" Skin="MetroBlue" DataSourceID="SqlDataSource1" AllowMultiRowSelection="True">
    <MainView>
        <Columns>
            <kettic:GridButtonColumn CommandName="Select" Text="Select" UniqueName="Select" HeaderText="Select">
            </kettic:GridButtonColumn>
            <kettic:GridButtonColumn CommandName="Deselect" Text="Deselect" UniqueName="Deselect" HeaderText="Deselect">
            </kettic:GridButtonColumn>
        </Columns>
    </MainView>
</kettic:KaxGrid>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="Select SupplierId,CompanyName,ContactName,Address,City From Suppliers"  runat="server"></asp:SqlDataSource>