RadBinaryImage databound within RadImageGallery

10 posts, 1 answers
  1. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 30 Mar Link to this post

    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
    }
    }

     

  2. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 04 Apr Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 04 Apr in reply to Kostadin Link to this post

    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?

     

  5. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 07 Apr Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 07 Apr in reply to Kostadin Link to this post

    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)

  7. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 07 Apr in reply to Kostadin Link to this post

    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;
                }
            }

  8. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 12 Apr Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  9. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 12 Apr in reply to Kostadin Link to this post

    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.

  10. Jon
    Jon avatar
    15 posts
    Member since:
    Nov 2015

    Posted 14 Apr in reply to Kostadin Link to this post

    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!

  11. Answer
    Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 15 Apr Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017