This is a migrated thread and some comments may be shown as answers.

Ajaxified Grid Reloads Content for Row Selection

1 Answer 29 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 04 Nov 2013, 12:35 AM

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>

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 06 Nov 2013, 04:51 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Nick
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or