Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

TagCloud size

2 Answers 75 Views
TagCloud
This is a migrated thread and some comments may be shown as answers.
Hamed
Top achievements
Rank 1
Hamed asked on 27 Sep 2010, 08:01 AM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 29 Sep 2010, 08:36 AM
tagcloud.gif
Hi Hamed,

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">
<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">
<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
Tags
TagCloud
Asked by
Hamed
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Hamed
Top achievements
Rank 1
Share this question
or