Hi all,
I have a TagCloud which number of its items are increasing every day based on an algorithm.
I would like to set a fixed width and a dynamic height for this TagCloud which should be increased automatically based on the number of existing items.
How can I do this?
Cheers,
Hamed
I have a TagCloud which number of its items are increasing every day based on an algorithm.
I would like to set a fixed width and a dynamic height for this TagCloud which should be increased automatically based on the number of existing items.
How can I do this?
Cheers,
Hamed
2 Answers, 1 is accepted
0
Accepted
Hi Hamed,
TagCloud by default fits the width of the containing element. This will happen if you use the following code:
However, if you like to have TagCloud with a fixed width, you could use the Width property of the control (changes are marked in yellow):
In that case, if you have increasing number of tags, the TagCloud height will also increase. If you want to have TagCloud with fixed width, and fixed height with scroll, you should make a small change in the CSS, and to put it in the head section of the document - changes are marked in yellow:
Bellow is a sample page code with all three situations:
Attached is tagcloud.gif showing the result in the browser from the code above.
All the best,
Bojo
the Telerik team
TagCloud by default fits the width of the containing element. This will happen if you use the following code:
<
telerik:RadTagCloud
ID
=
"RadTagCloud1"
runat
=
"server"
RenderItemWeight
=
"true"
Enabled
=
"true"
>
<
Items
>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
</
Items
>
</
telerik:RadTagCloud
>
However, if you like to have TagCloud with a fixed width, you could use the Width property of the control (changes are marked in yellow):
<
telerik:RadTagCloud
ID
=
"RadTagCloud1"
runat
=
"server"
RenderItemWeight
=
"true"
Enabled
=
"true"
Width
=
"250px"
>
<
Items
>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
</
Items
>
</
telerik:RadTagCloud
>
In that case, if you have increasing number of tags, the TagCloud height will also increase. If you want to have TagCloud with fixed width, and fixed height with scroll, you should make a small change in the CSS, and to put it in the head section of the document - changes are marked in yellow:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
style
type
=
"text/css"
>
.RadTagCloud
{
overflow: auto !important;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
</
asp:ScriptManager
>
<
telerik:RadTagCloud
ID
=
"RadTagCloud1"
runat
=
"server"
RenderItemWeight
=
"true"
Enabled
=
"true"
Width
=
"250px"
Height
=
"50px"
>
<
Items
>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
</
Items
>
</
telerik:RadTagCloud
>
</
form
>
</
body
>
</
html
>
Bellow is a sample page code with all three situations:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
style
type
=
"text/css"
>
.RadTagCloud
{
overflow: auto !important;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
</
asp:ScriptManager
>
<
telerik:RadTagCloud
ID
=
"RadTagCloud1"
runat
=
"server"
RenderItemWeight
=
"true"
Enabled
=
"true"
>
<
Items
>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
</
Items
>
</
telerik:RadTagCloud
>
<
br
/>
<
telerik:RadTagCloud
ID
=
"RadTagCloud2"
runat
=
"server"
RenderItemWeight
=
"true"
Enabled
=
"true"
Width
=
"400px"
>
<
Items
>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
</
Items
>
</
telerik:RadTagCloud
>
<
br
/>
<
telerik:RadTagCloud
ID
=
"RadTagCloud3"
runat
=
"server"
RenderItemWeight
=
"true"
Enabled
=
"true"
Width
=
"400px"
Height
=
"150px"
>
<
Items
>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"ASP.NET"
Weight
=
"12"
/>
<
telerik:RadTagCloudItem
Text
=
"AJAX"
Weight
=
"134"
/>
<
telerik:RadTagCloudItem
Text
=
"VB"
Weight
=
"56"
/>
<
telerik:RadTagCloudItem
Text
=
"C#"
Weight
=
"38"
/>
<
telerik:RadTagCloudItem
Text
=
"Web"
Weight
=
"73"
/>
<
telerik:RadTagCloudItem
Text
=
"jQuery"
Weight
=
"23"
/>
<
telerik:RadTagCloudItem
Text
=
".NET"
Weight
=
"78"
/>
<
telerik:RadTagCloudItem
Text
=
"Code"
Weight
=
"50"
/>
<
telerik:RadTagCloudItem
Text
=
"UI"
Weight
=
"80"
/>
<
telerik:RadTagCloudItem
Text
=
"Unit"
Weight
=
"20"
/>
<
telerik:RadTagCloudItem
Text
=
"Class"
Weight
=
"50"
/>
</
Items
>
</
telerik:RadTagCloud
>
</
form
>
</
body
>
</
html
>
Attached is tagcloud.gif showing the result in the browser from the code above.
All the best,
Bojo
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
0

Hamed
Top achievements
Rank 1
answered on 29 Sep 2010, 09:15 AM
Hi Bojo
I really appreciate for your kind help and support.
The tag Cloud is now working great.
Cheers,
Hamed
I really appreciate for your kind help and support.
The tag Cloud is now working great.
Cheers,
Hamed