LightBox with RadBinaryImages

3 posts, 0 answers
  1. Ralf
    Ralf avatar
    2 posts
    Member since:
    May 2015

    Posted 04 May 2015 Link to this post

    Hi,

    I try to run a LightBox with images read from a database. Because it is not working I tried to today to display an image from a base64 string. I can display the image as RadBinaryImage but it does not show up in the LightBox. I also noticed, that ITemplate.InstantiateIn is never called.

     

    Here is the code behind:

    protected void Page_Load(object sender, EventArgs e)
        {
    [...]
      
        List<RadLightBoxItem> itemsList = new List<RadLightBoxItem>();
     
        byte[] imageData = Convert.FromBase64String("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");
     
        RadLightBoxItem my_item = new RadLightBoxItem();
        my_item.ItemTemplate = new LightBoxTemplate(imageData);
        my_item.Description = "The default image";
        my_item.ImageUrl = "~/images/test.png";
     
        binaryDemoImage.DataValue = imageData;
        binaryDemoImage.Width = 100;
        binaryDemoImage.Height = 100;
        binaryDemoImage.ResizeMode = BinaryImageResizeMode.Fit;
     
        itemsList.Add(my_item);
        log.Debug("Bild " + my_item.Description + " zur RadLightBox dazu.");
     
        RadLightBox1.DataSource = itemsList;
        RadLightBox1.DataBind();
     
    [...]
     
        }

    With:

    class LightBoxTemplate : ITemplate
    {
        protected RadBinaryImage image;
        private byte[] binary;
     
        private static readonly log4net.ILog log = log4net.LogManager.GetLogger(
            System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
     
        public LightBoxTemplate(byte[] binary)
        {
            log.Debug("LightBoxTemplate wurde erstellt mit " + binary.Length + " byte");
            this.binary = binary;
        }
     
        void ITemplate.InstantiateIn(Control container)
        {
            log.Debug("InstantiateIn wurde aufgerufen mit " + binary.Length + " byte");
     
            image = new RadBinaryImage();
            image.DataValue = binary;
            image.Width = 800;
            image.Height = 600;
            image.ResizeMode = BinaryImageResizeMode.Fit;
            container.Controls.Add(image);
        }
    }

    Here is the aspx-page:

    [...]
        <telerik:RadLightBox ID="RadLightBox1" runat="server" PreserveCurrentItemTemplates="true" Width="800px">
        </telerik:RadLightBox>
     
        <telerik:RadBinaryImage ID="binaryDemoImage" runat="server"/>
     
        <asp:Button ID="Button1" Text="Open LightBox" OnClientClick="OpenLigthBox(); return false;" runat="server" />
    [...]

    And attached is what it looks like.

    Can you please help me to get the image show up in the Lightbox? Any advice is warmly welcomed.Thanks!

     

    Ralf

  2. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 06 May 2015 Link to this post

    Hello Ralf,

    I would recommend that you extract that code from page load to page init as we are working with templates. Next, you need to modify your code this way:
    protected void Page_Init(object sender, EventArgs e)
    {
        byte[] imageData = Convert.FromBase64String("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");
     
        RadLightBoxItem my_item = new RadLightBoxItem();
        my_item.ItemTemplate = new LightBoxTemplate(imageData);
        my_item.Description = "The default image";
        my_item.ImageUrl = "~/images/test.png";
     
        binaryDemoImage.DataValue = imageData;
        binaryDemoImage.Width = 100;
        binaryDemoImage.Height = 100;
        binaryDemoImage.ResizeMode = BinaryImageResizeMode.Fit;
     
        RadLightBox1.Items.Add(my_item);
    }

    I hope this helps.

    Regards,
    Daniel
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ralf
    Ralf avatar
    2 posts
    Member since:
    May 2015

    Posted 08 May 2015 in reply to Daniel Link to this post

    Hi Daniel, I thank you for your help. It works now. :) Regards, Ralf
Back to Top