Grid - Row Selection

Client-Side Row Selection

Customer IDCompany NameContact NameContact TitleAddressPostal Code
ALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 5712209
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 222205021
ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 231205023
AROUTAround the HornThomas HardySales Representative120 Hanover Sq.WA1 1DP
BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8S-958 22
BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 5768306
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place Kléber67000
BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 6728023
BONAPBon app'Laurence LebihanOwner12, rue des Bouchers13008
BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.T2F 8M4

Server-Side Row Selection

  Customer IDCompany NameContact NameContact TitleAddressPostal Code
SelectDeselectALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 5712209
SelectDeselectANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 222205021
SelectDeselectANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 231205023
SelectDeselectAROUTAround the HornThomas HardySales Representative120 Hanover Sq.WA1 1DP
SelectDeselectBERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8S-958 22
SelectDeselectBLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 5768306
SelectDeselectBLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place Kléber67000
SelectDeselectBOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 6728023
SelectDeselectBONAPBon app'Laurence LebihanOwner12, rue des Bouchers13008
SelectDeselectBOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.T2F 8M4

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The example shows the client selection built-in feature of Telerik RadGrid. Single row can be selected by clicking the row itself (note that you need to set AllowRowSelect="true" to enable client row selection). There is also a GridClientSelectColumn, which you can use to select and unselect row(s) client-side. You can use it to select all the rows using the check box at the header.

Furthermore, you can select multiple rows after setting the AllowMultiRowSelection property of the grid to true. Several rows can be selected either by:

  • holding the Ctrl key when clicking the rows
  • dragging a region with the mouse to select all underlying rows. To accomplish this task you have to set the ClientSettings -> Selecting -> EnableDragToSelectRows property to true.
  • clicking a row, holding the Shift key and clicking another row upwards/downwards
Later on, you can unselect a row by holding the Crtl key and clicking the row. You don't need this if you have GridClientSelectColumn added.

Additionally, the GridItem provides SelectableMode property which could be set to:
  • None.
  • ServerSide.
  • ServerAndClientSide (the default value).

The selected items will be available through the SelectedRows client collection of the respective RadGridTable.

Finally, there is also a checkbox column (called GridClientSelectColumn which displays a checkbox control for each item in the column. This allows you to select grid rows client-side automatically when you change the status of the checkbox to checked. Additionally, if you choose AllowMultiRowSelection = true for the grid, a checkbox will be displayed in the column header to toggle the checked/selected state of the rows simultaneously (according to the state of that checkbox in the header). To allow selection through the client select column only, set the ClientSettings -> Selecting -> UseClientSelectColumnOnly property to true (default value is false).
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Functionality.Selecting.ServerAndClientSideRowSelection.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <telerik:RadAjaxManager runat="server" UpdateInitiatorPanelsOnly="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel" />
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <h4>Client-Side Row Selection</h4>
    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" AllowMultiRowSelection="true" Width="100%"
        runat="server" AllowSorting="True" GridLines="None" OnPreRender="RadGrid1_PreRender">
        <MasterTableView>
            <Columns>
                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">
                </telerik:GridClientSelectColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings EnableRowHoverStyle="true">
            <Selecting AllowRowSelect="True"></Selecting>
            <ClientEvents OnRowMouseOver="demo.RowMouseOver" />
        </ClientSettings>
    </telerik:RadGrid>
    <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" ShowEvent="FromCode" AutoCloseDelay="0">
        <qsf:MessageBox ID="InformationBox1" runat="server">
            <b>The code below sets the two RadGrid items SelectableMode property to None which allows to disable items for selection.
            </b>
            <div class="toolTipCode">
                <pre>
protected void RadGrid1_PreRender(object sender, EventArgs e)
{
   RadGrid1.Items[4].SelectableMode = GridItemSelectableMode.None;
   RadGrid1.Items[5].SelectableMode = GridItemSelectableMode.None;
}
</pre>
            </div>
        </qsf:MessageBox>
    </telerik:RadToolTip>
    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server">
    </telerik:RadToolTipManager>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 10 CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
        runat="server"></asp:SqlDataSource>
    <br />
    <h4>Server-Side Row Selection</h4>
    <telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" DataSourceID="SqlDataSource1" Width="100%"
            ShowStatusBar="true" runat="server" AllowPaging="True"
            AllowSorting="True" AllowMultiRowSelection="True">
            <MasterTableView PageSize="10">
                <Columns>
                    <telerik:GridButtonColumn Text="Select" CommandName="Select" ButtonType="LinkButton">
                    </telerik:GridButtonColumn>
                    <telerik:GridButtonColumn Text="Deselect" CommandName="Deselect" ButtonType="LinkButton">
                    </telerik:GridButtonColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings EnableRowHoverStyle="true">
            </ClientSettings>
            <PagerStyle Mode="NumericPages"></PagerStyle>
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>
    <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
        runat="server"></asp:SqlDataSource>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Auto">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxMultiRowSelection" runat="server" AutoPostBack="True" Checked="true"
                                    Text="Allow multi-row selection (first grid only)" OnCheckedChanged="CheckBoxMultiRowSelection_CheckedChanged"></asp:CheckBox></span></li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxDragToSelect" runat="server" AutoPostBack="True" Checked="true"
                                    Text="Enable drag to select multiple rows (first grid only)" OnCheckedChanged="CheckBoxDragToSelect_CheckedChanged"></asp:CheckBox></span></li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBoxClientSelectColumn" AutoPostBack="True" runat="server" Text="Use only GridClientSelectColumn to select rows (first grid only)"
                                    OnCheckedChanged="CheckBoxClientSelectColumn_CheckedChanged"></asp:CheckBox>
                            </span></li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?