LightBox with RadBinaryImages

[Ralf]

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

[Daniel]

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

 

 

[Ralf]

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