Description box

[Duy]

Hi,

Can description handle the html tag and also scrollable if out width and height.?

thanks.

[Eyup]

Hello Duy,

Here are some tips which will help you greatly when configuring the RadImageGallery control:

1. CSS to modify the appearance. You can verify the result by adding it to the attached web site sample.

Copy Code

div.RadImageGallery div.rigDescriptionBox {
    background-color: red;
}

2. Print and Download functionality:
http://www.telerik.com/support/code-library/add-print-and-save-buttons-in-radimagegallery-toolbar

3. Display HTML content within the description box:

Telerik.Web.UI.ImageGalleryImageArea.prototype._populateDescriptionBox = function (item) {
    if (!item) {
        return;
    }
    var owner = item.get_owner(),
        $element = owner._$element,
        $title = $element.find(".rigTitle"),
        $description = $element.find(".rigDescription"),
        title = item.get_title(),
        description = item.get_description();
    if (!title && !description) {
        $title.parent().hide();
    } else {
        $title.html(title);
        $description.html(description);
    }
}

Then, you can set the Title or Description field from your database in html format. Alternatively, you can format the text using the following handler:

protected void RadImageGallery1_ItemDataBound(object sender, ImageGalleryItemEventArgs e)
{
    e.Item.Title = string.Format("<a href='{0}'>{1}</a>",
          "http://en.wikipedia.org/wiki/" + e.Item.Title, e.Item.Title);
}

If you want to achieve dynamic background colorization requirement, you can try using the OnNavigated event handler:
​http://docs.telerik.com/devtools/aspnet-ajax/controls/imagegallery/client-side-programming/events

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress

[Duy]

Thanks Eyup, I got it working, however I have been playing the css to customize the Description Box  .rigDescriptionBox {
padding:0 auto;
margin:auto;
background-color:Olive;
display:block;
}

rigDescription{
padding:6px;
width:100%;
height:100%;
background-color:White;
}

[Eyup]

Hi Duy,

I'm glad the provided sample was helpful.
Do you have a specific question related to the CSS or everything is fine now?

Regards,
Eyup
Telerik by Progress