Remove Item Client-Side

[Sergei]

Hello,

I'm using RadRotator to display image and its ID from DB:

<telerik:RadRotator ID="thumbRotator" runat="server" RotatorType="Buttons" WrapFrames="false" Width="750px" Height="150px" ItemWidth="150px" ItemHeight="150px" >
      <ItemTemplate>
         <img id="imgAvatar" src='ViewImage.ashx?avatar=<%# Eval("ID") %>&width=150&height=150'
             alt="Avatar Image" style="border: 0px; cursor:pointer;" />
         <label id="label1" runat="server" title='<%# Eval("ID") %>'>
         </label>
      </ItemTemplate>
   <ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
</telerik:RadRotator>

There is a button on my WebPage which deletes record from DB. I use ajax request of RadAjaxManager:

function confirmCallBackFn(arg) {
   if (arg) {
      var id = HiddenField.Get('ID');
      if (id > 0) {
         var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
         ajaxManager.ajaxRequest('delete:' + id);
      }
   }
}

On Server side I delete record and do 

thumbRotator.DataBind();

So the rotator updates itself.
Everything works fine, except every time when I delete a record, I need to scroll back to the last position.
Imagine hundreds of images, I scroll through them, find one to delete, and then scroll again. A bit annoying.
I tried to set InitialItemIndex, but I've got mess
I tried to addCssClass, and was able to hide image, but it left empty cell in rotator.
So my question is there a way I can remove item from rotator on client side?

Thank you.

Regards,
Sergei

[Slav]

Hi Sergei,

The RadRotator's items cannot be removed from the client-side, as it will disrupt the calculations performed during the sliding of the rotator, thus the correct behavior of the control. Nevertheless, you can achieve the desired functionality by specifying the InitialItemIndex of the RadRotatror when the items are rebinded, as you correctly guessed, but couldn't implement.

In order to set the correct index, please follow these steps:

1. You can get the index of the current item, which will be deleted, on the client by referencing the item with RadRotator's property get_currentItem() and the index with get_index().

2. Then you can store the index in a hidden field on your page.

3. On the AjaxRequest event of the RadAjaxManager, you can get the value of the hidden field, which is the current item index. This index can be used as a base to set the InitialItemIndex of the rotator to the next element, for example.

I have attached a sample project, implementing the suggested solution. The logic is executed on the client-side OnClientItemClicked event of the RadRotator, as most probably the item will have to be selected in order to delete it. Please use this sample as a reference to incorporate the functionality in your actual project.

Greetings,
Slav
the Telerik team

[Sergei]

Hello Slav,

Thank you for reply.
Actually I tried this approach before. It worked, but was a little bit ugly because I set WrapFrames=false and showed several items in rotator.
If I wrap frames and don't increase InitialItemIndex by 1 it looks better.

Best regards,
Sergei