This topic demonstrates how to create each C1NavigationList item on the client side. To learn how to add items on the server side, see Adding Navigation List Items to the C1NavigationList Control. This topic assumes that you have created an AJAX-enabled ASP.NET project that contains a ScriptManager control (see Creating an AJAX-Enabled ASP.NET Project) and a C1NavigationList control.
Creating a C1NavigationListItem
Item
To create a C1NavigationListItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the group item, set its properties, and add it to the navigation list
function addItem() {
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListItem();
newItem.set_text("text");
newItem.set_detailText("detailText");
newItem.set_topText("topText");
newItem.set_bottomText("bottomText");
navList.get_items().add(newItem);
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddItemButton" type="button" value="Add Item" onclick="addItem()"/>
5. Save the project and open it in a Studio for iPhone-compatible browser. Click the Add Item button and observe that a C1NavigationListItem is added to your page without postback.
Creating a C1NavigationListGroupItem
Item
To create a C1NavigationListGroupItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the group item, set its properties, and add it to the navigation list
function addGroupItem(){
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListGroupItem();
newItem.set_text("Group");
navList.get_items().add(newItem);
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddGroupButton" type="button" value="Add Group Item" onclick="addGroupItem()"/>
5. Save the project and open it in a Studio for iPhone-compatible browser.
6. Click the Add Group Item button and observe that a C1NavigationListGroupItem is added to your page without postback.
Creating a C1NavigationListHeaderItem
Item
To create a C1NavigationListHeaderItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the header item, set its properties, and add it to the navigation list
function addHeaderItem(){
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListHeaderItem();
newItem.set_text("Header");
navList.get_items().add(newItem);
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddHeaderButton" type="button" value="Add Header Item" onclick="addHeaderItem()"/>
5. Save the project and open it in a Studio for iPhone-compatible browser.
6. Click the Add Header Item button and observe that a C1NavigationListHeaderItem is added to your page without postback.
Creating a C1NavigationListButtonItem
Item
To create a C1NavigationListButtonItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the button item, set its properties, and add it to the navigation list
function addButtonItem() {
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListButtonItem();
newItem.set_text("Button");
navList.get_items().add(newItem);
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddButtonButton" type="button" value="Add Button Item" onclick="addButtonItem()"/>
5. Save the project and open it in a Studio for iPhone-compatible browser.
6. Click the Add Button Item button and observe that a C1NavigationListButtonItem is added to your page without postback.
Creating a C1NavigationListLinkItem
Item
To create a C1NavigationListLinkItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the link item, set its properties, and add it to the navigation list
function addLinkItem(){
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListLinkItem();
navList.get_items().add(newItem);
newItem.set_text("Link");
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddLinkButton" type="button" value="Add Link Item" onclick="addLinkItem()"/>
5. Save the project and open it in a Studio for iPhone-compatible browser.
6. Click the Add Link Item button and observe that a C1NavigationListButtonItem is added to your page without postback.
Creating a C1NavigationListOptionItem
Item
To create a C1NavigationListOptionItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the option item, set its properties, and add it to the navigation list
function addOptionItem(isChecked){
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListOptionItem();
navList.get_items().add(newItem);
newItem.set_text("Option");
newItem.set_checked(isChecked);
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddOptionButton" type="button" value="Add Option Item" onclick="addOptionItem(true)"/>
5. Save the project and open it in a Studio for iPhone-compatible browser.
6. Click the Add Option Item button and observe that a C1NavigationListOptionItem is added to your page without postback.
Creating a C1NavigationListSliderItem
Item
To create a C1NavigationListSliderItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the slider item, set its properties, and add it to the navigation list
function addSliderItem(sliderValue){
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListSliderItem();
navList.get_items().add(newItem);
newItem.set_value(sliderValue);
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddSliderButton" type="button" value="Add Option Item" onclick="addSliderItem()"/>
5. Save the project and open it in a Studio for iPhone-compatible browser.
6. Click the Add Slider Item button and observe that a C1NavigationListSliderItem is added to your page without postback.
Creating a C1NavigationListSwitchItem
Item
A To create a C1NavigationListSwitchItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the switch item, set its properties, and add it to the navigation list
function addSwitchItem(isChecked){
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListSwitchItem();
newItem.set_checked(isChecked);
newItem.set_text("Switch");
navList.get_items().add(newItem);
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddSwitchButton" type="button" value="Add Option Item" onclick="addSwitchItem(true)"/>
5. Save the project and open it in a Studio for iPhone-compatible browser.
6. Click the Add Switch Item button and observe that a C1NavigationListSwitchItem is added to your page without postback.
Creating a C1NavigationListTextItem
Item
To create a C1NavigationListTextItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the text item, set its properties, and add it to the navigation list
function addTextItem(){
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListTextItem();
newItem.set_text("Text Item can contain long html text inside that will automatically wrap to next lines. Text items cannot be highlighted.");
navList.get_items().add(newItem);
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddTextButton" type="button" value="Add Text Item" onclick="addTextItem()"/>
5. Save the project and open it in a Studio for iPhone-compatible browser.
6. Click the Add Text Item button and observe that a C1NavigationListTextItem is added to your page without postback.
Creating a C1NavigationListInputItem
Item
To create a C1NavigationListInputItem and add it to the C1NavigationList control using client-side script, complete the following steps:
1. Add a C1NavigationList control to your project.
2. Click the Source tab to enter Source view.
3. Enter the following JavaScript after the <form> tag:
<script language="javascript" type="text/javascript">
//Find the navigation list client-side ID
function getNavList() {
return Sys.Application.findComponent("<%=C1NavigationList1.ClientID%>");
}
//Create the text item, set its properties, and add it to the navigation list
function addInputItem(){
var navList = getNavList();
var newItem = new C1.Web.iPhone.C1NavigationList.C1NavigationListInputItem();
newItem.set_text("Name:");
newItem.set_value("Gaius Baltar");
navList.get_items().add(newItem);
}
</script>
4. Add the following markup beneath the </div> tag to add a button to the page:
<input id="AddInputButton" type="button" value="Add Input Item" onclick="addInputItem()"/>
5. Save the project and open it in a Studio for iPhone-compatible browser.
6. Click the Add Text Item button and observe that a C1NavigationListTextItem is added to your page without postback.