Id for Div - Sitefinity - General Discussions

All Replies

Posted by Community Admin on 31-Jan-2011 00:00

Hi,

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

Thx,

Posted by Community Admin on 31-Jan-2011 00:00

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

Posted by Community Admin on 19-Sep-2012 00:00

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.

Thanks,

Len Johnson

Posted by Community Admin on 20-Sep-2012 00:00

@Len

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"
title="MyLayout"
description="My Layout" layoutTemplate="~/path/MyLayout.ascx"
name="MyLayout"

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;

</style>

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

<div class="mytoggle">

<label class="mylabel">Toggle View:</label>

<input class="mybutton" type="button" value="Click Me" onclick="toggleMyLayout();return false;" />

</div>

</asp:panel>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function toggleMyLayout()

$('#<%=mylayout.ClientID%>').toggleClass('show1').toggleClass('show2');

</script>

</telerik:RadCodeBlock>

This thread is closed