Edit this page

Custom Attributes

RadMenuItem objects provide a special collection called Attributes. You can use this collection to expand the information stored with the items. The Attributes collection lets you store any number of attributes as name/value pairs.You can specify custom attributes declaratively in the RadMenuItem tag or programmatically using the Attributes collection of the RadMenuItem. You can also access custom attributes client-side, using the get_attributes collection of the RadMenuItem client-side object.

Setting Attributes Declaratively

In the ASP.NET declaration of your RadMenu object, you can add custom attributes to menu items by simply adding Name="value" to the RadMenuItem declaration. For example, the following RadMenu definition adds a "State" custom attribute to its non-root menu items:

<telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" Skin="Office2007" Width="54px" OnClientItemClicked="ToggleCheck"
    CssClass="qsfexMenu" OnClientItemOpening="ApplyChildrenImages">
    <Items>
        <telerik:RadMenuItem Text="Format">
            <Items>
                <telerik:RadMenuItem State="unchecked" Text="Bold">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem State="unchecked" Text="Italic">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem State="unchecked" Text="Underlined">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Data Binding with Custom Attributes

When binding the RadMenu to data, custom attributes can be set in the ItemDataBound event. The following code binds the menu to a DataTable when the page Loads. The DataTable contains a "Roles" column which is not mapped to a property of the menu items:

protected void Page_Load(object sender, EventArgs e)
{  
    if (!Page.IsPostBack)
    {     
        //dynamically crate a table to populate the menu
        DataTable table1 = new DataTable(); 

        table1.Columns.Add("ID");     
        table1.Columns.Add("ParentID");    
        table1.Columns.Add("Roles"); 
        // for the custom attributes     
        table1.Columns.Add("Text");
        table1.Rows.Add(new string[] { "1", null, "A", "Politics" });     
        table1.Rows.Add(new string[] { "2", null, "B", "Sports" });     
        table1.Rows.Add(new string[] { "3", null, "C", "Events" });    
        table1.Rows.Add(new string[] { "4", "1", "D", "CNN" });    
        table1.Rows.Add(new string[] { "5", "1", "E", "NBC" });    
        table1.Rows.Add(new string[] { "6", "1", "F", "ABC" });    
        table1.Rows.Add(new string[] { "7", "2", "G", "US Sports" });   
        table1.Rows.Add(new string[] { "8", "2", "B", "European Sports" });   
        table1.Rows.Add(new string[] { "9", "7", "D", "Baseball" });   
        table1.Rows.Add(new string[] { "10", "7", "C", "Football" }); 
        table1.Rows.Add(new string[] { "11", "7", "B", "Basketball" });   
        table1.Rows.Add(new string[] { "12", "8", "D", "Soccer" });  
        table1.Rows.Add(new string[] { "14", "3", "E", "Oscar Awards" });   
        table1.Rows.Add(new string[] { "15", "3", "B", "MTV Movie Awards" }); 
        RadMenu1.DataSource = table1;    
        RadMenu1.DataFieldID = "ID"; 
        RadMenu1.DataFieldParentID = "ParentID";     
        RadMenu1.DataTextField = "Text";  
        RadMenu1.DataBind();   
    }
}   
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        'dynamically crate a table to populate the menu    
        Dim table1 As New DataTable()

        table1.Columns.Add("ID")
        table1.Columns.Add("ParentID")
        table1.Columns.Add("Roles")
        ' the column for the custom attributes   
        table1.Columns.Add("Text")
        table1.Rows.Add(New String() {"1", Nothing, "A", "Politics"})
        table1.Rows.Add(New String() {"2", Nothing, "B", "Sports"})
        table1.Rows.Add(New String() {"3", Nothing, "C", "Events"})
        table1.Rows.Add(New String() {"4", "1", "D", "CNN"})
        table1.Rows.Add(New String() {"5", "1", "E", "NBC"})
        table1.Rows.Add(New String() {"6", "1", "F", "ABC"})
        table1.Rows.Add(New String() {"7", "2", "G", "US Sports"})
        table1.Rows.Add(New String() {"8", "2", "B", "European Sports"})
        table1.Rows.Add(New String() {"9", "7", "D", "Baseball"})
        table1.Rows.Add(New String() {"10", "7", "C", "Football"})
        table1.Rows.Add(New String() {"11", "7", "B", "Basketball"})
        table1.Rows.Add(New String() {"12", "8", "D", "Soccer"})
        table1.Rows.Add(New String() {"14", "3", "E", "Oscar Awards"})
        table1.Rows.Add(New String() {"15", "3", "B", "MTV Movie Awards"})
        RadMenu1.DataSource = table1
        RadMenu1.DataFieldID = "ID"
        RadMenu1.DataFieldParentID = "ParentID"
        RadMenu1.DataTextField = "Text"
        RadMenu1.DataBind()
    End If
End Sub 

The "Roles" column is mapped to a custom attribute in the ItemDataBound event handler. The event handler also sets the ToolTip property of the item to the value of its custom attribute to allow for testing of the custom attribute:

protected void RadMenu1_ItemDataBound(object sender,Telerik.Web.UI.RadMenuEventArgs e)
{  
    DataRowView dataRow = (DataRowView)e.Item.DataItem;   
    e.Item.Attributes["Roles"] = dataRow["Roles"].ToString();
    e.Item.ToolTip = e.Item.Attributes["Roles"];
}       
Protected Sub RadMenu1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadMenuEventArgs) Handles RadMenu1.ItemDataBound
    Dim dataRow As DataRowView = DirectCast(e.Item.DataItem, DataRowView)
    e.Item.Attributes("Roles") = dataRow("Roles").ToString()
    e.Item.ToolTip = e.Item.Attributes("Roles")
End Sub

Using Attributes in Server-Side Code

You can access custom attributes from code behind via the Attributes collection exposed by the RadMenuItem class.

Paragraph.Font.Bold = RadMenu1.Items[0].Items[0].Attributes["State"] == "checked";
Paragraph.Font.Italic = RadMenu1.Items[0].Items[1].Attributes["State"] == "checked";
Paragraph.Font.Underline = RadMenu1.Items[0].Items[2].Attributes["State"] == "checked";         
Paragraph.Font.Bold = RadMenu1.Items(0).Items(0).Attributes("State") = "checked"
Paragraph.Font.Italic = RadMenu1.Items(0).Items(1).Attributes("State") = "checked"
Paragraph.Font.Underline = RadMenu1.Items(0).Items(2).Attributes("State") = "checked"

Using Attributes in Client-Side Code

You can work with custom attributes from client-side code using the attributes collection returned by the get_attributes method of the client-side RadMenuItem object. The attributes collection has a getAttribute method that lets you get attribute values, and a setAttribute method that lets you set them:

function ToggleCheck(sender, args) {
    var menu = sender;
    var item = args.get_item();
    // Menu item without image? Ignore.
    if (!item.get_imageElement()) return;

    var state = item.get_attributes().getAttribute("State");

    // Changes to text, value, attributes, etc. will be tracked
    // and persisted to the server after this function call.
    menu.trackChanges();
    if (state == "unchecked") {
        item.get_attributes().setAttribute("State", "checked");
    }
    else {
        item.get_attributes().setAttribute("State", "unchecked");
    }
    menu.commitChanges();
    ApplyImage(item);
}     

To see a live example that demonstrates these techniques, see Custom Attributes.

See Also