I like the client-side functionality of Telerik’s RadGrid for ASP.NET AJAX. I especially like having the ability to select a row in the grid with a single click of the mouse, much more so than having to use a checkbox or select button. Clicking the row itself seems to me like a more natural way to interact with the grid, and adding a control to each row for the simple purpose of selecting that row adds noise to the grid and takes up valuable column space.

So how can we process a row selection on the server, but still take advantage of the client-side select functionality? Unfortunately, enabling the single-click-selection on the client doesn’t do us any good unless we process the user interaction on the client. We need to manually force the grid to persist the selected row to the server. Thankfully, the RadGrid has a rich client- and server-side API available that allows us to implement this functionality very easily.

First, add the following client settings in the RadGrid to enable the client-side selection of rows. Don’t forget to add the OnRowSelected client-side event handler because you need to manually handle each row selection using client script.

<telerik:RadGrid ID="rgData" runat="server">
    <ClientSettings>
        <ClientEvents OnRowSelected="rowSelected" />
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>

Add a RadAjaxManager to the page and configure it so that it updates the grid asynchronously whenever a user interacts with the grid on the client.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rgData">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="rgData" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Next, insert a RadCodeBlock at the bottom of the page and add a JavaScript block containing the OnRowSelected event handler. In this event handler you need to get a reference to the RadAjaxManager client-side object and call its ajaxRequestWithTarget() function, passing in the UniqueID of the grid as the first parameter (eventTarget) and the selected index as the second parameter (eventArgument).

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function rowSelected(senders, args) {
            var ajaxManager = $find('<%= RadAjaxManager1.ClientID %>');
            var selectedIndex = args.get_itemIndexHierarchical();
            ajaxManager.ajaxRequestWithTarget('<%= rgData.UniqueID %>', selectedIndex);
        }
    </script>
</telerik:RadCodeBlock>

On the server, you need to override the Page’s RaisePostBackEvent method. This method calls the IPostBackEventHandler.RaisePostBackEvent() method (which I discussed in a recent post) of the server-side component that caused the postback that it should handle an incoming postback event. During this method you should obtain a reference to the GridDataItem that was selected by accessing the server-side RadGrid object’s Items property and passing in the eventArgument (which holds the selected index value) to the indexer. You can use the GridDataItem’s FireCommandEvent() method to fire off a Select command and force a SelectedIndexChanged event to be raised. This has two advantages: (1) it allows us to handle the SelectedIndexChanged event on the server to perform any custom logic, and (2) it persists the selected index back to the client when the page is returned. Here is the full method implementation:

protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
{
    base.RaisePostBackEvent(sourceControl, eventArgument);
    var grid = sourceControl as RadGrid;
    if (grid != null)
    {
        var gridItem = grid.Items[eventArgument];
        gridItem.FireCommandEvent(RadGrid.SelectCommandName, String.Empty);
    }
}

With these simple changes it is possible to use the client-side select feature of the RadGrid to select grid rows and still handle those selections on the server using the appropriate server-side event. If you want to take this a step further, you can use the same technique to persist most of the RadGrid’s other client-side events to the server as well. Enjoy!

[Source Code]