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

Forums / Developing with Sitefinity / Custom Language selector

Custom Language selector

8 posts, 0 answered
  1. Mathieu
    Mathieu avatar
    13 posts
    Registered:
    21 Mar 2012
    02 Apr 2013
    Link to this post
    My standards prevent me from using the Language Selector Control as the markup that it renders is not compliant with our Web Standards.  My goal is to have on my master page a Link that when I click on it switches me to the current viewed page to it's alternate language.

    Example:
     Page being viewed is my english home page ( url: http://localhost/home). I need my link (link text: Français) to point to my home page french URL (http://localhost/fr/accueil)

    how can this be done in c# code behind
  2. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    02 Apr 2013 in reply to Mathieu
    Link to this post
    You can configure the language selector to render in a different ways.

    From the docs:
    "In the Display language selector as… radio button group, choose how to display the links to different languages, by selecting one of the following:

    Horizontal list
    Displays the language links one next to the other.

    Vertical list
    Displays the language links one under another.

    Drop-down menu
    Displays the language links in a dropdown box."
  3. Mathieu
    Mathieu avatar
    13 posts
    Registered:
    21 Mar 2012
    02 Apr 2013 in reply to Tim
    Link to this post
    Hi Tim,

    Unfortunatly, as stated, the markup that the selector renders is div-> ul-> li but my language toggle is already in an ul->li and make my layout un compliant to our standards hence the reason i need code behind logic
  4. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    02 Apr 2013 in reply to Mathieu
    Link to this post
    I'm trying to save you from unnecessary work. :)

    Alright, if you need to change the markup that is actually rendered, you can do that by modifying the Layout Template. The one for the language switcher look to be:

    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="sfFields" Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
     
    <div runat="server" id="controlWrapper">
     
        <asp:Panel ID="errorsPanel" runat="server" CssClass="sfErrorSummary" />
     
        <sf:ConditionalTemplateContainer ID="sfLangSelectorConditionalTemplateContainer" runat="server">
            <Templates>
                <sf:ConditionalTemplate Left="SelectorType" Operator="Equal" Right="Horizontal" runat="server">
                    <asp:Repeater ID="languagesRepeater_horizontal" runat="server">
                        <HeaderTemplate>
                            <ul id="langsWrapper" class="sflanguagesHorizontalList">
                        </HeaderTemplate>
                        <ItemTemplate>
                            <li runat="server" id="langHolder" class="sflanguageItem">
                                <a runat="server" id="langLink" href="" class="sflanguageLnk"><span runat="server" id="langName"></span></a>
                            </li>
                        </ItemTemplate>
                        <FooterTemplate>
                            </ul>
                        </FooterTemplate>
                    </asp:Repeater>
                </sf:ConditionalTemplate>
                <sf:ConditionalTemplate Left="SelectorType" Operator="Equal" Right="Vertical" runat="server">
                    <asp:Repeater ID="languagesRepeater_vertical" runat="server">
                        <HeaderTemplate>
                            <ul id="langsWrapper" class="sflanguagesVerticalList">
                        </HeaderTemplate>
                        <ItemTemplate>
                            <li runat="server" id="langHolder" class="sflanguageItem">
                                <a runat="server" id="langLink" href="" class="sflanguageLnk"><span runat="server" id="langName"></span></a>
                            </li>
                        </ItemTemplate>
                        <FooterTemplate>
                            </ul>
                        </FooterTemplate>
                    </asp:Repeater>
                </sf:ConditionalTemplate>
                <sf:ConditionalTemplate Left="SelectorType" Operator="Equal" Right="DropDown" runat="server">
                    <div class="sflanguagesDropDownList">
                        <asp:DropDownList runat="server" ID="langsSelect" CssClass="sflanguagesDropDown"></asp:DropDownList>
                    </div>
                </sf:ConditionalTemplate>
            </Templates>
        </sf:ConditionalTemplateContainer>
    </div>
     
    Modify that and save it in your project. Afterwards, you can assign it in the advanced options.

    If that still won't get you there, we can look at something custom.
  5. Mathieu
    Mathieu avatar
    13 posts
    Registered:
    21 Mar 2012
    02 Apr 2013 in reply to Tim
    Link to this post
    Understand and much appreciated :)

    I think it would be best to create the code in code behind in a cs file that is called from the master page as i don't want to burden the user with adding the language selector as our web standards are that a page always has to have content in both languages.

    Thx for the help Tim!
  6. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    03 Apr 2013 in reply to Mathieu
    Link to this post
    Mathieu,

    If you follow the same idea as in this post, you only have to change it once.
  7. Mathieu
    Mathieu avatar
    13 posts
    Registered:
    21 Mar 2012
    03 Apr 2013 in reply to Tim
    Link to this post
    Morning Tim,

    OK, I'll try this.  Just to clarify a few things with you.  In the backend admin section what would be my HostType?  And for LayoutTemplatePath, in my project (SiteFinityApp) can I create the path at the root of the project or is there an alternative that is better?  Also, with code provided above, What can or cannot be removed?
  8. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    05 Apr 2013
    Link to this post
    Hello Mathieu,

    The HostType when changing the template of the Language selector would be: Telerik.Sitefinity.Localization.Web.UI.LanguageSelectorControl 

    On the second question, you can create the template in the root of the project. So for example if you template name is CustomTemplate.ascx, the path would be ~/CustomTemplate.ascx. I wouldn't advise you to remove markup from the template. You can set display none to the elements, that should not be visible, because the control might be looking for them and if you delete them, they will not be rendered in the html, which will result in errors. By setting display:none to them with css, they will be available for the control in the html, but will not be visible on the front-end.

    Regards,
    Jen Peleva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
8 posts, 0 answered