Render Tag Widget as Dropdown list

Posted by Community Admin on 17-Jun-2014 00:00

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: jsfiddle.net/.../

Markus

Posted by Community Admin on 19-Jun-2014 00:00

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

Posted by Community Admin on 20-Jun-2014 00:00

@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

Posted by Community Admin on 13-Aug-2014 00:00

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,

Posted by Community Admin on 14-Aug-2014 00:00

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

Posted by Community Admin on 14-Aug-2014 00:00

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!
ascendio.com/.../2014-08-14_0824.swf

Thank you all for any insights.

Posted by Community Admin on 14-Aug-2014 00:00

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

Posted by Community Admin on 14-Aug-2014 00:00

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 :)

Posted by Community Admin on 14-Aug-2014 00:00

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

Posted by Community Admin on 14-Aug-2014 00:00

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

Posted by Community Admin on 14-Aug-2014 00:00

Dear Mexner

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

Markus

Posted by Community Admin on 19-Aug-2014 00:00

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

Posted by Community Admin on 19-Aug-2014 00:00

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,
screencast.com/.../UyJYAOEJK
www.marktold.com/.../sf_taxonomie_as_ddl.swf

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

Posted by Community Admin on 20-Aug-2014 00:00

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

This thread is closed

All Replies