click Thumbnail image event ?

3 posts, 0 answers
  1. Liu
    Liu avatar
    14 posts
    Member since:
    May 2014

    Posted 24 Dec 2016 Link to this post

    Hi:

    because I don't need ImageArea, and only need ThumbnailsArea, so I hide ImageArea !

    I need when user click each image (not scroll or next) at ThumbnailsArea, I can fire some client event , and wish get some information about user selected image. How can I do ?

        <style type="text/css">
            .RadImageGallery .rigActiveImage {
                display:none !important;
            }
        </style>

    <telerik:RadImageGallery ID="RadImageGallery1" runat="server" Width="550px" Height="100px" ImagesFolderPath="~\img\"   >
                    <ThumbnailsAreaSettings ShowScrollButtons="true" Mode="Thumbnails"  ScrollButtonsTrigger="Hover" Position="Top" ThumbnailsSpacing="10"/>
                    <ImageAreaSettings ShowDescriptionBox="False" ShowNextPrevImageButtons="False"  />
                    <ToolbarSettings Position="None" ShowFullScreenButton="false" ShowSlideshowButton="false" ShowThumbnailsToggleButton="false" />
     </telerik:RadImageGallery>

  2. Liu
    Liu avatar
    14 posts
    Member since:
    May 2014

    Posted 24 Dec 2016 in reply to Liu Link to this post

    by default, when I click ThumbnailsArea image, the ImageArea will show image that I selected. I want add some code for this event (for example, reload some grid), how can I do ? 
  3. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1858 posts

    Posted 27 Dec 2016 Link to this post

    Hi Liu,

    The OnNavigated event will fire when you click on a thumbnail for changing the active image or when you change the image with the RadImageGallery navigation:
    ...
        <ClientSettings>
            <ClientEvents OnNavigated="navigated" />
        </ClientSettings>
    </telerik:RadImageGallery>
     
    <script>
        function navigated(sender, args) {
            alert("image changed");
        }
    </script>

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top