Approved
Last Updated: 28 Mar 2019 15:05 by ADMIN
SWAT
Created on: 22 Jan 2019 14:04
Category: ImageGallery
Type: Bug Report
0
Items without title and description prevent other items displaying them
When you have 3 documents with picture, and texts in all - the texts are shows as expected. but when one of them does not have text and title, the loop of the gallery stop showing it for the other pictures.

<telerik:RadImageGallery ID="RadImageGallery1" runat="server">
    <ThumbnailsAreaSettings ThumbnailWidth="140px" Width="140px" Position="Left" ScrollOrientation="Vertical" />
    <Items>
        <telerik:ImageGalleryItem ImageUrl="Images/Yoga.jpg" Title="Title 1" />
        <telerik:ImageGalleryItem ImageUrl="Images/Swimming.jpg" Title="Title 2" />

            <%-- Title container disappears here and will not show up with the rest of the items --%>
        <telerik:ImageGalleryItem ImageUrl="Images/Surfing.jpg" /> 

        <telerik:ImageGalleryItem ImageUrl="Images/Snowboarding.jpg" Title="Title 4" />
        <telerik:ImageGalleryItem ImageUrl="Images/Skiing.jpg" Title="Title 5" />
    </Items>
</telerik:RadImageGallery>
1 comment
ADMIN
Attila Antal
Posted on: 22 Jan 2019 14:27
We've found two workaround that might be feasible in some scenarios:

Workaround 1

Define the Title property and use "white-space" as value (see marked with yellow)

<telerik:RadImageGallery ID="RadImageGallery1" runat="server">
    <ThumbnailsAreaSettings ThumbnailWidth="140px" Width="140px" Position="Left" ScrollOrientation="Vertical" />
    <Items>
        <telerik:ImageGalleryItem ImageUrl="Images/Yoga.jpg" Title="Title 1" />
        <telerik:ImageGalleryItem ImageUrl="Images/Swimming.jpg" Title="Title 2" />
        <telerik:ImageGalleryItem ImageUrl="Images/Surfing.jpg" Title=" " />
        <telerik:ImageGalleryItem ImageUrl="Images/Snowboarding.jpg" Title="Title 4" />
        <telerik:ImageGalleryItem ImageUrl="Images/Skiing.jpg" Title="Title 5" />
    </Items>
</telerik:RadImageGallery>

Workaround 2

Using JavaScript withing the OnImageLoading client-event:

<telerik:RadImageGallery ID="RadImageGallery1" runat="server">
    <ClientSettings>
        <ClientEvents OnImageLoading="OnImageLoading" />
    </ClientSettings>
     <%-- Items --%>
 </telerik:RadImageGallery>

OnImageLoading event handler:

function OnImageLoading(sender, args) {
    var item = args.get_item();
    if ((item.get_title() || item.get_description()) && sender.isPlaying()) {
        var rig = $(sender.get_element());
        var hiddenControl = rig.find(".rigPrevButton:hidden, .rigNextButton:hidden, .rigDescriptionBox:hidden");
        if (hiddenControl.length) {
            hiddenControl.show();
        }
    }
}