Showing Indicator for Selected Items

To provide additional feedback about the selected row, you can display a row indicator beside each selected row. The row indicator then clearly shows that the row has been selected. To add a selection indicator:

1. Place an html image inside template column.

2. Handle the OnRowSelected and OnRowDeselected client-side events.

3. In the event handlers, show or hide the image in the template column to reflect the selection state of the row.

The following example shows how to access the template image and show or hide it to reflect the selection state of a row:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
  function RowDeselected(sender, eventArgs) {
    var MasterTable = sender.get_masterTableView();
    var row = eventArgs.get_gridDataItem();
    var cell = MasterTable.getCellByColumnUniqueName(row, "ArrowColumn");
    var image = cell.getElementsByTagName("IMG")[0];
    image.style.display = "none";
  }
  function RowSelected(sender, eventArgs) {
    var MasterTable = sender.get_masterTableView();
    var row = eventArgs.get_gridDataItem();
    var cell = MasterTable.getCellByColumnUniqueName(row, "ArrowColumn");
    var image = cell.getElementsByTagName("IMG")[0];
    image.style.display = "block";
  }
  function RowCreated(sender, eventArgs) {
  }      
</script>
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowSorting="True"
  Skin="Web20" Width="95%" AllowMultiRowSelection="true" AllowPaging="true" ShowGroupPanel="true">
  <MasterTableView Width="100%">
    <Columns>
      <telerik:GridTemplateColumn UniqueName="ArrowColumn">
        <ItemTemplate>
          <img src="arrow.GIF" style="display: none;" />
        </ItemTemplate>
        <HeaderStyle Width="30px" />
      </telerik:GridTemplateColumn>
    </Columns>
  </MasterTableView>
  <ClientSettings AllowDragToGroup="true">
    <Selecting AllowRowSelect="true" />
    <ClientEvents OnRowDeselected="RowDeselected" OnRowSelected="RowSelected" OnRowCreated="RowCreated" />
  </ClientSettings>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"   
    SelectCommand="SELECT TOP 10 [CustomerID], [ContactName], [ContactTitle], [Address] FROM [Customers]">
</asp:SqlDataSource>

The empty OnRowCreated event handler is needed to initialize the get_gridDataItem() parameter value from within the OnRowSelected handler (designed in such a way due to performance reasons).