Multi-select control with RadGrid

[Brad]

How would one go about transferring an item(row) from one RadGrid to another, in a similar fashion to the RadListBox? Not looking for drag and drop, just a simple way to double click an item in grid 1 and then get added(transferred) to grid2. Being able to quickly remove items from grid2 would also be handy.
*FYI, I already accomplished this with 2 ListBoxes and it worked nicely, but of course, now I need to have more than 1 column in the left-hand listbox :(
Anyway, I feel like this is a fairly common scenario and must have been tackled already...
Thanks.

[Tsvetoslav]

Hello Brad,

Here are the steps to achieve your scenario.

1. Add a RadAjaxManager control to the page.

2. Make sure you have the following settings for the RadAjaxManager control:

<AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
        </UpdatedControls>
    </telerik:AjaxSetting>
</AjaxSettings>

3. Attach a server-side event handler to the OnAjaxRequest event for the ajax manager.

4. Attach a client-side handler for the OnRowDblClick client event of the grid.

5. In the client-side handler throw an ajax request as shown in the following help article:
http://www.telerik.com/help/aspnet-ajax/ajxclientsideapi.html

passing to the server-side method the item information needed to perform the transfer.

6. Server-side delete the item from the source grid's underlying data-source.

7. Add the item to the destination grid's underlying data-source.

8. Rebind the two grids.

Hope this helps.





All the best,
Tsvetoslav
the Telerik team

[Brad]

Ok, so I figured out a few of the details:
  ASPX GridEvent hook:

<ClientSettings>
   <Selecting AllowRowSelect="true" />     
   <ClientEvents OnRowDblClick="RowDblClicked" />
</ClientSettings>

 Client-side events

  function RowDblClicked(sender, args) {
                InitiateAjaxRequest(args);
                var cellValues = args.getDataKeyValue("ID")
            }
  function InitiateAjaxRequest(arguments) {
               var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                var cellVal1 = arguments.getDataKeyValue("ID")
               ajaxManager.ajaxRequest(cellVal1);
            }

Server-side event:

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            RadAjaxManager1.Alert("AjaxRequest raised from the " + e.Argument);
      }

Now I just need to update my db based on the ID I clicked. Thx.

[Tsvetoslav]

Hello Brad,

1. Now that you have the index of the row, you can obtain a reference of it in the following way:
 

GridDataItem item = RadGrid1.Items[Convert.ToInt32(e.Argument)];

2. Then you can get all the field values of the grid row as follows:

Hashtable fieldValues = new Hashtable();
item.ExtractValues(fieldValues);

3. Once you have the field values, you can use them for the update parameters of your update command - I am not sure whether you are using data-source objects or manual updates, but in any case the implementation logic will be quite similar.

All the best,
Tsvetoslav
the Telerik team