How can i add dynamic templated items to ImageGallery

4 posts, 0 answers
  1. H. Baris
    H. Baris avatar
    7 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. H. Baris
    H. Baris avatar
    7 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?

  5. 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.

     
Back to Top