Try Now
More in this section

Forums / General Discussions / Id for Div

Id for Div

4 posts, 0 answered
  1. SJ
    SJ avatar
    2 posts
    16 Dec 2010
    31 Jan 2011
    Link to this post

    Is there any way to apply id for Div of layout controls in sitefinity?

  2. Lyubomir Dokov
    Lyubomir Dokov avatar
    43 posts
    12 Aug 2016
    31 Jan 2011
    Link to this post
    Hi SJ,

    Currently there is no way to assign IDs in layout controls. If you put IDs you may have problems when you insert multiple instances of the same layout control.

    Can you please explain why you need to have IDs there? Maybe we could think of a workaround?

    All the best,

    Lyubomir Dokov
    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. Len
    Len avatar
    2 posts
    15 Aug 2012
    19 Sep 2012
    Link to this post
    Hello Lyubomir,

    I am having a similar challenge. I have a page with two image galleries, I only want to display one at a time. Alternating based on a button.  I am using sitefinity 5.1.327.  I am looking for a way to have sitefinity wrap a widget in a named div, so I can easily hide or display it with javascript.


    Len Johnson
  4. MB
    MB avatar
    302 posts
    09 Jan 2005
    20 Sep 2012
    Link to this post

    See if this gets you started - I'm sure you'll be able to advance on the basics.

    It's a simple custom layout example that allows you to toggle display of two panels.

    I use this concept quite a lot, and have had no major issues to date. 

    In edit mode, you can change panels, so you can drag & drop an image gallery widget into each panel, and then configure them differently.

    In public mode, the user can click on the button to change panels, which will display alternate galleries.

    Add the layout to you toolbox PageLayouts
    type="Telerik.Sitefinity.Web.UI.LayoutControl, Telerik.Sitefinity"
    description="My Layout" layoutTemplate="~/path/MyLayout.ascx"

    Custom Layout: MyLayout.ascx

    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%-- Obviously use a Stylesheet in production --%>
    <style type="text/css">
    .mylayout {display:block; height:auto; width:auto;}
    .mywrap {display:block; position:relative; height:400px; width:600px; border:1px solid black;}
    .myiwrap {position:absolute; height:400px; max-height:400px; width:600px; border:none; overflow-y:auto;}
    .myiwrap.myiwrap1 {background-color:Red;}
    .myiwrap.myiwrap2 {background-color:Blue;}
    .mylayout.show1 .myiwrap.myiwrap1 {display:block;}
    .mylayout.show1 .myiwrap.myiwrap2 {display:none;}
    .mylayout.show2 .myiwrap.myiwrap1 {display:none;}
    .mylayout.show2 .myiwrap.myiwrap2 {display:block;}
    .mytoggle {clear:both; margin-top:10px; vertical-align:middle;}
    .mytoggle .mylabel {float:left; width:100px; line-height:23px; font-size:12px; font-weight:bold;}
    .mytoggle .mybutton {float:left; width:80px;}
    <asp:panel runat="server" id="mylayout" cssclass="mylayout show1" clientidmode="Predictable" >
        <div class="mywrap">
            <%-- Drag widgets into here --%>
            <div id="myiwrap1" runat="server" class="sf_colsIn myiwrap myiwrap1"></div>
            <%-- Drag widgets into here --%>
            <div id="myiwrap2" runat="server" class="sf_colsIn myiwrap myiwrap2"></div>
        <div class="mytoggle">
            <label class="mylabel">Toggle View:</label>
            <input class="mybutton" type="button" value="Click Me" onclick="toggleMyLayout();return false;" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function toggleMyLayout()

4 posts, 0 answered