How can i add dynamic templated items to ImageGallery

[Missing User]

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?

[Maria Ilieva]

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

 

 

[Missing User]

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?

[Maria Ilieva]

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

 

 

[rama]

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