How can i add dynamic templated items to ImageGallery

5 posts, 1 answers
  1. H. Baris
    H. Baris avatar
    8 posts
    Member since:
    Feb 2011

    Posted 24 Apr 2015 Link to this post

    Hi,

    How can i add dynamic templated items to ImageGallery?

    I define a template:

     

    class ImageGalleryContentTemplate : ITemplate
    {
        public String BackgroundImage { get; set; }
        public String HTMLTemplate { get; set; }
     
        public void InstantiateIn(Control container)
        {
            String strC = "";
            if (BackgroundImage != "")
                strC = String.Format("<div style=\"background-image: url({0})\">{1}</div>", BackgroundImage, HTMLTemplate);
            else
                strC = HTMLTemplate;
            container.Controls.Add(new LiteralControl(strC));
        }
    }

    I tried to use it following way:

    ImageGalleryTemplateItem igti = new ImageGalleryTemplateItem();
    ImageGalleryContentTemplate template = new ImageGalleryContentTemplate();
    template.BackgroundImage = strBigImgUrl;
    template.HTMLTemplate = strTemplate;
    template.InstantiateIn(igti);

     

     

    template.InstantiateIn doesn't accept ImageGalleryTemplateItem and if i use InstantiateIn(ImageGalleryTemplateItem container) instead of InstantiateIn(Control container), i don't use container.Controls.Add(...), because ImageGalleryTemplateItem hasn't .Controls() property.

    if I use igti.ContentTemplate = template instead of template.InstantiateIn(igti) project running without errors, but other slides than first not showing.

    Please look at this page: http://v2.gom.com.tr/anasayfa

    Just below the menu;

    - First slider done with RadRotator. Customer wants selector dots and seamless animation.

    - Second slider with RadImageGallery, which has this problem (running with igti.ContentTemplate = template).

    - Third slider with RadImageGallery, but has only images and working perfectly. But customer wants texts and link button.

    How can i add dynamic templated items to ImageGallery OR how to handle it with RadRotator?

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 29 Apr 2015 Link to this post

    Hi,

    Try using the approach below:

    class ImageGalleryContentTemplate : ITemplate
        {
            public String BackgroundImage { get; set; }
            public String HTMLTemplate { get; set; }
     
     
            public void InstantiateIn(Control container)
            {
                container.Controls.Add(new Label() { Text = "Test" });
            }
        }
     
        protected void Page_Init(object sender, EventArgs e)
        {
     
            
            ImageGalleryTemplateItem igti = new ImageGalleryTemplateItem();
            ImageGalleryContentTemplate template = new ImageGalleryContentTemplate();
            igti.ContentTemplate = template;
            RIG.Items.Add(igti);
     
        }

    I hope this helps.

    Regards,
    Maria Ilieva
    Telerik
     

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

     
  3. H. Baris
    H. Baris avatar
    8 posts
    Member since:
    Feb 2011

    Posted 29 Apr 2015 in reply to Maria Ilieva Link to this post

    Hi Maria,

    First, thank you for your reply.

    I've tried it, but it only works on the first slide (live sample: second slider at http://v2.gom.com.tr/anasayfa). Please try this via arrows or dots on ImageGallery.

    Only image-no template version works on same page (third slider at  http://v2.gom.com.tr/anasayfa)

    When I look at the source code of generated page, this is image gallery with first slide:

     

    <div id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery" class="RadImageGallery RadImageGallery_Silk " style="height:489px;width:100%;">
                        <div id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ImageArea" class="rigItemBox" style="width:100%;height:489px;">
                            <input name="ctl00$ContentPlaceHolder_ForNested$newmainslider_ImageGallery$ImageArea$ctl00" type="submit" class="rigActionButton rigPrevButton" title="Önceki" value="Önceki" /><input name="ctl00$ContentPlaceHolder_ForNested$newmainslider_ImageGallery$ImageArea$ctl01" type="submit" class="rigActionButton rigNextButton" title="Sonraki" value="Sonraki" /><div id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ImageArea_ImageWrapper" class="rigActiveImage"><img id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ImageArea_Image" src="" alt="Main Image" style="display:none;" /><div id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ImageArea_TemplateWrapper" class="rigTemplate"><div style="background-image: url(/images/content/good-relations.jpg)"><div class="mainslidertexts"><h2>GOOD RELATIONS</h2>İletişim romantiğiyiz; dokunduğumuz her şeyi çok seviyoruz.</div><div class="mainsliderbutton"><a href="/gom">Daha fazla bilgi <b>→</b></a></div></div></div><div class="rigToolsWrapper"><div class="rigDotList"><a href="#" class="rigCurrentItem"><span></span></a><a href="#"><span></span></a><a href="#"><span></span></a></div></div></div>
                        </div><div id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ThumbnailsArea" style="width:100%;height:0px;display:none;">
                            <input id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ThumbnailsArea_ctl00_ClientState" name="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ThumbnailsArea_ctl00_ClientState" type="hidden" /><span id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ThumbnailsArea_ctl00" style="display:none;"></span>
                        </div><div id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_LoadingPanel" class="RadAjax RadAjax_Silk" style="display:none;">
                            <div class="raDiv">
     
                            </div><div class="raColor raTransp">
     
                            </div>
                        </div><input id="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ClientState" name="ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ClientState" type="hidden" />
                    </div>

    I think contents of the other slides are supposed to be here:

    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadImageGallery, {"_animationSettings":{"slideDuration":5000,"nextImagesAnimation":{"type":"Random","speed":1500,"easing":"easeInOut"},"prevImagesAnimation":{"type":"Random","speed":1500,"easing":"easeInOut"}},"_imageAreaSettings":{"width":100,"height":489,"resizeMode":2},"_itemsData":[{"type":2,"loaded":true},{"type":2},{"type":2}],"_loopItems":true,"_thumbnailsSettings":{"width":"100%","height":"0px","thumbnailWidth":"100px","thumbnailHeight":"100px","mode":2,"enableZoneScroll":true},"_toolbarSettings":{"itemsCounterFormat":"{0} / {1}"},"_uniqueID":"ctl00$ContentPlaceHolder_ForNested$newmainslider_ImageGallery","clientStateFieldID":"ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery_ClientState","renderMode":1}, null, null, $get("ctl00_ContentPlaceHolder_ForNested_newmainslider_ImageGallery"));
    });

    because contents of image-only slider that here:

    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadImageGallery, {"_animationSettings":{"slideDuration":5000,"nextImagesAnimation":{"type":"Random","speed":1500,"easing":"easeInOut"},"prevImagesAnimation":{"type":"Random","speed":1500,"easing":"easeInOut"}},"_imageAreaSettings":{"width":100,"height":489,"resizeMode":2},"_itemsData":[{"thumbnailUrl":"/images/content/good-relations.jpg","imageUrl":"/images/content/good-relations.jpg"},{"thumbnailUrl":"/images/content/dijital-marketing-yol-haritasi.jpg","imageUrl":"/images/content/dijital-marketing-yol-haritasi.jpg"},{"thumbnailUrl":"/images/content/ozel-yazilim-cozumleri.jpg","imageUrl":"/images/content/ozel-yazilim-cozumleri.jpg"}],"_loopItems":true,"_thumbnailsSettings":{"width":"100%","height":"0px","thumbnailWidth":"100px","thumbnailHeight":"100px","mode":2,"enableZoneScroll":true},"_toolbarSettings":{"itemsCounterFormat":"{0} / {1}"},"_uniqueID":"ctl00$ContentPlaceHolder_ForNested$newmainsliderOI_ImageGallery","clientStateFieldID":"ctl00_ContentPlaceHolder_ForNested_newmainsliderOI_ImageGallery_ClientState","renderMode":1}, null, null, $get("ctl00_ContentPlaceHolder_ForNested_newmainsliderOI_ImageGallery"));
    });

    Three items ok (virtualitemcount 3 at sourcecode), three navigation dots ok, but other slides nowhere.

    Any help?

  4. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 04 May 2015 Link to this post

    Hello,

    Note that it is not possible to use NeedDataSource to bind items to the RadImageGallery when need to add TemplateItem also. using both features together is not supported and this is limitation of the control. You can add programmatic TemplateItem as shown in case the other items are decoratively added to the ImageGallery as the online demo below demonstrates:
    http://demos.telerik.com/aspnet-ajax/image-gallery/examples/functionality/templates/defaultcs.aspx?isNew=true


    Regards,
    Maria Ilieva
    Telerik
     

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

     
  5. rama
    rama avatar
    1 posts
    Member since:
    Oct 2017

    Posted 25 Oct in reply to Maria Ilieva Link to this post

    Hi Maria/Telerik,

    Has this been implemented now?

    I have a RadImageGallery within ListView which is bound from database table. So, I need to bind the RadImageGallery dynamically in NeedDataSource event to show the videos with the source urls stored in db table.

    Is this possible at all?

    This is the RadImageGallery code in the ListView.

    <telerik:RadImageGallery ID="VideosImageGallery" runat="server" ZIndex="100000"
    DataImageField="ImageUrl" DataThumbnailField="ImageThumbnailUrl" DataTitleField="SiteDescription"
    BackColor="Transparent" DisplayAreaMode="LightBox" 
    OnNeedDataSource="VideosImageGallery_NeedDataSource"
    OnItemDataBound="VideosImageGallery_OnItemDataBound" Width="600">
    <ImageAreaSettings Height="400px" ResizeMode="Fit" />
    <ThumbnailsAreaSettings ThumbnailsSpacing="4px" ThumbnailHeight="70" ThumbnailWidth="90"
    Width="474" Height="78" ShowScrollButtons="true" />
    </telerik:RadImageGallery>

    And in the code behind,

    Protected Sub VideosImageGallery_NeedDataSource(ByVal sender As Object, ByVal e As ImageGalleryNeedDataSourceEventArgs)
    Dim VideosImageGallery As RadImageGallery = DirectCast(sender, RadImageGallery)
    Dim lvItem As ListViewDataItem = DirectCast(DirectCast(sender, RadImageGallery).NamingContainer, ListViewDataItem)
    Dim siteIdObj = VideosListView.DataKeys(lvItem.DataItemIndex).Values("SiteId")
    Dim sId As Integer = If(Not IsDBNull(siteIdObj), CInt(siteIdObj), 0)

    Dim dtSiteVideos = DataAdapter.GetSiteVideos(sId, CInt(Session(Constants.SESSION_PROCEDURE_ID)))

    'VideosImageGallery.DataSource = dtSiteVideos
    'VideosImageGallery.DataKeyNames = {"VideoId"}

    For Each dr As DataRow In dtSiteVideos.Rows
    If (Path.GetExtension(CStr(dr("ImageUrl"))) = ".mp4") Then
    Dim igti As New ImageGalleryTemplateItem()
    igti.ThumbnailUrl = CStr(dr("ImageThumbnailUrl"))
    Dim template As New ImageGalleryContentTemplate()
    template.SourceUrl = CStr(dr("ImageThumbnailUrl"))
    igti.ContentTemplate = template
    VideosImageGallery.Items.Add(igti)
    End If
    Next
    End Sub


Back to Top