Step 2 of 4: Adding Content | ComponentOne SuperPanel for ASP.NET WebForms

Step 2 of 4: Adding Content

In This Topic

Adding content to the C1SuperPanel control is as simple as clicking in the body of the control and typing text or adding controls. The following steps assume you've completed the Step 1 of 4: Creating an Application topic.

Complete the following steps to add content to C1SuperPanel:

In Source view add the following markup within the <div> tag that appears right after the </asp:ScriptManager> tag to create the elements class to get the style for the elements that will appear within the C1SuperPanel control.

	Copy Code
<div class="elements"> <div style="padding: 25px;">

Add the following tags within the <cc1:C1Superpanel> tag to add a button and textboxes to set the Height and Width properties.

	Copy Code
Width="300px" Height="300px"

In Source view add the <ContentTemplate></ContentTemplate> tags within the <cc1:C1SuperPanel></cc1:C1SuperPanel> tags to create a content template for C1SuperPanel. Within the tags create a class to define the style of the elements within the content template. Your source code should appear like the following:

	Copy Code
<ContentTemplate> <ul class="elements" style="height: 1011px; width: 1820px;"> <li> <p>0</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>1</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>2</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>3</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>4 </p> <a href="#" title="" class="back">go back</a> </li> <li> <p>5</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>6</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>7</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>8</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>9</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>10</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>11</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>12</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>13</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>14</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>15</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>16</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>17</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>18</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>19</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>20</p> <a href="#" title="" class="back">go back</a> </li> <li id="t1"> <p>21</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>22</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>23</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>24</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>25</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>26</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>27</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>28</p> <a href="#" title="" class="back">go back</a> </li> <li> <p>29</p> <a href="#" title="" class="back">go back</a> </li> </ul> </ContentTemplate> </cc1:C1SuperPanel> </div> </div>

Copy Code

<ContentTemplate>     
<ul class="elements" style="height: 1011px; width: 1820px;">
<li>
<p>0</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>1</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>2</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>3</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>4
</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>5</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>6</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>7</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>8</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>9</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>10</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>11</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>12</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>13</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>14</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>15</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>16</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>17</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>18</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>19</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>20</p>
<a href="#" title="" class="back">go back</a>
</li>
<li id="t1">
<p>21</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>22</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>23</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>24</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>25</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>26</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>27</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>28</p>
<a href="#" title="" class="back">go back</a>
</li>
<li>
<p>29</p>
<a href="#" title="" class="back">go back</a>
</li>    
</ul>  
</ContentTemplate>
</cc1:C1SuperPanel>
</div>
</div>

Add the following style markup between the <head> and </head> tags at the top of the document:

	Copy Code
<style type="text/css"> .elements ul { padding: 0px; margin: 0px; } .elements ul li { background-color:#DDDDDD; border:1px solid black; font-weight:bolder; height:100px; padding:50px; position:relative; text-align:center; width:200px; } .elements li { float:left; list-style: none none outside; } </style>

Copy Code

<style type="text/css">
        .elements ul
        {
                padding: 0px;
                margin: 0px;
        }
        .elements ul li {
        background-color:#DDDDDD;
        border:1px solid black;
        font-weight:bolder;                             
        height:100px;
        padding:50px;
        position:relative;
        text-align:center;
        width:200px;
        }
                                
        .elements li {
        float:left;
        list-style: none none outside;
        }
        </style>

In design view notice that the elements within C1SuperPanel's content template are styled.

Run your application and observe:

In this step you added content to C1SuperPanel control. In the next step you'll customize the scroll settings for C1SuperPanel.