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

Remove Item Client-Side

2 Answers 99 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Sergei
Top achievements
Rank 1
Sergei asked on 18 Aug 2011, 05:41 AM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Slav
Telerik team
answered on 23 Aug 2011, 09:19 AM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Sergei
Top achievements
Rank 1
answered on 25 Aug 2011, 03:35 AM
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

Tags
Rotator
Asked by
Sergei
Top achievements
Rank 1
Answers by
Slav
Telerik team
Sergei
Top achievements
Rank 1
Share this question
or