Step 3 of 5: Adding Content to the C1NavPanel Control
In this topic you will add HTML that will be used as content for one of the C1NavPanelPanes. Additionally you will add images to be used for the buttons in the navigation pane.
1. Click the new pane's header and enter Tasks. The Tasks box will be defined by an .htm file, which you will need to add to the project.
2. Next we will create an .htm file to add to the Task pane's content.
a. In the Visual Studio Solution Explorer, right-click on the name of your project and select Add New Item. The Add New Item dialog box appears.
b. Select HTML Page, name the file Tasks.htm in the Name text box, and click Add.
c. Click the Source button on your form to switch to Source view, and add the following markup in the Tasks.htm file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
#TextArea1
{
height: 111px;
width: 368px;
}
</style>
</head>
<body>
<table style="width: 52%; height: 197px;">
<tr>
<td>
</td>
<td style="text-align: center">
<b>TASKS</b></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<textarea id="TextArea1" name="S1">Task text</textarea></td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
<hr />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
3. Let's also add some graphics for the buttons in the navigation pane.
a. Create or use two existing graphic files and place them in your project folder.
b. In the Visual Studio Solution Explorer, right-click the project name and select Add Existing Item.
c. Select the .gifs and click Add. These files will be used later in this quick start.
4. Double-click the Default.aspx page in the Solution Explorer to open it again.
5. With the Tasks pane selected, click the C1NavPanel smart tag to access the C1NavPanel Tasks menu again.
6. Under Selected pane properties, enter Tasks for the ButtonName property.
|