Currently my application is running using **ASP.net WebForms** and **Telerik**. Right now, I am working in administration dashboard. Inside dashboard there is a left side menu which can be expanded or can be collapsed.Let me show you its code,
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="index.html">class="menu-icon fa fa-dashboard" href="#" data-toggle="dropdown"__^Components
</a>
<ul class="sub-menu children dropdown-menu">
<li>
^__i class="fa fa-puzzle-piece"__^</i__^
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
^__i class="fa fa-id-badge"__^
<a href="ui-badges.html">Badges</a>
</li>
<li>
^__i class="fa fa-bars"__^
<a href="ui-tabs.html">Tabs</a>
</li>
<li>
^__i class="fa fa-share-square-o"__^
<a href="ui-social-buttons.html">Social Buttons</a>
</li>
<li>
^__i class="fa fa-id-card-o"__^
<a href="ui-cards.html">Cards</a>
</li>
<li>
^__i class="fa fa-exclamation-triangle"__^
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
^__i class="fa fa-spinner"__^
<a href="ui-progressbar.html">Progress Bars</a>
</li>
<li>
^__i class="fa fa-fire"__^
<a href="ui-modals.html">Modals</a>
</li>
<li>^__i class="fa fa-book"__^<a href="ui-switches.html">Switches</a></li>
<li>^__i class="fa fa-th"__^<a href="ui-grids.html">Grids</a></li>
<li>
^__i class="fa fa-file-word-o"__^
<a href="ui-typgraphy.html">Typography</a>
</li>
</ul>
</li>
<li class="menu-item-has-children active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
^__i class="menu-icon fa fa-table"__^Tables
</a>
<ul class="sub-menu children dropdown-menu">
<li>^__i class="fa fa-table"__^<a href="tables-basic.html">Basic Table</a></li>
<li>^__i class="fa fa-table"__^<a href="tables-data.html">Data Table</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
^__i class="menu-icon fa fa-th"__^Forms
</a>
<ul class="sub-menu children dropdown-menu">
<li>^__i class="menu-icon fa fa-th"__^<a href="forms-basic.html">Basic Form</a></li>
<li>^__i class="menu-icon fa fa-th"__^<a href="forms-advanced.html">Advanced Form</a></li>
</ul>
</li>
<h3 class="menu-title">Icons</h3>
<!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">^__i class="menu-icon fa fa-tasks"__^Icons</a>
<ul class="sub-menu children dropdown-menu">
<li>^__i class="menu-icon fa fa-fort-awesome"__^<a href="font-fontawesome.html">Font Awesome</a></li>
<li>^__i class="menu-icon ti-themify-logo"__^<a href="font-themify.html">Themefy Icons</a></li>
</ul>
</li>
<li>
<a href="widgets.html">^__i class="menu-icon ti-email"__^Widgets </a>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">^__i class="menu-icon fa fa-bar-chart"__^Charts</a>
<ul class="sub-menu children dropdown-menu">
<li>^__i class="menu-icon fa fa-line-chart"__^<a href="charts-chartjs.html">Chart JS</a></li>
<li>^__i class="menu-icon fa fa-area-chart"__^<a href="charts-flot.html">Flot Chart</a></li>
<li>^__i class="menu-icon fa fa-pie-chart"__^<a href="charts-peity.html">Peity Chart</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">^__i class="menu-icon fa fa-area-chart"__^Maps</a>
<ul class="sub-menu children dropdown-menu">
<li>^__i class="menu-icon fa fa-map-o"__^<a href="maps-gmap.html">Google Maps</a></li>
<li>^__i class="menu-icon fa fa-street-view"__^<a href="maps-vector.html">Vector Maps</a></li>
</ul>
</li>
<h3 class="menu-title">Extras</h3>
<!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">^__i class="menu-icon fa fa-glass">Pages</a>
<ul class="sub-menu children dropdown-menu">
<li>^__i class="menu-icon fa fa-sign-in"><a href="page-login.html">Login</a></li>
<li>^__i class="menu-icon fa fa-sign-in"><a href="page-register.html">Register</a></li>
<li>^__i class="menu-icon fa fa-paper-plane"><a href="pages-forget.html">Forget Pass</a></li>
</ul>
</li>
</ul>
<%--<telerik:RadPanelBar ID="rpb_menu" runat="server" DataValueField="view_index" DataTextField="description" ExpandMode="MultipleExpandedItems" DataFieldID="activity_id"
DataFieldParentID="parent_id" AllowCollapseAllItems="false" Height="100%" Width="100%" EnableEmbeddedSkins="true" Skin="Glow" BorderStyle="None" BackColor="#272C33" OnItemDataBound="rpb_menu_ItemDataBound">
</telerik:RadPanelBar>--%>
</div>
So as you could see there is some hard coded
<ul>
and
<li>
s out there and I need to replace it's content and those content will be populated from database.
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th title="Field #1">activity_id</th>
<th title="Field #2">parent_id</th>
<th title="Field #3">description</th>
</tr>
</thead>
<tbody>
<tr>
<td>29</td>
<td>34</td>
<td>Topic Management</td>
</tr>
<tr>
<td>30</td>
<td>34</td>
<td>Subject Management</td>
</tr>
<tr>
<td>31</td>
<td>34</td>
<td>Syllabus Management</td>
</tr>
<tr>
<td>34</td>
<td>NULL</td>
<td>LMS</td>
</tr>
<tr>
<td>35</td>
<td>34</td>
<td>Question Management</td>
</tr>
<tr>
<td>36</td>
<td>34</td>
<td>Online Test Management</td>
</tr>
<tr>
<td>37</td>
<td>34</td>
<td>Give Online Test</td>
</tr>
</tbody>
</table>
Please run snippet to view content which will be shown in place of hard coded content as shown below,
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">class="menu-icon fa fa-laptop"><a href="ui-buttons.html">Topic Management (from database)</a></li>
<li>^__i class="fa fa-id-badge"><a href="ui-badges.html">Subject Management(From database)</a></li>
</ul>
</li>
here comes my requirement.
a. I want to use exitsing html as template and hard-coded content which are inside that template will get replaced from database.I wanna know If there is a suitable control which will fulfill my requirement?
If not then can I get the same using loop?(If nothing fits then this only option)
What I have tried:
I need to know any suitable control for this
Submit an article or tip