RadRotator Load On Demand with 2 rotators on the page

5 posts, 1 answers
  1. Eric
    Eric avatar
    7 posts
    Member since:
    Jul 2011

    Posted 31 Oct 2011 Link to this post

    Hello-
    We are implementing a media gallery and are using 2 Rad Rotators on the page, one of 4 images, small thumbnails, and one below of just 1 large image, which will show the details when the user clicks on the image on the top.

    We are using the load on demand web service for both rotators, as some of the albums have 100's of images. Everything works fine on the top rotator, clicking next loads the next 10 images from the webservice, etc.

    The problem is when the user pages through the small rotator to items 11-20, and clicks on one of the images. The large rotator at this point only has 10 items in it, so using javascript to call set_itemIndex does nothing. Is there a way we can programatically (through javascript ideally) call the webservice to load the next set of items in the bottom rotator?

    Thanks

    Eric
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 03 Nov 2011 Link to this post

    Hi Eric,

    You can achieve your desired scenario much easier by adding an HTML img element, which will be used for the detailed view. All you have to do is handle the OnClientItemClicked event of the RadRotator in order to set the path for the detailed image, depending on the currently clicked item. I have implemented this approach into the attached sample project. Note that for the purpose of demonstration I have used the src of the clicked image in the RadRotator in order to set the detailed image, while you can specify a new directory to a detailed version of the image. Please use the provided sample as a reference for incorporating the feature into your actual project.

    In case the second RadRotator is used for other purposes as well and you aren't able to remove it, please specify the exact functionality it implements so that we can suggest an according solution.

    Regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eric
    Eric avatar
    7 posts
    Member since:
    Jul 2011

    Posted 03 Nov 2011 Link to this post

    Hi Slav-
    We have considered doing this, however it does not work for our business needs.

    The idea behind the 2 rotators is that the user can page through the top rotator (seeing 4 images at a time), and when they click on one of the images, the large image shows that. The use case that you provided works great for that. However, we also want the user to be able to click through the large rotator. So when they click through the large rotator, the top rotator moves with the bottom one, so each time they click through the bottom one, the image on the top is highlighted.
    We have lots of customized javascript for communication between the rotators (more or less setting the item index of the rotator that was not clicked), and it works fine. Moving to the loading of images on demand breaks this javascript, as the image index requested is not there.
    So in theory, the top rotator might need to be called to get more images as well, if the user pages through 10 images on the bottom, the top will need to be called to retrieve the next set of 10 images, as the bottom one will work properly.

    So, is there any way to on demand call the webservice to load the next 10 images? I assume there must be some hidden/undocumented function that the next button click inside the rotator is doing that we could hijack/use.

    Thanks

    Eric
  5. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 08 Nov 2011 Link to this post

    Hi Eric,

    The method you could use to force loading items is _loadChildrenFromWebService(index). In addition, there was a js error which is now fixed. I included an override for it in the sample page as well as a show case of the usage of the items load method. Please, remove the override once you upgrade to the next official version of RadControls.


    Kind regards,
    Svetlina Anati
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Eric
    Eric avatar
    7 posts
    Member since:
    Jul 2011

    Posted 08 Nov 2011 Link to this post

    That function worked perfectly. So now I can control loading more items from either rotator, I am using the OnClientItemsRequested function to capture the number of items in each rotator, and if they are different to call the appropriate web service to update the other rotator. Thanks for the help.

    Eric
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017