ComponentOne Menu for ASP.NET AJAX: Menu Appearance > Templates > Individual Menu Items Template

Individual Menu Items Template

If you would like to define a unique template for individual menu items you can assign the Template property to the item you wish to customize. If a global template such as the ItemsTemplate is assigned to the C1Menu control the per-item template overrides it.

The following image shows the same menus with the first one showing the unique templates used for the child item in the first menu item and the second menu item.

 

 

To add a unique template for individual menu items, complete the following steps:

1.   Open the C1Menu Designer Form and add a few link items with child link items so it appears similar to the following:

 

 

2.   Click OK to save and close the C1Menu Designer Form dialog box.

3.   Switch to source view and locate the child link item for LinkItem, add the <Template></Template> tags and the HTML markup within the <Template></Template> so it appears like the following:

<cc1:C1Menu ID="C1Menu1" runat="server"

            VisualStylePath="~/C1WebControls/VisualStyles">

            <Items>

                <cc1:C1MenuItem runat="server" Text="LinkItem1">

                    <Items>

                        <cc1:C1MenuItem runat="server" Text="LinkItem1">

                        <Template>

                        <fieldset>

    <legend>Suppliers:</legend>

    Supplier ID: <input type="text" size="20" /><br />

    Company Name: <input type="text" size="17" /><br />

    Contact Name: <input type="text" size="18" /><br />

    Contact Title: <input type="text" size="20" /><br />

    Address: <input type="text" size="20" /><br />

    City: <input type="text" size="20" /><br />

    Region: <input type="text" size="20" /><br />

    Postal Code: <input type="text" size="20" /><br />

    Country: <input type="text" size="20" /><br />

    Phone: <input type="text" size="20" /><br />

    Fax: <input type="text" size="20" />

  </fieldset>

                        </Template>

                        </cc1:C1MenuItem>

This will assign the template to the first child item in LinkItem1.

4.   In source view locate the child link item for LinkItem2 and add the <Template></Template> tags and the HTML markup within the <Template></Template> so it appears like the following::

<cc1:C1MenuItem runat="server" Text="LinkItem2">

                    <Items>

                        <cc1:C1MenuItem runat="server" Text="LinkItem1">

                        <Template>

                        <fieldset>

                        <legend>Shippers:</legend>

                         Shipper ID: <input type="text" size="20" /><br />

                         Company Name: <input type="text" size="15" /><br />

                         Phone: <input type="text" size="15" />

                        </fieldset>

                        </Template>

                        </cc1:C1MenuItem>

                    </Items>

                </cc1:C1MenuItem>

5.   Run the project and notice the field sets that appear for the first child item in the first menu item and the first child item in the second menu item.

 


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.