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

Forums / Developing with Sitefinity / How to bind dynamic a library to ImageGallery control

How to bind dynamic a library to ImageGallery control

16 posts, 0 answered
  1. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    17 Apr 2009
    Link to this post
    Hello Sitefinity Team

    Via an AjaxRequest I want to bind a library to an ImageControl dynamically.
    The ImageGalleryExtender class is inherited from ImageGallery and in param(1)  the name of the library is stored.

    Everything works fine (userCtrl is fined, the wanted library is selected) but the userCrtl is not updated.
    How can I let the userCtrl show the correct library images?

    Hope you can help.

    Kind regards
    Luc Baeten

    This is a subset of the code I use:


    Dim userCtrl As ImageGalleryExtender = cntPlaceHolder.FindControl("ImageGalleryExtender1")
    If userCtrl IsNot Nothing Then
      Dim libraryManager As Telerik.Libraries.LibraryManager = New Telerik.Libraries.LibraryManager()
      Dim listOfAllLibraries As IList = libraryManager.GetAllLibraries()
      For Each library As ILibrary In listOfAllLibraries
        If library.Name.ToUpper = param(1).ToUpper Then
          userCtrl.FilterExpression = "ParentID IN (" + library.ID.ToString + ")"
          userCtrl.DataBind()
        End If
      Next
    End If
  2. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    20 Apr 2009
    Link to this post
    Hi Luc Baeten,

    Your code seems correct. The ImageGallery control is indeed working with the ParentIDs, which are the Libraries identificators.

    The only thing you need to do, is to refresh the control. In other words, when you set the Gallery properties after the AjaxRequest to do so, the control should be refreshed in order to be initialized with these settings.

    Greetings,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    11 May 2009
    Link to this post
    Hello Georgi

    It seems that ILibary objects don't have filled the property ID anymore. At least it is empty in my situation. Have you any idea how I can filter based on the selected library (see my code above)?

    kind regards
    Luc
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    11 May 2009
    Link to this post
    Hi Luc Baeten,

    In your code you are using instance of ImageGalleryExtender1 which inherits from ImageGallery control. As I see it you are trying to filter by library.ID but the property is used for IContent items only.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    11 May 2009
    Link to this post
    Hello Ivan

    You are correct: I inherit from ImageGallery. I want to fill the ImageGallery dynamically. So I try to define FilterExpression. When I look at this value it has at startup something like ParentID IN (<parentid1>,<parentid2>, etc)

    Is there a way how to fill the ImageGallery with the image library I selected (see my code)?

    regards
    Luc
  6. Dido
    Dido avatar
    149 posts
    Registered:
    24 Sep 2012
    12 May 2009
    Link to this post
    Hi Luc Baeten,

    Here is a sample code demonstrating how to "feed" Image Gallery:

    markup:
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="BindImageGallery.ascx.cs" Inherits="UserControls_Tickets_BindImageGallery" %> 
     
    <%@ Register TagPrefix="sfWeb" Assembly="Telerik.Libraries" Namespace="Telerik.Libraries.WebControls" %> 
     
    <sfWeb:ImageGallery ID="imageGalleryTest" runat="server" /> 
     
     

    Code-behind:
    using System; 
    using System.Collections; 
    using System.Collections.Generic; 
    using Telerik.Cms.Engine.ContentViewFiltering; 
    using Telerik.Libraries; 
     
    public partial class UserControls_Tickets_BindImageGallery : System.Web.UI.UserControl 
        #region initialization 
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
            LibraryManager manager = new LibraryManager(); 
            IList imageLibraries = manager.GetAllLibraries("Image"true); 
     
     
            int[] selectedIndices = { 1 }; 
            List<Guid> parentIds = new List<Guid>(); 
            foreach (var index in selectedIndices) 
            { 
                if (imageLibraries.Count > index) 
                { 
                    parentIds.Add(((ILibrary)imageLibraries[index]).ID); 
                } 
            } 
     
            ContentFilterBuilder filterBuilder = new ContentFilterBuilder(this.imageGalleryTest); 
            filterBuilder.ClearFilter(); 
            if (parentIds.Count > 0) 
            { 
     
                string leftOperand = "ParentID"
                string rightOperand = filterBuilder.GenerateCommaDelimitedString<Guid>(parentIds); 
                ContentFilter.Condition condition = ContentFilter.Condition.In; 
                ContentFilter.JoinType join = ContentFilter.JoinType.And; 
                ContentFilterStatement statement = 
                    new ContentFilterStatement(leftOperand, rightOperand, condition, join); 
                filterBuilder.AddFilter(statement); 
                this.imageGalleryTest.DataBind(); 
            } 
            else 
            { 
                filterBuilder.AddFilter( 
                    new ContentFilterStatement( 
                        "ParentID",  
                        Guid.Empty.ToString(), 
                        ContentFilter.Condition.Equal, 
                        ContentFilter.JoinType.And 
                    ) 
               ); 
            }        
        } 
        #endregion 
     

    Best wishes,
    Dido
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    12 May 2009
    Link to this post
    Thank you very much, Dido

    With this code I was able to solve the problem and fill the ImageGallery programmatically.

    Kind Regards
    Luc Baeten
  8. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    13 May 2009
    Link to this post
    Hello Dido

    In fact I want to filter the ImageGallery via an Ajax request. So I made some changes to your BindImageGallery.aspx.

    Atlantic, Barbados Nature and Brabados Red are names of Image galleries. By selecting this RadTreeViewNode I am calling the ajax request with the name of the RadTreeNode.
    In the AjaxRequest I am filtering on this name with the procedure you sent before.
    Now the problem is that I must click twice on the same RadTreeViewNode before the ImageGallery is updated with the correct images.

    Have you any idea why the gallery is updated in the second run and not in the first one?

    Kind Regards
    Luc

    The aspx page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="BindImageGallery.aspx.cs"
        Inherits="BindImageGallery" %>

    <%@ Register TagPrefix="sfWeb" Assembly="Telerik.Libraries" Namespace="Telerik.Libraries.WebControls" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function onProductCategoryNodeClicking(sender, args) {
                var node = args.get_node();
                if (node != null) {
                    if (node.get_nodes() != null) {
                        //Update the grid via AjaxManager
                        refreshGrid(node.get_text());
                    }
                }
            }

            function refreshGrid(arg) {
                var ajaxMan = $find("RadAjaxManager1");
                if (ajaxMan) {
                    ajaxMan.ajaxRequest(arg);
                }
            }
        </script>
        </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <table>
                <tr>
                    <td>
                        <sfWeb:ImageGallery ID="imageGalleryTest" runat="server" />
                    </td>
                    <td>
                        <telerik:RadTreeView ID="ProductCategoryRadTreeView" runat="server" ShowLineImages="False"
                            OnClientNodeClicking="onProductCategoryNodeClicking" Style="white-space: normal;">
                            <Nodes>
                                <telerik:RadTreeNode Text="Atlantic"></telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Barbados Nature"></telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Brabados Red"></telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeView>
                    </td>
                </tr>
            </table>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
                onajaxrequest="RadAjaxManager1_AjaxRequest">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="imageGalleryTest" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="ProductCategoryRadTreeView">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="imageGalleryTest" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
        </div>
        </form>
    </body>
    </html>



    And the code behind:

    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.Web;
    using Telerik.Cms.Engine.ContentViewFiltering;
    using Telerik.Libraries;
    using Telerik.Web.UI;
    using Telerik.Libraries.WebControls;

    public partial class BindImageGallery : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            LibraryManager manager = new LibraryManager();
            IList imageLibraries = manager.GetAllLibraries("Image", true);

            int[] selectedIndices = { 1 };
            List<Guid> parentIds = new List<Guid>();
            foreach (var index in selectedIndices)
            {
                if (imageLibraries.Count > index)
                {
                    parentIds.Add(((ILibrary)imageLibraries[index]).ID);
                }
            }

            ContentFilterBuilder filterBuilder = new ContentFilterBuilder(this.imageGalleryTest);
            filterBuilder.ClearFilter();
            if (parentIds.Count > 0)
            {

                string leftOperand = "ParentID";
                string rightOperand = filterBuilder.GenerateCommaDelimitedString<Guid>(parentIds);
                ContentFilter.Condition condition = ContentFilter.Condition.In;
                ContentFilter.JoinType join = ContentFilter.JoinType.And;
                ContentFilterStatement statement =
                    new ContentFilterStatement(leftOperand, rightOperand, condition, join);
                filterBuilder.AddFilter(statement);
                this.imageGalleryTest.DataBind();
            }
            else
            {
                filterBuilder.AddFilter(
                    new ContentFilterStatement(
                        "ParentID",
                        Guid.Empty.ToString(),
                        ContentFilter.Condition.Equal,
                        ContentFilter.JoinType.And
                    )
               );
            }       

        }

        protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            string param = e.Argument;
            LibraryManager libraryManager = new LibraryManager();
            IList listOfAllLibraries = libraryManager.GetAllLibraries("Image", true);
            foreach (ILibrary libr in listOfAllLibraries) {
                if (libr.Name == param) {
                    ContentFilterBuilder filterBuilder = new ContentFilterBuilder(this.imageGalleryTest); 
                    filterBuilder.ClearFilter(); 
                    string leftOperand = "ParentID"; 
                    string rightOperand = libr.ID.ToString(); 
                    ContentFilter.Condition condition = ContentFilter.Condition.Equal; 
                    ContentFilter.JoinType join = ContentFilter.JoinType.And; 
                    ContentFilterStatement statement = 
                        new ContentFilterStatement(leftOperand, rightOperand, condition, join); 
                    filterBuilder.AddFilter(statement); 
                    this.imageGalleryTest.DataBind(); 
                }
            }
        }

    }

  9. Dido
    Dido avatar
    149 posts
    Registered:
    24 Sep 2012
    18 May 2009
    Link to this post
    Hi Luc Baeten,

    I am sorry for the late reply. I have attached a solution for your problems. If you have more questions, feel free to ask.

    Regards,
    Dido
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    18 May 2009
    Link to this post
    Hello Dido

    Thank you for your response. Although I couldn't use your development completely (because the imagegallery and the productcategory radtree are two different user controls that communicate via ajax request), I could use part of your code to solve the problem:

    by adding the code to my imagegallery control:

        public override void DataBind()
        {
            base.ChildControlsCreated = false;
        }

    the problem with double click was solved.

    Thank you very much

    Kind regards
    Luc
  11. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    18 May 2009
    Link to this post
    Hello Dido

    I am sorry to bother you again, but is it possible to use the loading panel in described situation? It seems that the loading panel is not shown when created programmatically.

    Regards
    Luc
  12. Dido
    Dido avatar
    149 posts
    Registered:
    24 Sep 2012
    21 May 2009
    Link to this post
    Hi Luc Baeten,
     

    As I see it you created your RadAjaxManager with markup. You can specify the loading panel id's as below:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true"
       <AjaxSettings> 
          <telerik:AjaxSetting AjaxControlID="SomeControl"
             <UpdatedControls> 
                <telerik:AjaxUpdatedControl ControlID="EmailGrid" LoadingPanelID="LoadingPanel1" /> 
                ...             
            </UpdatedControls> 
          </telerik:AjaxSetting> 
          ... 
      </AjaxSettings> 
    </telerik:RadAjaxManager> 
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="Vista"
    </telerik:RadAjaxLoadingPanel> 

    Best wishes,
    Dido
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  13. Luc Baeten
    Luc Baeten avatar
    169 posts
    Registered:
    23 Sep 2005
    22 May 2009
    Link to this post
    Hello Dido

    The RadAjaxManager is defined on the Masterpage

    I defined it the way you described and the control is updated via the ajax request call but the loading panel is not shown duting the update.

    Have you an idea why?

    regards
    Luc
  14. Dido
    Dido avatar
    149 posts
    Registered:
    24 Sep 2012
    26 May 2009
    Link to this post
    Hello Luc Baeten,

    I have attached the custom gallery, the master page, and the user control. I hope this will solve your problem.

    Sincerely yours,
    Dido
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  15. Leonard Van Der Merwe
    Leonard Van Der Merwe avatar
    1 posts
    Registered:
    05 Feb 2010
    08 Feb 2010
    Link to this post
    Hi Dido

    Thanks for your very helpful, reply's. Ive been able to create a dropdown that lists my libraries and if one of the libraries is selected, to update the imagegallery with the code supplied above.

    I've encountered two additional problems:

    The paging doesn't default back to page one if the databind is called.

    and the lightbox isn't working got any advise?

    this.imageGalleryTest = new MyGallery();
            this.imageGalleryTest.ID = "imageGalleryTest";
            this.imageGalleryTest.ItemsPerPage = 3;
            this.imageGalleryTest.ThumbnailMaxSize = 110;
            this.imageGalleryTest.SelectedPresentationMode.ID = "Lightbox";
            this.imageGalleryTest.GalleryTemplateMode = ImageGallery.GalleryViewMode.Lightbox;
            this.imageGalleryTest.BehaviorMode = Telerik.Cms.Engine.WebControls.ContentView.BehaviorModes.Master;
            this.imageGalleryTest.ItemListTemplateName = "Telerik.Libraries.Resources.ControlTemplates.Frontend.GalleryLightboxList.ascx";
            Controls.Add(this.imageGalleryTest);

    using solution very similar to code 

    Posted on May 18, 2009 imagegallery.zip

    Thanks in-advance for your assistance in this regard.

  16. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    11 Feb 2010
    Link to this post
    Hi Leonard Van Der Merwe,

    I checked the following code working with simple user control and it is working fine at my end

    ImageGallery gallery = new ImageGallery();
    gallery.SelectedPresentationMode.ID = "Lightbox";
    gallery.GalleryTemplateMode = ImageGallery.GalleryViewMode.Lightbox;
    gallery.BehaviorMode = Telerik.Cms.Engine.WebControls.ContentView.BehaviorModes.Master;
    gallery.ItemListTemplateName = "Telerik.Libraries.Resources.ControlTemplates.Frontend.GalleryLightboxList.ascx";
    Controls.Add(gallery);

    Make sure that you do not get any js errors on your page and lightbox script is loaded. You can check this with firebug and IE developer tools.

    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.
Register for webinar
16 posts, 0 answered