New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Declarative DataSources

RadTagCloud supports binding to various types of data sources, including declarative datasources. Table-based DataSource components can be used to bind the TagCloud declaratively at design time.

Below are the properties and methods related to data binding:

  • DataSource - Set to an instance of your data source. This is mandatory when binding the RadTagCloud at runtime.
  • DataSourceID - Set to the ID of your data source. This is mandatory when binding the RadTagCloud declaratively.
  • DataMember - If the data source is a DataSet and DataMember is set, then the RadTagCloud is bound to the DataTable with the respective name in the DataSet. If DataMember is not set, the TagCloud is bound to the first DataTable in the DataSet.
  • DataTextField - This is the field name from the data source that populates each item's Text property during binding.
  • DataWeightField - This is the field name from the data source that populates each item's Weight property during binding.
  • DataNavigateUrlField - This is the field name from the data source that populates each item's NavigateUrl property during binding.
  • DataBind - Call this method after you have set the aforementioned properties when binding at runtime. This method is mandatory for binding at runtime.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • TagDataItem.cs
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.TagCloud.DeclarativeDataSources.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow">
        <h2>SqlDataSource</h2>
            <telerik:RadTagCloud RenderMode="Lightweight" ID="RadTagCloud1" runat="server" DataSourceID="SqlDataSource1"
                DataTextField="Title" DataWeightField="Votes" OnItemDataBound="RadTagCloud1_ItemDataBound" Target="_blank" >
            </telerik:RadTagCloud>
    </div>
    <div class="demo-container size-narrow">
        <h2>ObjectDataSource</h2>
            <telerik:RadTagCloud RenderMode="Lightweight" ID="RadTagCloud2" runat="server" DataSourceID="ObjectDataSource1"
                DataTextField="Text" DataWeightField="Weight" DataNavigateUrlField="NavigateUrl"
                RenderItemWeight="true" MaxFontSize="150%" MinFontSize="100%" Target="_blank">
            </telerik:RadTagCloud>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [MovieRatings]">
    </asp:SqlDataSource>
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetDataItems"
        TypeName="Telerik.Web.Examples.TagDataItem"></asp:ObjectDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance