Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Cell Selection

 Selected Client-Side Events

 Deselected Client-Side Events

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

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.

C# VB
Show code in new window Demo isolation steps
<%@ 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 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>Cell selection functionality in AJAX GridView | RadGrid Demo</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="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <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>
    <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>
            <%--<telerik:RadDropDownList AutoPostBack="true" runat="server" ></telerik:RadDropDownList>--%>
            <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>
    <asp:Panel ID="ConfiguratorPanel1" CssClass="configurator" runat="server">
        <div class="selectSection">
            <table>
                <tr>
                    <td>
                        <label for="columnNameSelect">Select column:</label>
                    </td>
                    <td>
                        <input id="columnNameSelect" type="text" value="Company Name" />
                    </td>
                    <td></td>
                    <td>
                        <input type="button" value="Select" onclick="selectColumn()" style="width: 100px" />
                    </td>
                </tr>
            </table>
            <h3 style="font-size:14px;">&nbsp;Selected Client-Side Events</h3>
        </div>
        <div class="deselectSection">
            <table>
                <tr>
                    <td>
                        <label for="columnNameDeselect">Deselect column:</label>
                    </td>
                    <td>
                        <input id="columnNameDeselect" type="text" value="Company Name" />
                    </td>
                    <td></td>
                    <td>
                        <input type="button" value="Deselect" onclick="deselectColumn()" style="width: 100px" />
                    </td>
                </tr>
            </table>
            <h3 style="font-size:14px;">&nbsp;Deselected Client-Side Events</h3>
        </div>
        <div id="cellSelectedEvents" class="selectEvents">
        </div>
        <div id="cellDeselectedEvents" class="deselectEvents">
        </div>
    </asp:Panel>
    <telerik:RadGrid 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>
    </form>
</body>
</html>