Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > Select List within Panelbar Item

• Anthony

  Posted on Jan 4, 2012 (permalink)

  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>

  Reply

• Dimo Dimo

  Posted on Jan 4, 2012 (permalink)

  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

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > Select List within Panelbar Item