New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Cell 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
  • Demo Configurator

 Selected Client-Side Events

 Deselected Client-Side Events

This example demonstrates RadGrid's cell selection functionality which is controlled through the ClientSettings.Selecting.CellSelectionMode property:

  • SingleCell: switches on the single cell selection functionality.
  • MutliCell: allows for the selection of multiple cells.
  • Column: enables single column selection by clicking on a grid column header.
  • MultiColumn: turns on multi column selection for RadGrid.

RadGrid's cells can be selected with the mouse, through the keyboard or both. Regardless of the method cell selection is applied through, the following three rules always hold true: if a given cell is currently in a non-selected state and cell selection is inflicted upon it, then the cell is selected; if a given cell is currently in a selected state and cell selection is inflicted upon it, the cell will be deselected; if cell selection is applied to a certain cell or a set of cells and neither the shift nor the ctrl keys are being held, then any previously selected cells will be deselected. The same rules go for column selection.

N.B.: The selected state of RadGrid's cells is persisted on postback but not on rebinding the grid.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Scripts.js
  • Styles.css
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Functionality.Selecting.CellSelection.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="Scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
    <telerik:RadAjaxManager runat="server" UpdateInitiatorPanelsOnly="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ddlCellSelectionMode">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>


    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" GridLines="None">
        <MasterTableView ClientDataKeyNames="CustomerID">
        </MasterTableView>
        <ClientSettings AllowKeyboardNavigation="true">
            <ClientEvents OnGridCreated="gridCreated" OnCellSelected="cellSelected" OnCellDeselected="cellDeselected"></ClientEvents>
            <Selecting CellSelectionMode="MultiColumn"></Selecting>
        </ClientSettings>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT TOP 10 CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
        runat="server"></asp:SqlDataSource>
        </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel2" runat="server" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" CssClass="selectColumn">
                    <asp:Panel ID="ConfiguratorPanel" runat="server" Style="overflow: hidden; margin-bottom: 40px;">
                        <div id="config" style="float: left">
                            <label for="dllCellSelectionMode">Choose cell selection mode:</label>
                            <asp:DropDownList AutoPostBack="true" ID="ddlCellSelectionMode" runat="server" Style="width: 200px"
                                OnSelectedIndexChanged="ddlCellSelectionMode_SelectedIndexChanged">
                                <asp:ListItem Text="None" Value="None"></asp:ListItem>
                                <asp:ListItem Text="SingleCell" Value="SingleCell"></asp:ListItem>
                                <asp:ListItem Text="MultiCell" Value="MultiCell"></asp:ListItem>
                                <asp:ListItem Text="Column" Value="Column"></asp:ListItem>
                                <asp:ListItem Text="MultiColumn" Value="MultiColumn" Selected="True"></asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </asp:Panel>
                    <div class="selectColumn">
                        <div class="selectSection">
                            <label for="columnNameSelect">Select column:</label>
                            <input id="columnNameSelect" type="text" value="Company Name" />
                            <input type="button" value="Select" onclick="selectColumn()" style="width: 100px" />
                            <h3 style="font-size: 14px;">&nbsp;Selected Client-Side Events</h3>
                        </div>

                        <div id="cellSelectedEvents" class="selectEvents">
                        </div>
                    </div>
                    <div class="deselectColumn">
                        <div class="deselectSection">
                            <label for="columnNameDeselect">Deselect column:</label>
                            <input id="columnNameDeselect" type="text" value="Company Name" />
                            <input type="button" value="Deselect" onclick="deselectColumn()" style="width: 100px" />
                            <h3 style="font-size: 14px;">&nbsp;Deselected Client-Side Events</h3>
                        </div>
                        <div id="cellDeselectedEvents" class="deselectEvents">
                        </div>
                    </div>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance