Dynamically set image gallery main image

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 23 Feb 2023 12:46 by ADMIN

Aaron

Created on: 22 Feb 2023 18:01

Category: ImageGallery

Type: Bug Report

Dynamically set image gallery main image

Hi,

I have an image gallery control that gets the image items added to it at runtime. After the page is done loading, the default main image is blank. How do I programmatically set the main image to the first image?

I've attached a screenshot of the function that adds the image items as well as the finished rendered page result.

Thanks

Attached Files:

1 comment

ADMIN

Rumen

Posted on: 23 Feb 2023 12:46

Hi Aaron,

Thank you for reporting this issue! I verified that it is a bug and logged it for fixing. I also made your ticket a public bug report so that everyone who experiences it can find it along with the two workarounds below:

Workaround 1: Programmatically click on the first thumbnail item to load it in the Image Preview area (main image):

ASPX

<script>
    function pageLoad() {
        var galleryControlID = $find("<%=gallery.ClientID%>").get_id();
            $telerik.$("#" + galleryControlID + "_ThumbnailsArea_ctl04_ctrl0_BinaryImage").click();
            // or $telerik.$(".rigThumbnailActive").find("img")[0].click();
    }
</script>
<telerik:RadImageGallery ID="gallery" RenderMode="Lightweight" runat="server" Width="600px" Height="480px">
    <ThumbnailsAreaSettings ThumbnailWidth="140px" Width="140px" Position="Left" ScrollOrientation="Vertical" />
</telerik:RadImageGallery>

Codebehind

protected void Page_Init(object sender, EventArgs e)
{
        ImageGalleryItem img2 = new ImageGalleryItem();
        string base64image = "iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAdVBMVEX///8AAADT09NSUlKYmJjn5+fi4uL09PT4+PjW1tZwcHDv7+9KSkr7+/tXV1ctLS3BwcEnJydGRkaenp54eHgMDAxqamq7u7scHByPj486Ojrc3Nyzs7MhISHGxsY9PT0UFBRkZGRdXV2IiIh+fn6tra2jo6OYwvZMAAAE80lEQVR4nOWdAXLiMAxF4xIgUCC0EEqgQIF273/EhWE6y1Kgzp/teJ/0T6A3diTZkeQs+29V5K1eaht+VN08hNZDait+UEfAEEZ2EU+AhhE/Ac0iFnUIphGLPATTiN06/CVzHvUSMISBrbjYratLQlur2K3fvgCaQrwOaAixuLJFTSE+vt/gs4LY7t8GPCDyPWp7dg/wEDToq/gdIH6jfg8IT+BiANGIcYBgxFhALOL9MGEAsdMAEOlRmwECD1NNAXGr2OnfSraNICqAIexSmx2v5lv0qGqd2u5oNQkTZ+JsUhGwSG13tJYDha8CAT4pgOVjarujtSwVwE07td3R0gAHndR2R6snbdHWMrXd0dIAR5yM9GGhAO5AgBvjgOtnBRC0RddSoAddCGuAA44XFVeQEwcfpG9wx8lFNS/aSm12vHpSHFykNjteYqqW2ux4aYCgO5n19V/032jLcTJjhS/MOAdeDbBvHXDKOdG/KHwVCPB1bnwFX6UwQQJULp2qd+uAOceLSoAh5wR67RvMh6ntjtaL5EXz1GbHSwv0dWqz46UBml9B64AVx8kMJcA5J0wMPxTAVd5NbXisil8K4BMIcKIBYlI1DbCcYAC7uXLptHjFbNFurqRq5QsmTGiAqzEGsJAAq3Fqu6NVTKSLX04tnuZFQYBDKdCDAM2voJaqgephNcAVyItKgCUHcCh9gwtQJiOt4IYD2P4yJyBGrTUHcCoBcoruOxIgqLG3M1UaX56tAy44xYZtCbDkFBtqTqbi/P98lAAD5s7JAaDWXWcdsAR9gxLgguNFNcBnThzUALegFZS8aJ9TdK8FehCgdpoAAT5EDyM51wwE2FIAt5w4qAHurAOOOKlaT2s+w1SRZEupNwvU2dORerNIgFobfWqz46UBjjjfoARY7Y0DvtWYMhkNcF5z4uBS8aIrEGBPiYMlpxYvy3YCIGlOQJaNV9bXMFtL5Wqg71AcC0TypQ7ioZrT1JycRs1La0w9QiYjpja7ibTz4T612U2knfGnqc1uIvP3NA7u2hzclzq481YRQf8tDoiSuwH9exIPxCxE6VKDhaglcDOSu9GGcaM8qlaNsSOFfg0RdMnvoK7NQW2iC0TzNcIO6rwd1Oo76Ldw0DPjoO/JBaIWF1mIUgKH+hY1xA2nD/iAKPWRgnq5HfTjO5ip4GAuhotVND+fxsGMIXlOFGe6goNZX/K8NhKi5lEdIG4+QOVT4jieCQhRG8gDml+qriJoBq180uDMEVYRSbOgHYy7djCT3cFcfQdvIzh430J+owQU+jXEOaoXRfoW53vSb2Lz7z05eLPLwbtrDt7Oc/D+oYoIesNSRQS9Q6oigt6SzbKl9feAHbzp7OBdbvVt9S0paIjPx5NKGUVEUinjWvoWRyREzaPuUIhSXEQhag/JozaqhojyqNKQjTAgtb5piBvSqX8pbdSSlN1o32JFylF7UtAIJMS21vpGqpzW2lBRNbedvtJug7q7URBRPQzKRoUBNkcckLLTk5oh4lbwqCZBY0QEPCBGj3iHAsYjYgFjEcGAcYhowBhEpBc913eIqFbF67ofNFBXwrd0DxG/RU963N9Kw40AZlm3vt6LYgbwFqIhwCPi141qCvCIeAkIPC7d1yWisRU8qsjPAeGp2nUVtXHAYwOjccA/iGYBPxENA54QDXrRcxX5PzlN/AYyuFpvnkcYEAAAAABJRU5ErkJggg==";
        byte[] bytes2 = Convert.FromBase64String(base64image);
        img2.ImageUrl = "";
        img2.ImageDataValue = bytes2;
        gallery.Items.Add(img2);


        ImageGalleryItem img = new ImageGalleryItem();
    string base64 = "iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII=";
        byte[] bytes = Convert.FromBase64String(base64);
                
        img.ImageDataValue = bytes;
        gallery.Items.Add(img);

        ImageGalleryItem img3 = new ImageGalleryItem();
        img3.ImageUrl = "images/Yacht.jpg";
        gallery.Items.Add(img3);
}

Workaround 2:

Configure the first ImageGallery item to be loaded from URL - img1.ImageUrl = "images/imagenamae.jpg";, e.g.

protected void Page_Init(object sender, EventArgs e)
{
    ImageGalleryItem img1 = new ImageGalleryItem();
    img1.ImageUrl = "images/Yacht.jpg";
    gallery.Items.Add(img1);

    ImageGalleryItem img2 = new ImageGalleryItem();
    string base64image = "iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAdVBMVEX///8AAADT09NSUlKYmJjn5+fi4uL09PT4+PjW1tZwcHDv7+9KSkr7+/tXV1ctLS3BwcEnJydGRkaenp54eHgMDAxqamq7u7scHByPj486Ojrc3Nyzs7MhISHGxsY9PT0UFBRkZGRdXV2IiIh+fn6tra2jo6OYwvZMAAAE80lEQVR4nOWdAXLiMAxF4xIgUCC0EEqgQIF273/EhWE6y1Kgzp/teJ/0T6A3diTZkeQs+29V5K1eaht+VN08hNZDait+UEfAEEZ2EU+AhhE/Ac0iFnUIphGLPATTiN06/CVzHvUSMISBrbjYratLQlur2K3fvgCaQrwOaAixuLJFTSE+vt/gs4LY7t8GPCDyPWp7dg/wEDToq/gdIH6jfg8IT+BiANGIcYBgxFhALOL9MGEAsdMAEOlRmwECD1NNAXGr2OnfSraNICqAIexSmx2v5lv0qGqd2u5oNQkTZ+JsUhGwSG13tJYDha8CAT4pgOVjarujtSwVwE07td3R0gAHndR2R6snbdHWMrXd0dIAR5yM9GGhAO5AgBvjgOtnBRC0RddSoAddCGuAA44XFVeQEwcfpG9wx8lFNS/aSm12vHpSHFykNjteYqqW2ux4aYCgO5n19V/032jLcTJjhS/MOAdeDbBvHXDKOdG/KHwVCPB1bnwFX6UwQQJULp2qd+uAOceLSoAh5wR67RvMh6ntjtaL5EXz1GbHSwv0dWqz46UBml9B64AVx8kMJcA5J0wMPxTAVd5NbXisil8K4BMIcKIBYlI1DbCcYAC7uXLptHjFbNFurqRq5QsmTGiAqzEGsJAAq3Fqu6NVTKSLX04tnuZFQYBDKdCDAM2voJaqgephNcAVyItKgCUHcCh9gwtQJiOt4IYD2P4yJyBGrTUHcCoBcoruOxIgqLG3M1UaX56tAy44xYZtCbDkFBtqTqbi/P98lAAD5s7JAaDWXWcdsAR9gxLgguNFNcBnThzUALegFZS8aJ9TdK8FehCgdpoAAT5EDyM51wwE2FIAt5w4qAHurAOOOKlaT2s+w1SRZEupNwvU2dORerNIgFobfWqz46UBjjjfoARY7Y0DvtWYMhkNcF5z4uBS8aIrEGBPiYMlpxYvy3YCIGlOQJaNV9bXMFtL5Wqg71AcC0TypQ7ioZrT1JycRs1La0w9QiYjpja7ibTz4T612U2knfGnqc1uIvP3NA7u2hzclzq481YRQf8tDoiSuwH9exIPxCxE6VKDhaglcDOSu9GGcaM8qlaNsSOFfg0RdMnvoK7NQW2iC0TzNcIO6rwd1Oo76Ldw0DPjoO/JBaIWF1mIUgKH+hY1xA2nD/iAKPWRgnq5HfTjO5ip4GAuhotVND+fxsGMIXlOFGe6goNZX/K8NhKi5lEdIG4+QOVT4jieCQhRG8gDml+qriJoBq180uDMEVYRSbOgHYy7djCT3cFcfQdvIzh430J+owQU+jXEOaoXRfoW53vSb2Lz7z05eLPLwbtrDt7Oc/D+oYoIesNSRQS9Q6oigt6SzbKl9feAHbzp7OBdbvVt9S0paIjPx5NKGUVEUinjWvoWRyREzaPuUIhSXEQhag/JozaqhojyqNKQjTAgtb5piBvSqX8pbdSSlN1o32JFylF7UtAIJMS21vpGqpzW2lBRNbedvtJug7q7URBRPQzKRoUBNkcckLLTk5oh4lbwqCZBY0QEPCBGj3iHAsYjYgFjEcGAcYhowBhEpBc913eIqFbF67ofNFBXwrd0DxG/RU963N9Kw40AZlm3vt6LYgbwFqIhwCPi141qCvCIeAkIPC7d1yWisRU8qsjPAeGp2nUVtXHAYwOjccA/iGYBPxENA54QDXrRcxX5PzlN/AYyuFpvnkcYEAAAAABJRU5ErkJggg==";
    byte[] bytes2 = Convert.FromBase64String(base64image);
    img2.ImageUrl = "";
    img2.ImageDataValue = bytes2;
    gallery.Items.Add(img2);


    ImageGalleryItem img3 = new ImageGalleryItem();
    string base64 = "iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII=";
    byte[] bytes = Convert.FromBase64String(base64);

    img3.ImageDataValue = bytes;
    gallery.Items.Add(img3);


}

I do appreciate your bug report and have updated your Telerik points for it.

Regards,
Rumen
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.