ComponentOne Menu for ASP.NET Web Forms
Task-Based Help / Item Functions
In This Topic
    Item Functions
    In This Topic

    The C1Menu control has an extensive client-side API. This topic illustrates how to call the client-side  methods using the same patterns you would see in a jQuery UI using the Source View.

    1. In Source View, add the following markup between the <cc1:C1Menu> tags.

      To write code in Source View

              <Items>

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

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem2" Text="Breaking News" runat="server">

                                 <Items>

                                        <cc1:C1MenuItem runat="server" Header="true" Text="header2">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem runat="server" Separator="true">

                                        </cc1:C1MenuItem>

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

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem6" runat="server" Text="Politics">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem7" runat="server" Text="A&amp;E">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem8" runat="server" Text="Sports">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem9" runat="server" Text="Local">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem10" runat="server" Text="Health">

                                        </cc1:C1MenuItem>

                                 </Items>

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem11" runat="server" Text="Entertainment">

                                 <Items>

                                        <cc1:C1MenuItem ID="C1MenuItem12" runat="server" Text="Celebrity news">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem13" runat="server" Text="Gossip">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem14" runat="server" Text="Movies">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem15" runat="server" Text="Music">

                                               <Items>

                                                      <cc1:C1MenuItem ID="C1MenuItem16" runat="server" Text="Alternative">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem17" runat="server" Text="Country">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem18" runat="server" Text="Dance">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem19" runat="server" Text="Electronica">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem20" runat="server" Text="Metal">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem21" runat="server" Text="Pop">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem22" runat="server" Text="Rock">

                                                             <Items>

                                                                    <cc1:C1MenuItem ID="C1MenuItem23" runat="server" Text="Bands">

                                                                           <Items>

                                                                                 <cc1:C1MenuItem ID="C1MenuItem24" runat="server" Text="Dokken">

                                                                                  </cc1:C1MenuItem>

                                                                           </Items>

                                                                    </cc1:C1MenuItem>

                                                                    <cc1:C1MenuItem ID="C1MenuItem25" runat="server" Text="Fan Clubs">

                                                                    </cc1:C1MenuItem>

                                                                    <cc1:C1MenuItem ID="C1MenuItem26" runat="server" Text="Songs">

                                                                    </cc1:C1MenuItem>

                                                             </Items>

                                                      </cc1:C1MenuItem>

                                               </Items>

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem27" runat="server" Text="Slide shows">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem28" runat="server" Text="Red carpet">

                                        </cc1:C1MenuItem>

                                 </Items>

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem29" Text="Finance" runat="server">

                                 <Items>

                                        <cc1:C1MenuItem ID="C1MenuItem30" Text="Personal" runat="server">

                                               <Items>

                                                      <cc1:C1MenuItem ID="C1MenuItem31" Text="Loans" runat="server">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem32" Text="Savings" runat="server">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem33" Text="Mortgage" runat="server">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem34" Text="Debt" runat="server">

                                                      </cc1:C1MenuItem>

                                               </Items>

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem35" Text="Business" runat="server">

                                        </cc1:C1MenuItem>

                                 </Items>

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem36" Text="Food &#38; Cooking" runat="server">

                                 <Items>

                                        <cc1:C1MenuItem ID="C1MenuItem37" Text="Breakfast" runat="server">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem38" Text="Lunch" runat="server">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem39" Text="Dinner" runat="server">

                                        </cc1:C1MenuItem>

                                        <cc1:C1MenuItem ID="C1MenuItem40" Text="Dessert" runat="server">

                                               <Items>

                                                      <cc1:C1MenuItem ID="C1MenuItem41" Text="Dump Cake" runat="server">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem42" Text="Doritos" runat="server">

                                                      </cc1:C1MenuItem>

                                                      <cc1:C1MenuItem ID="C1MenuItem43" Text="Both please" runat="server">

                                                      </cc1:C1MenuItem>

                                               </Items>

                                        </cc1:C1MenuItem>

                                 </Items>

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem44" Text="Lifestyle" runat="server">

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem45" Text="News" runat="server">

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem46" Text="Politics" runat="server">

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem47" Text="Sports" runat="server">

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem48" Text="Novels" runat="server">

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem49" Text="Magazine" runat="server">

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem50" Text="Books" runat="server">

                           </cc1:C1MenuItem>

                           <cc1:C1MenuItem ID="C1MenuItem51" Text="Education" runat="server">

                           </cc1:C1MenuItem>

                    </Items>

    2. After the closing <cc1:C1Menu> tag, insert the following markup to create the button controls.

      To write code in Source View

      <p>
       <input type="button" id="previous" value="previous" />

      <input type="button" id="next" value="next" />

      <input type="button" id="previousPage" value="previousPage" />

      <input type="button" id="nextPage" value="nextPage" />

      </p>

    3. Use the following script to call the client-side functions.

      To write code in Source View

          <script type="text/javascript">

              var count = 0;

              $(document).ready(function () {

                  $("#previous").click(function () {

                      $("#<%= Menu1.ClientID %>").focus().c1menu("previous");

                      count++;

                  });

                  $("#next").click(function () {

                      $("#<%= Menu1.ClientID %>").focus().c1menu("next");

                                   count++;

                               });

                  $("#previousPage").click(function () {

                      if (count === 0) {

                          $("#<%= Menu1.ClientID %>").find(".wijmo-wijmenu-link:first").click();

                                   }

                                   $("#<%= Menu1.ClientID %>").c1menu("previousPage");

                                   count++;

                               });

                  $("#nextPage").click(function () {

                      if (count === 0) {

                          $("#<%= Menu1.ClientID %>").find(".wijmo-wijmenu-link:first").click();

                                   }

                                   $("#<%= Menu1.ClientID %>").c1menu("nextPage");

                                   count++;

                               });

              });

    4. Press F5 to run your program. The menu should resemble the following image.

      C1Menu