Remove Item Client-Side

3 posts, 1 answers
  1. Sergei
    Sergei avatar
    2 posts
    Member since:
    Nov 2010

    Posted 18 Aug 2011 Link to this post


    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" >
             <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") %>'>
       <ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
    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 
    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.

  2. Answer
    Slav avatar
    1351 posts

    Posted 23 Aug 2011 Link to this post

    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.

    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.

  3. DevCraft R3 2016 release webinar banner
  4. Sergei
    Sergei avatar
    2 posts
    Member since:
    Nov 2010

    Posted 24 Aug 2011 Link to this post

    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,

Back to Top