RadBinaryImage databound within RadImageGallery

[Jon]

Telerik version - 2016.1.225.45

I am trying to present a slideshow with images (and videos) bound from the DB (varbinary). This has worked in the past using RadRotator, however this control is not responsive (feel free to correct me if that is wrong). That said, I found a nice RadImageGallery demo (https://demos.telerik.com/) but I would like to load the items server-side (via OnItemDataBound). Here is my relevant code:

 

aspx
<telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function onImageGalleryCreated(sender, args) {
                sender.get_imageArea().get_element().style.height = sender.get_element().clientHeight - parseInt(sender.get_thumbnailsArea().get_element().style.height, 10) + "px";
            }
        </script>
    </telerik:RadCodeBlock>
<telerik:RadImageGallery ID="PresentationView_RadImageGallery" Height="100%" runat="server"
OnItemDataBound="PresentationView_RadImageGallery_ItemDataBound" 
OnNeedDataSource="PresentationView_RadImageGallery_NeedDataSource">
<Items>
<telerik:ImageGalleryTemplateItem>
<ContentTemplate>
<telerik:RadBinaryImage ID="binaryFullContent" CssClass="itemTemplate" SavedImageName='<%#Eval("ID") %>' runat="server"/>
</ContentTemplate>
</telerik:ImageGalleryTemplateItem>
</Items>
<ClientSettings>
<ClientEvents OnImageGalleryCreated="onImageGalleryCreated" />
</ClientSettings>
</telerik:RadImageGallery>

aspx.cs
protected void PresentationView_RadImageGallery_NeedDataSource(object sender, ImageGalleryNeedDataSourceEventArgs e) {
PresentationView_RadImageGallery.DataSource = GetPresentationSlideList();
}
protected void PresentationView_RadImageGallery_ItemDataBound(object sender, ImageGalleryItemEventArgs e) {
if (e.Item is ImageGalleryItem) {
RadBinaryImage img = (RadBinaryImage)PresentationView_RadImageGallery.FindControl("binaryFullContent");
// img is null
}
}

 

[Kostadin]

Hello Jon,

Thank your for contacting us.

A possible solution is to bind the ImageGallery control to the database and set DataImageField to the binary data filed. For your convenience, I prepared a small runnable sample and attached it to this thread.

Regards,
Kostadin
Telerik

[Jon]

Thank you Kostadin for your sample. However, I am using LLBLen for entity modeling. Does RadImageGallery only allow references to the image and that is why the DataImageField is looking for a string instead of a byte[] of a varbinary?

 

[Kostadin]

Hello Jon,

In the sample from my previous reply Photo field is of varbinary type. So basically you need to specify the binary field as a DataImageField.

Regards,
Kostadin
Telerik

[Jon]

Thank you for the reply. I tried it again, just in case I missed something. Still no luck. Attached is a screenshot of the UI, it is pulling the correct count (3), but not the image via binary. Here is the code, just in case I missed something, wouldn't be the first time :)

BTW: what is the trick to post code in this forum, seems copy and paste is not as legible as it could be?

 

        <telerik:RadImageGallery ID="PresentationView_RadImageGallery" Height="100%" runat="server" DataImageField="FullContent" OnNeedDataSource="PresentationView_RadImageGallery_NeedDataSource">
            <ClientSettings>
                <ClientEvents OnImageGalleryCreated="onImageGalleryCreated" />
            </ClientSettings>
        </telerik:RadImageGallery>

 

        protected void PresentationView_RadImageGallery_NeedDataSource(object sender, ImageGalleryNeedDataSourceEventArgs e) {
            PresentationView_RadImageGallery.DataSource = GetPresentationSlideList();
        }

 

public DataTable GetPresentationSlideList() {
            DataTable data = new DataTable();
            data.Columns.Add("ID", typeof(int));
            data.Columns.Add("Company");
            data.Columns.Add("Presentation");
            data.Columns.Add("Description");
            data.Columns.Add("FullContent");
            data.Columns.Add("ThumbnailContent");
            data.Columns.Add("SlideOrder");
            data.Columns.Add("VersionId", typeof(int));
            data.PrimaryKey = new DataColumn[] { data.Columns["ID"] };
            
            IncludeFieldsList includeFieldList = new IncludeFieldsList();
            includeFieldList.Add(SlideFields.Id);
            includeFieldList.Add(SlideFields.CompanyId);
            includeFieldList.Add(SlideFields.Description);
            includeFieldList.Add(SlideFields.FullContent);
            includeFieldList.Add(SlideFields.ThumbnailContent);
            includeFieldList.Add(PresentationSlideFields.SlideOrder);
            includeFieldList.Add(PresentationSlideFields.VersionId);
            PresentationSlideCollection presentationSlideCollection = new PresentationSlideCollection();
            var relations = new RelationCollection(PresentationSlideEntity.Relations.PresentationEntityUsingPresentationId);
            relations.Add(PresentationSlideEntity.Relations.SlideEntityUsingSlideId);
            var filter = new PredicateExpression(PresentationFields.CompanyId == CompanyId);
            filter.Add(PresentationSlideFields.PresentationId == PresentationId);
            filter.Add(PresentationSlideFields.VersionId == UtilityFunctions.getMaxVersionId(PresentationId));
            presentationSlideCollection.GetMulti(filter, -1, null, relations, null, includeFieldList, -1, -1);
            foreach (PresentationSlideEntity presentationSlideEntity in presentationSlideCollection.OrderBy(P => P.SlideOrder)) {
                data.Rows.Add(
                    presentationSlideEntity.Slide.Id,
                    presentationSlideEntity.Slide.Company.Name,
                    presentationSlideEntity.Slide.Description,
                    presentationSlideEntity.Slide.FullContent,
                    presentationSlideEntity.Slide.ThumbnailContent,
                    presentationSlideEntity.SlideOrder,
                    presentationSlideEntity.VersionId
                );
            }

            return data;
        }

 

In the DB: FullContent is varbinary(MAX)

[Jon]

I tried added the following, but got the error "C# Cannot implicitly convert type 'byte[]' to 'string'" for slideEntity.FullContent:

        protected void PresentationView_RadImageGallery_NeedDataSource(object sender, ImageGalleryNeedDataSourceEventArgs e) {
            PresentationView_RadImageGallery.DataSource = GetPresentationSlideList();
            SlideCollection slideCollection = new SlideCollection();
            slideCollection.GetMulti(null);
            foreach (SlideEntity slideEntity in slideCollection) {
                PresentationView_RadImageGallery.DataImageField = slideEntity.FullContent;
            }
        }

[Kostadin]

Hello Jon,

Please make sure the FullContent is of type byte array and not string.

data.Columns.Add("FullContent", typeof(byte[]));

If you still experience the same issue I would appreciate if you can open a support ticket and attached a runnable sample which I can examine locally and provide you with a solution for your scenario.

Regards,
Kostadin
Telerik

[Jon]

Hi Kostadin,

I ended up doing the following to get it to work (mostly) this is a method called on Page_Load:

private void displayFullContent() {
  if (presentationSlideEntity.Slide.Extension.Contains("mp4")) {
    // this is where the video would be added.
  } else {
    ImageGalleryItem gItem = new ImageGalleryItem();
    gItem.ImageDataValue = presentationSlideEntity.Slide.FullContent;
    PresentationView_RadImageGallery.Items.Add(gItem);
  }
}

 

The remaining issues are as follows:

1. On page load, the first image does not display. Instead it displays the text 'Main Image'. If I click next, the second image displays, if I click previous, then the first image loads correctly.

2. Cannot get video to load. You can see in the above if statement, I would assume a RadMediaPlayer would need to be created and added to a ImageGalleryTemplateItem, but have not been able to achieve this.

 

Any additional help is very much appreciated.

[Jon]

Hi Kostadin,

 

It would appear the first binary image not being displayed on page load has to do with the ImageDataValue is not set to the binary data until after the Render phase of the RadImageGallery control. Is it possible to load the control prior to being rendered?

 

Thanks!

[Kostadin]

Hello Jon,

Setting the ImageDataValue property of the item is identical to specify a DataImageField. Note that the approach of binding a EntityDataSource is identical to SqlDataSource control. Regards your second issue you can specify a template declarative as demonstrates in the following live example.
Nevertheless, if you need to create the template programmatically you need to create the entire controls on Page_init event handler and the template should inherits from ITemplate interface.

Regards,
Kostadin
Telerik