[Solved] Select List within Panelbar Item

[Anthony]

I am trying to add a select list into the Panel Bar Item text. The select list will be used to filter the contents of the Panel Bar. Whenever I click the select list it acts as the selector for the anchor within the t-link. Is there a way to separate this action? I've pasted the HTML from the results of what I have so far. I need to find a way to get the select list outside of the anchor of the Panel Bar.

<ul id="StudentAssements" class="t-widget t-panelbar t-reset AnalyzeFolderPanelBar" style="background: none">
<li class="t-item t-state-default">
<a class="t-link t-header" href="/MyPortal/StudentAssessmentFolderView?CourseInstanceId=a3c29623-205c-4131-9ad6-279db7e915f3">
<table style="width:100%">
<tbody>
<tr>
<td style="width:50%">Pre-Calculus</td>
<td style="width:50%;text-align:right">
<select id="AssessmentStatus" name="AssessmentStatus">
<option value="">All</option>
<option value="0">Graded</option>
<option value="1">Completed</option>
<option value="2">Due</option>
<option value="3">PastDue</option>
</select>
</td>
</tr>
</tbody>
</table>
<span class="t-icon t-arrow-down t-panelbar-expand"></span>
</a>
<div id="StudentAssements-1" class="t-content" style="display:none"></div>
</li>
<li class="t-item t-state-default">
<a class="t-link t-header" href="/MyPortal/StudentAssessmentFolderView?CourseInstanceId=b42b0928-864b-4474-9558-40df7d14dbef">
<table style="width:100%">
<tbody>
<tr>
<td style="width:50%">Algebra I</td>
<td style="width:50%;text-align:right">
<select id="AssessmentStatus" name="AssessmentStatus">
<option value="">All</option>
<option value="0">Graded</option>
<option value="1">Completed</option>
<option value="2">Due</option>
<option value="3">PastDue</option>
</select>
</td>
</tr>
</tbody>
</table>
<span class="t-icon t-arrow-down t-panelbar-expand"></span>
</a>
<div id="StudentAssements-2" class="t-content" style="display:none"></div>
</li>
</ul>

[Dimo]

Hello Anthony,

You can prevent the event bubbling (propagation) of the <select> element's click event, for example:

<% Html.Telerik().ScriptRegistrar()
          .OnDocumentReady("$('#AssessmentStatus').click(function(e){e.stopPropagation();});"); %>

By the way, placing a <table> inside an <a> element results in invalid HTML markup. In general, using tables for layout is considered old-fashioned nowadays.

Greetings,
Dimo
the Telerik team