Moving rows between grids with JavaScript

[Zach Alsgaard]

We have several places in our code where we need to move rows from one grid (Grid A) to another grid (Grid B) (with the same structure and on the same page).  We currently have our code running fine with AJAX calls to server-side functions, but it would be a lot faster if we could do this with pure client-side calls (I don't see any reason why this wouldn't be possible seeing as we already have all the data loaded on the page that we need to do this).  So far my JavaScript code has been working fine (I get the selected rows from the Grid A, move them to Grid B, and delete the rows from Grid A), but I have run into two issues:

1) Both grids have a Grid Template Column that have an Image and a RadToolTip control.  The image is just a simple information button that displays the tooltip with a full description about the item.  The column is defined like this:

<telerik:GridTemplateColumn SortExpression="Description"         ItemStyle-HorizontalAlign="Center" HeaderText="Description"         AllowFiltering="true" UniqueName="TemplateColumn">

<ItemTemplate>

<asp:Image ID="ItemDescriptionImage" BorderWidth="0px"               ImageUrl="~/images/desc.gif" Style="cursor: default;"               runat="server"></asp:Image>

<telerik:RadToolTip ID="rttItemDescription" runat="server"              Width="150px" TargetControlID=" ItemDescriptionImage "               RelativeTo="Element" Position="MiddleRight"               ShowEvent="OnMouseOver">

<%# (Container.DataItem).Description %></telerik:RadToolTip>

</ItemTemplate>

</telerik:GridTemplateColumn>

You can see the description is dynamically loaded for each item (late binding) with the <%# (Container.DataItem).Description %> code.

When I move the row from Grid A to Grid B, the tooltips are lost (I think because I am generating new ID's for the rows after they are moved to Grid B - this is based on the code I found on your Grid Client Demo page here).  The JavaScript code looks like this:

var tableView = $find(gridId).get_masterTableView();
var dataItems = tableView.get_dataItems();
var columns = tableView.get_columns();

var newRow = tableView.get_element().insertRow(-1);

var lastDataItem = dataItems[dataItems.length - 1];
var lastId = lastDataItem.get_id();

var lastIdIndex = parseInt(lastId.split("__")[1]) + 1;

newRow.id = lastId.split("__")[0] + "__" + lastIdIndex;

newRow.className = dataItems[dataItems.length - 1].get_element().className;

Is there any way to move the tooltip with the row from Grid A to Grid B?


2) After rows have been moved from Grid A to Grid B, both grids lose the ability to Sort their data (I get the following exception):

The state information is invalid for this page and might be corrupted. 

I noticed that the Grid Client Demo does not have Sorting turned on, so I'm not sure what to do to get this to work...  This is probably the result of something I've done wrong, so I'm not as concerned about this issue yet.


Thank you very much for your help!



 

[Svetlina Anati]

Hi Zach,

You can use client-side sorting similar to these examples:

http://blogs.telerik.com/VladimirEnchev/Posts/08-05-23/SQL_Server_sorting_paging_and_filtering_with_RadGrid_client-side_data-binding_to_WebService.aspx?ReturnURL=%2fVladimirEnchev%2fPosts.aspx
http://www.telerik.com/demos/aspnet/prometheus-futures/Grid/Examples/Client/DataBinding/DefaultCS.aspx

I also strongly recommend to use the approach shown here in order to organize the moving of the row. I tested it with a RadToolTip in a template column and everything worked as expected - the tooltip was shown after the row was moved in the second grid.

In case this does not help, please open a new support ticket and send a sample, fully working demo project (including a DB, if needed) along with a detailed explanation of the problem. Once I receive it, I will do my best to help.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center