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

Forums / Developing with Sitefinity / Render Tag Widget as Dropdown list

Render Tag Widget as Dropdown list

14 posts, 1 answered
  1. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    17 Jun 2014
    Link to this post

    Is there an easy way to render the tag widget as a dropdownlist, maybe with kendoo?

    Or do I have to create it some way like this: http://jsfiddle.net/Tpf7E/22/ 

    Markus

  2. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    19 Jun 2014
    Link to this post
    Hi Markus,

    You have been answered in the support ticket you have opened for this. Feel free to share the response with the community.

    Regards,
    Pavel Benov
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
    Answered
  3. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    20 Jun 2014 in reply to Pavel Benov
    Link to this post

    @Pavel - once again thanks for your outstanding help. You have proven once again that Telerik support rocks.

    @all who ever might need this in the future (hope telerik make it part of the widget along with a designer change to choose easy. (or at least helpt text what is possible)

    ~/UserControls/CustomTaxonomyControlTemplate.ascx

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <sf:SitefinityLabel ID="titleLabel" runat="server" WrapperTagName="h2" HideIfNoText="true" CssClass="sftaxonTitle" />
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <%--This is the conditional template for the dropdown--%>
            <sf:ConditionalTemplate ID="ConditionalTemplate6" Left="RenderAs" Operator="Equal" Right="DropDown" runat="server">
          
                        <asp:DropDownList ID="taxaDDL" AutoPostBack="true" DataTextField="Title" DataValueField="Url" runat="server"  >
                        </asp:DropDownList>
               
            </sf:ConditionalTemplate>
            <%--End of This is the conditional template for the dropdown--%>
            <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="RenderAs" Operator="Equal" Right="HorizontalList" runat="server">
                <asp:Repeater ID="repeater_horizontallist" runat="server">
                    <HeaderTemplate>
                        <ul class="sftaxonHorizontalList">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li class="sftaxonItem">
                            <sf:SitefinityHyperLink ID="link" runat="server" CssClass="selectCommand sftaxonLink"></sf:SitefinityHyperLink></li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul></FooterTemplate>
                </asp:Repeater>
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="RenderAs" Operator="Equal" Right="VerticalList" runat="server">
                <asp:Repeater ID="repeater_verticallist" runat="server">
                    <HeaderTemplate>
                        <ul class="sftaxonVerticalList">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li class="sftaxonItem">
                            <sf:SitefinityHyperLink ID="link" runat="server" CssClass="selectCommand sftaxonLink"></sf:SitefinityHyperLink>
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate ID="ConditionalTemplate3" Left="RenderAs" Operator="Equal" Right="Cloud" runat="server">
                <asp:Repeater ID="repeater_cloud" runat="server">
                    <HeaderTemplate>
                        <ul class="sftaxonCloud">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li class="sftaxonItem">
                            <%-- Note the sfCloudSize class.
                        The name can be different, just have to be last in the list.
                        The size factor is appendend to it - sfCloudSize1, sfCloudSize2,.. sfCloudSize6 --%>
                            <sf:SitefinityHyperLink ID="link" runat="server" CssClass="selectCommand sftaxonLink sfCloudSize"></sf:SitefinityHyperLink>
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate ID="ConditionalTemplate4" Left="RenderAs" Operator="Equal" Right="HierarchicalList" runat="server">
                <style type="text/css">
                    div.RadTreeView .rtMinus, div.RadTreeView .rtPlus
                    {
                        display: none;
                    }
                    div.RadTreeView .rtTop, div.RadTreeView .rtMid, div.RadTreeView .rtBot
                    {
                        padding: 0;
                    }
                </style>
                <telerik:RadTreeView ID="treeview_hierarchicallist" runat="server" ShowLineImages="false" ExpandAnimation-Type="None" CollapseAnimation-Type="None">
                </telerik:RadTreeView>
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate ID="ConditionalTemplate5" Left="RenderAs" Operator="Equal" Right="Menu" runat="server">
                <telerik:RadMenu ID="taxa_menu" runat="server">
                </telerik:RadMenu>
            </sf:ConditionalTemplate>
        </Templates>
    </sf:ConditionalTemplateContainer>
    <sf:SitefinityHyperLink ID="SeeAllTaxaLink" runat="server" CssClass="selectCommand sftaxonsAll" Visible="false">All ({0})</sf:SitefinityHyperLink>

    CustomTaxonomyControl.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Data;
    using Telerik.Sitefinity.DynamicModules;
    using Telerik.Sitefinity.DynamicModules.Builder;
    using Telerik.Sitefinity.DynamicModules.Builder.Model;
    using Telerik.Sitefinity.Services;
    using Telerik.Sitefinity.Taxonomies.Model;
    using Telerik.Sitefinity.Utilities.TypeConverters;
    using Telerik.Sitefinity.Web.UI.PublicControls;
    using Telerik.Sitefinity.Data;
    using Telerik.Sitefinity.DynamicModules;
    using Telerik.Sitefinity.DynamicModules.Builder;
    using Telerik.Sitefinity.DynamicModules.Builder.Model;
    using Telerik.Sitefinity.Localization;
    using Telerik.Sitefinity.Model;
    using Telerik.Sitefinity.Modules.GenericContent;
    using Telerik.Sitefinity.Modules.Pages;
    using Telerik.Sitefinity.Services;
    using Telerik.Sitefinity.Taxonomies;
    using Telerik.Sitefinity.Taxonomies.Model;
    using Telerik.Sitefinity.Utilities.TypeConverters;
    using Telerik.Sitefinity.Web.UrlEvaluation;
    using System.Web.UI;
     
     
    namespace SitefinityWebApp
    {
        public class CustomTaxonomyControl : TaxonomyControl
        {
            protected override void BindRepeater(List<TaxonomyControl.TaxonData> data)
            {
                if (Page.IsDesignMode())
                {
                    // taxa are taken from the taxonomy set in the TaxonomyId, but it is not set
                    if (this.ContentId == Guid.Empty && TaxonomyId == Guid.Empty)
                    {
                        this.Title = "Please, specify the Taxonomy which you want to use. To do so, click on Edit and enter a value for TaxonomyId from this table: ";
     
                        var taxonomies = TaxonomyManager.GetManager().GetTaxonomies<Taxonomy>().ToList();
                        this.TaxaRepeater.DataSource = taxonomies;
                        this.TaxaRepeater.ItemDataBound += new RepeaterItemEventHandler(this.DesignModeTaxonomyListItemDataBound);
                        this.TaxaRepeater.DataBind();
     
                        return;
                    }
                }
     
                foreach (var item in data)
                {
                    item.Url = this.BuildUrl(item.Url);
                }
     
                if (this.RenderAs.ToString() == "DropDown")
                {
                    this.TaxaDDL.DataSource = data;
                    this.TaxaDDL.SelectedIndexChanged += TaxaDDL_SelectedIndexChanged;
                    this.TaxaDDL.DataBound += TaxaDDL_DataBound;
                    this.TaxaDDL.DataBind();
                    return;
                }
                
                this.TaxaRepeater.DataSource = data;
                this.TaxaRepeater.ItemDataBound += new RepeaterItemEventHandler(this.TaxaRepeater_ItemDataBound);
                this.TaxaRepeater.DataBind();
                base.BindRepeater(data);
            }
     
            protected void TaxaDDL_DataBound(object sender, EventArgs e)
            {
                TaxaDDL.Items.Insert(0, new ListItem("Filtern Sie hier", string.Empty));
            }
     
            void TaxaDDL_SelectedIndexChanged(object sender, EventArgs e)
            {
                HttpContext.Current.Response.Redirect(this.TaxaDDL.SelectedValue.ToString());
            }
     
            public virtual MyRenderTaxonomyAs RenderAs { get; set; }
     
            private void DesignModeTaxonomyListItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                if (e.Item.ItemType == ListItemType.Header)
                {
                    e.Item.Controls.Clear();
     
                }
                if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
                {
                    e.Item.Controls.Clear();
                    if (e.Item.ItemIndex == 0)
                    {
                        var lbl = new Literal();
                        lbl.Text = "<p style='margin-bottom: 10px;'><span style='font-size: 18px; color: #f00; '>Temporary:</span><br />Click <strong>Edit</strong> and enter a value for <strong>TaxonomyId</strong> from the table below in order to specify the Classification which you want to use.</p>";
                        e.Item.Controls.Add(lbl);
                        var tbl = new Literal() { Text = "<table style='margin-bottom: 20px; width: 100%; '><tr><th style='padding: 3px 20px 3px 1px; border-bottom: 1px solid #ececec; font-weight: bold; '>Taxonomy</th><th style='padding: 3px 1px 3px 5px; border-bottom: 1px solid #ececec; font-weight: bold; '>TaxonomyId</th></tr>" };
                        e.Item.Controls.Add(tbl);
                    }
                    var taxonomy = e.Item.DataItem as Taxonomy;
     
                    var lit = new Literal() { Text = string.Format("<tr><td style='padding: 3px 20px 3px 1px; border-bottom: 1px solid #ececec;'>{0}</td><td style='padding: 3px 1px 3px 5px; border-bottom: 1px solid #ececec;'>{1}</td></tr>", taxonomy.Title, taxonomy.Id) };
                    e.Item.Controls.Add(lit);
                    if (e.Item.ItemIndex == ((List<Taxonomy>)TaxaRepeater.DataSource).Count - 1)
                    {
                        var tbl = new Literal() { Text = "</table>" };
                        e.Item.Controls.Add(tbl);
                    }
                }
            }
     
            protected internal virtual DropDownList TaxaDDL
            {
                get { return Container.GetControl<DropDownList>("taxaDDL", true); }
            }
     
            public override string LayoutTemplatePath
            {
                get
                {
                    return "~/UserControls/CustomTaxonomyControlTemplate.ascx";
                }
                
            }
     
        }
     
        public enum MyRenderTaxonomyAs
        {
            /// <summary>
            /// Reders as horizontal list - floating layout
            /// </summary>
            HorizontalList,
            /// <summary>
            /// Renders as vertical list
            /// </summary>
            VerticalList,
            /// <summary>
            /// Reder as a Clound control - floating with 6 increment steps for the size
            /// </summary>
            Cloud,
     
            DropDown
        } ;
    }

    You need to add FieldName: Tags

    Markus

     

  4. mexner
    mexner avatar
    98 posts
    Registered:
    06 Apr 2006
    13 Aug 2014 in reply to Markus
    Link to this post

    Hi Markus / SF Support,

    Is there a file missing from the 20 June reply? I've created a custom user control "CustomTaxonomyControlTemplate.ascx".

    I added the "CustomTaxonomyControl.cs" to the App_Code folder.

    I can't figure out how to display the Tags as a Drop Down List. Do I,

    1) Drag the user control "CustomTaxonomyControlTemplate
    " onto the page? Doing so - provides no properties specific to tags, such as "RenderAs"

    2) Use the default SF Tag control under classifications, and override the LayoutTemplate Path, with the control name in this post? Doing this appears to have no effect on the control.

    Both methods do not work for me. Which is why I'm wondering, is there a .ascx.cs file missing from this post?

    My ultimate goal is to get the tags to display in a drop down list. I feel I'm extremely close with the help of this post... but can't cross the finish line.

    Thanks,

  5. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    14 Aug 2014 in reply to mexner
    Link to this post

    Dear Mexner

    Sorry for not giving all the information. I hate it if I look something up get very close and just one part is missing.

    I hope the attached image does help you.

    Basically you drag a Tag control onto the page and set the LayoutTemplatePath as well as the RenderAs: DropDown.

    I hope that is all I did. If not just come back and I will look back at what I have done then.

    Markus

  6. mexner
    mexner avatar
    98 posts
    Registered:
    06 Apr 2006
    14 Aug 2014 in reply to Markus
    Link to this post

    Markus, Thank you for the quick reply!

    I have the .cs file placed in my App_Code folder. 

    I have the .ascx file placed in my "controls" file,
    ~/controls/Sitefinity/CustomTagDisplay.ascx

    I have not made any changes to the Advanced settings -> Toolboxes -> Pagecontrols -> Sections -> Classifications -> Tags. 

    When I drag a Tag control, I make the edits you've mentioned. But - they are not saving. Very strange.... I've asked SF support to follow this post to hopefully provide some insights.

    As you can see in the video, the LayoutTemplatePath ALWAYS reverts back to,
    ~/SFRes/Telerik.Sitefinity.Resources.Templates.PublicControls.TaxonomyControl.ascx

    I'm running SF v7.0.5100

    I've attached a screen capture of my process.... I'm just at a loss!
    http://ascendio.com/downloads/2014-08-14_0824.swf

    Thank you all for any insights.

  7. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    14 Aug 2014 in reply to mexner
    Link to this post

    Dear Mexner

    Don't worry be happy. Or better update. 

    I had a problem were the some other stuff was not persistant.  SitemMapID in 7.0.5100 so I would not be the least suprised if this is the same problem.

    The site I have it on runs on 7.0.511.

    So unless I am mistaken Support will come back  first they are not able to reproduce, then that they confirm the problem and that it was fixed in this or that update. 

    So to not wast much time. Download 7.1 create a local project and test it. If it works you know the code works and the version is the problem. If it still does not work you know it somewhere else.

    You save time like this since you do not have to wait for an answer.

    I would update to 7.1.5203 anyhow. If it fixes the problem - bingo. If not you are on the latest version and get recycle bin and a google sitemap creation. (just make sure to use the latest hotfix 7.1.5203 and not 7.1.5200)

    Looking forward your next post reading. Well it works now!

    Markus

  8. mexner
    mexner avatar
    98 posts
    Registered:
    06 Apr 2006
    14 Aug 2014 in reply to Markus
    Link to this post

    Thanks Markus, On v7.1.5200, I still do not have persistence when saving changes to the tag controls' properties. 

    I've responded to my support ticket with that info and referenced this thread. Hopefully we'll get this figured out.

    Thanks for all the assistance, I'll respond when I have it working :)

  9. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    14 Aug 2014 in reply to mexner
    Link to this post

    Strange.

    Maybe I am missing something but it was a while back  (at my age more the 1 month back gets vage :-))

    Good luck and looking forward to the finding of Teleriks Support. They do delive more the we expect on so many times and levels, so I am sure they figure out what I am missing. Hope I copied everything alright back then.

    I am wondering about my last line: You need to add FieldName: Tags

    Did you try to register the custom control as a widget and drop it on a page instead of using the default tag widget?

    Markus

  10. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    08 Dec 2016
    14 Aug 2014
    Link to this post
    Hello,

    I have updated the Mexner's ticket with additional information and a video demonstration.
    The provided control should be registered as a custom one. Keep in mind that the FieldName and the TaxonomyId should be set as well as the Render as option.

    Regards,
    Nikola Zagorchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  11. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    14 Aug 2014 in reply to Nikola Zagorchev
    Link to this post

    Dear Mexner

    www.marktold.com/screencast/sf_taxonomie_as_ddl.swf should show you how it should be done as well.

    Markus

  12. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    08 Dec 2016
    19 Aug 2014
    Link to this post
    Hi all,

    Basically, what should be done in case you are using a web site, not a web application:
    1. Add the ascx file separately, not as a user control in your project.
    2. Add the class file in the App_Code folder and define a namespace for it. Change the layout path to the .ascx file in your project.
    3. Go to advanced settings -> toolboxes -> PageControls. Select a section and create new control. In the Control CLR Type or Virtual Path field enter the Namespace.Class of the class file of the control.
    4. Add the control to the page. Enter FieldName, TaxonomyId and RenderAs properties.

    Regards,
    Nikola Zagorchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  13. mexner
    mexner avatar
    98 posts
    Registered:
    06 Apr 2006
    19 Aug 2014 in reply to Nikola Zagorchev
    Link to this post

    Thanks to everyone involved! I have this working now. 

    Some of my "gotchas"...

    - I'm using a website, not a web-app. I placed the CustomTaxonomyControl.cs into my App_Code folder.

    - The CustomTagDisplay.ascx control does not have any code behind or inheritance.

    - When registering the custom control in SF, you have to specify the layout template there, not once you drag the control to the page and then try to edit it's properties. Also, use the CLR and namespace to register the control, not the virtual path.

    - First time dragging the control onto the page, save the page, and leave. Then come back to edit it, and it will provide you with the taxonomy id. 

    - For this to work as a drop down list, you must provide;
    1) Taxonomy Id
    2) Field name : Tags
    3) RenderAs: DropDown

    Some helpful screencasts,
    http://screencast.com/t/UyJYAOEJK
    http://www.marktold.com/screencast/sf_taxonomie_as_ddl.swf

    THANK YOU TO MARKUS AND SF SUPPORT (NIKOLA) FOR ALL OF YOUR HELP!

  14. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    08 Dec 2016
    20 Aug 2014
    Link to this post
    Hi,

    I am glad you have managed to get it working. Contact us if we can help further.

    Regards,
    Nikola Zagorchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
14 posts, 1 answered