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.
<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&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 & 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>
<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>
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++;
});
});
