+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Dynamically choosing gallery for image gallery control

Dynamically choosing gallery for image gallery control

20 posts, 3 answered
  1. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    10 Dec 2010
    Link to this post
    Hi,

    this is probably a very basic question, but I can't figure how to acheive the following: I would like to have on a page a combobox (RadCombo for example) holding a list of image galleries to be displayed, and an Image Gallery control that would just display the images of the gallery selected in the ComboBox.

    How would you do this ? Is there a very easy way to acheive this, like with a small piece of javascript or a simple parameter ?

    Thanks
    Francois
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Dec 2010
    Link to this post
    Hello Francois,

    You need a custom control for this implementation. Here is a basic idea.

    1.Create a custom class that inherits from SimpleView
    2. Create a template for your control that has RadComboBox declared in it and Repeater with ItemTemplate. Inside the ItemTemplate of the repeater add an Image control.
    4.  In CreateChildControls of your custom control bind the combo to datasource of Albums

    var ds = App.WorkWith().Albums().Get().ToList();

    Then get the combo selected item or selected index and

    - form the datasource of the repeater ( the Album has a method Images() which returns all items in the album)
    you need to get a single album before that

    var id = "guid of the album";
    var alb= App.WorkWith().Albums().Where(a => a.Id = id).Get().FirstOrDefault();

    - subscribe for ItemDataBound event of the repeater
    - call DataBind of the repeater

    4. Inside ItemDataBound event of the repeater you can access the ImageItem from e.data.dataItem and set the ImageUrl of your Image control declared in the control template.



    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    10 Dec 2010
    Link to this post
    I'm sorry Ivan, but if I've been using RadControls for several years, I'm completely new to Sitefinity and I just don't understand your answer.
    Would you be kind enough to give a bit more details, or directions in the documentation for me to build a full sample ?

    Buy the way, I don't want all the albums to be displayed in the RadCombo, but only a "manual selection" of albums...

    Thanks for you help
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Dec 2010
    Link to this post
    Hello Francois,

    You can take a look at How to crate a widget tutorial.

    Here is a sample

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Web.UI;
    using System.Web.UI.WebControls;
    using System.Collections;
    using Telerik.Sitefinity.Libraries.Model;
     
    namespace Telerik.Sitefinity.Samples
    {
        class ImageGlalleryCustom : SimpleView
        {
     
            protected override string LayoutTemplateName
            {
                get { return ImageGlalleryCustom.layoutTemplateName; }
            }
     
            protected override void InitializeControls(GenericContainer container)
            {
     
                if (Repeater != null && Combo != null)
                {
     
                    Combo.DataSource = ComboSource();
                    Combo.AutoPostBack = true;
                    Combo.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(Combo_SelectedIndexChanged);
                    Combo.ItemDataBound += new RadComboBoxItemEventHandler(Combo_ItemDataBound);
                    Combo.DataBind();
                }
            }
     
            void Combo_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
            {
               var alb =  e.Item.DataItem as Album;
               e.Item.Text = alb.Title;
               e.Item.Value = alb.Id.ToString();
            }
     
            void Combo_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
            {
                var id = new Guid(e.Value);
                Repeater.DataSource = RepeaterDataSource(id);
                Repeater.ItemDataBound += new RepeaterItemEventHandler(Repeater_ItemDataBound);
                Repeater.DataBind();
            }
     
            void Repeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
                {
                    var data = e.Item.DataItem as Telerik.Sitefinity.Libraries.Model.Image;
                    var imgcontrol = e.Item.FindControl("Image1") as System.Web.UI.WebControls.Image;
                    imgcontrol.ImageUrl = data.MediaUrl;
                }
            }
     
            public IList ComboSource()
            {
                return App.WorkWith().Albums().Get().ToList();
            }
     
            public IList RepeaterDataSource(Guid AlbumID)
            {
                var sourceid = AlbumID;
                return App.WorkWith().Images().Where(al => al.Parent.Id == sourceid).Get().ToList();
            }
     
     
            protected virtual RadComboBox Combo
            {
                get
                {
                    return this.Container.GetControl<RadComboBox>("RadCombobox1", true);
                }
            }
     
     
            protected virtual Repeater Repeater
            {
                get
                {
                    return this.Container.GetControl<Repeater>("Repater1", true);
                }
            }
     
     
            private const string layoutTemplateName = "Telerik.Sitefinity.Samples.Resources.ImageGalleryControl.ascx";
        }
    }


    template

    <%@ Control Language="C#"   %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
     
    <telerik:RadComboBox runat="server" ID="RadCombobox1"></telerik:RadComboBox>
     
    <asp:Repeater runat="server" ID="Repater1">
      <ItemTemplate>
         <asp:Image runat="server" ID="Image1" />
       </ItemTemplate>
    </asp:Repeater>


    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    13 Dec 2010
    Link to this post
    Thank you, but it's not quite answering my question.
    I do not wish to redeisgn my own image control, but I wante to reuse the Image gallery control (the lightbox version) by dynamically binding an album to the lightbox Image control.

    It's a similar issue to this one (in SiteFinity 3):
    http://www.sitefinity.com/devnet/forums/sitefinity-3-x/developing-with-sitefinity/how-to-bind-dynamic-a-library-to-imagegallery-control.aspx

    How can you display specific albums, and at run time dynamically bind a lightbox image control to the chosen one ?
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    13 Dec 2010
    Link to this post
    Hi Francois,

    In this is the case you have to create a custom class that inherits from  Telerik.Sitefinity.Modules.Libraries.Web.UI.Images.ImagesView and override its CreateChildControls method without calling the base.

    protected override void CreateChildControls()
            {
            
                this.MasterViewName = "ImagesFrontendThumbnailsListLightBox";
     
                var parentID = this.MasterViewDefinition.ItemsParentId;
                this.MasterViewDefinition.ItemsParentId = new Guid("0a1e4e57-72ff-4267-8edc-b5b231e8a5dc");
                this.LoadView("ImagesFrontendThumbnailsListLightBox");
          }

    You have to pass the library ID to MasterViewDefinition.ItemsParentId to filter the data at runtime.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  7. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    14 Dec 2010
    Link to this post
    Wonderfull, thanks!
  8. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    14 Dec 2010
    Link to this post
    Now this is almost perfect.
    But I can't find how to specify the Image Gallery type (for example the "Thumbnail strip + Image on the same page" type). I suppose it's just a property to set, but I can't find it!

    Thanks for your help Ivan!
  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    14 Dec 2010
    Link to this post
    Hi Francois,

    This is defined by MasterViewName .

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    14 Dec 2010
    Link to this post
    Yes, this I have found...

    But what I could not find is the possible values for the View Name !
    When I make a call to LoadView, I need to know the correct value to specify.

    this.LoadView("ImagesFrontendThumbnailsListLightBox");

    This works, but what are the other possibilities ? What should be given to LoadView and MasterViewName in order to select the "Thumbnail strip + Image on the same page" ??
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    14 Dec 2010
    Link to this post
    Hello Francois,

    Below are the master view names that you can use

    • ImagesFrontendThumbnailsListBasic - Thumbnails + Detail page
    • ImagesFrontendThumbnailsListLightBox - Thumbnails + Overlay (lightbox)
    • ImagesFrontendThumbnailsListStrip - Thumbnail strip + Image on the same page
    • ImagesFrontendThumbnailsListSimple - Simple list

    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  12. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    14 Dec 2010
    Link to this post
    Thank you Ivan!
  13. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    20 Dec 2010
    Link to this post
    Hi again,

    All of this is working perfectly and I would just like another precision to add on this.
    Could you please tell me how to specify by code the sorting option that has to be used for the selectdc album ("As they are ordered in albums", or "Newest first",...) ?

    Thanks, and Merry Christmas to all of you guys !

    Francois
  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    20 Dec 2010
    Link to this post
    Hello Francois,

    You can use SortingField property of the control.


    SortingField.SelectedChoicesIndex

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  15. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    21 Dec 2010
    Link to this post
    Can you please tell me were I can find this propertuy ?
    I have created a class derived from an Imageview

    Telerik.Sitefinity.Modules.Libraries.Web.UI.Images.

     

    ImagesView

     

    and the property you are talking about comes from a designer (Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.ImageGallerySelectorsDesignerView
    )

    Here is the code I am using:

     

     

    protected override void CreateChildControls()
    {
    this.MasterViewName = "ImagesFrontendThumbnailsListStrip";
    var parentID = this.MasterViewDefinition.ItemsParentId;
    this.MasterViewDefinition.ItemsParentId = AlbumGuid;
    this.LoadView("ImagesFrontendThumbnailsListStrip");
    }

    How do I get access to the SortingField property from there ?

     

  16. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    21 Dec 2010
    Link to this post
    Hello Francois,

    You can set MasterViewDefinition.SortExpression to

    PublicationDate DESC
    PublicationDate ASC
    Ordinal ASC

    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  17. Francois MARTIN
    Francois MARTIN avatar
    29 posts
    Registered:
    07 Aug 2005
    21 Dec 2010
    Link to this post
    Thank you Ivan.
  18. Dragan
    Dragan avatar
    1 posts
    Registered:
    11 Nov 2010
    15 Apr 2011
    Link to this post
    Hi ,

    Ivan wrote:

    "In this is the case you have to create a custom class that inherits from  Telerik.Sitefinity.Modules.Libraries.Web.UI.Images.ImagesView and override its CreateChildControls method without calling the base."

    This is what I need, but I don't understand where to create that class (in witch folder)? how to organize that code?

    Please help,
    Dragan
  19. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    18 Apr 2011
    Link to this post
    Hello,

    Create  a custom class library and there you can create a C# class.


    Best wishes,
    Ivan Dimitrov
    the Telerik team

  20. Jean Cuteaux
    Jean Cuteaux avatar
    1 posts
    Registered:
    28 Oct 2003
    04 Sep 2012
    Link to this post
    Sorry to ask what might seem obvious, like Dragan in the previous thread, I don't really understand how and where you create your custom class library and then class. I have created the class that inherits Telerik.Sitefinity.Modules.Libraries.Web.UI.Images.ImagesView like it was suggested a few threads above. But I don't see how to implement this on the page where I would like the Image Gallery to be placed. Can you please take me step by step to where and how its fully implementable? Thanks
20 posts, 3 answered