[Solved] Ajaxified Grid Reloads Content for Row Selection

[Nick]

I have the below code to attempt to ajaxify my grid and subsequent detail panel. It works but the trouble is when I click my "select" link on a row, the style doesn't change to selected row as I have not re-drawn the grid (grid not part of the updated controls list).  I do this intentionally because I don't want to reload the entire grid if no data has changed (it is simply a row selection).  The grid also has sorting enabled which does not function unless I add the grid to the updated control list. So the question is, how to I retain server sorting control but also allow simple row selection without having to pull the whole grid down again?

Thanks

<AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rgMemberList">
                    <UpdatedControls>
                      <telerik:AjaxUpdatedControl ControlID="pnlMemberDetail" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>

[Viktor Tachev]

Hello Nick,

In order to select a row in the RadGrid on the client and prevent postback you could use couple of approaches.

One method is to use a GridClientSelectColumn. It renders a checkbox that could be used to select a row client-side. To use this column for selecting you would need to enable the ClientSettings-Selecting-AllowRowSelect property for the RadGrid. The following should be added to the definition of the RadGrid:

<ClientSettings>
    <Selecting AllowRowSelect="True" />
</ClientSettings>

<Columns>
    <telerik:GridClientSelectColumn UniqueName="SelectColumn"></telerik:GridClientSelectColumn>

    . . .
</Columns>

Another option is to use a GridButtonColumn with CommandName property set to Select. With this approach you would need to use some JavaScript code to detect the command and prevent postback. The declaration of the column would look similar to this:

<telerik:GridButtonColumn Text="Select" ButtonType="LinkButton" CommandName="Select"></telerik:GridButtonColumn>

There should also be added a handler for the OnCommand client event.

<ClientSettings>
    <ClientEvents OnCommand="clientCommand" />
</ClientSettings>

The handler would look similar to this:

function clientCommand(sender, args) {
    var masterTableView = sender.get_masterTableView();

    var commandName = args.get_commandName();
    var commandArgument = args.get_commandArgument();

    if (commandName == "Select") {
        args.set_cancel(true);
        masterTableView.selectItem(commandArgument);
    }
}

Let me know if this information is helpful to you.

Regards,
Viktor Tachev
Telerik