Currently, I have implemented DropKick CSS/JQuery to customize the appearance of my asp:DropDownList:
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
<asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
<asp:ListItem Text="BY LOCATION" Value="1" />
<asp:ListItem Text="BY SPECIALTY" Value="2" />
</asp:DropDownList>
<br /><br />
<asp:DropDownList ClientIDMode="Static" ID="ddlDrillDown" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlMain" />
</Triggers>
</asp:UpdatePanel>
Upon initial page load, the layout appears as shown below:
I have configured the UpdatePanel, Trigger, and ScriptManager control to ensure that changes made in ddlMain are reflected in ddlDrillDown without requiring a page reload. After overcoming some challenges, I noticed that when selecting a different option in ddlMain, the DropKick style vanishes:
The developer console displays the following on page load:
<div id="dk_container_ddlMain" class="dk_container dk_theme_default default" aria-hidden="true" tabindex="0" style="margin: 0 auto; display: inline-block;">
<a class="dk_toggle dk_label" style="padding: 10px; color: rgb(43, 71, 125); width: 365px;">
BY PHYSICIAN
</a>
<div class="dk_options">
<ul class="dk_options_inner" aria-hidden="true" role="main">
<li>
<a data-dk-dropdown-value="0" style="padding: 20px; color: #2B477D">
BY PHYSICIAN
</a>
</li>
<li>
<a data-dk-dropdown-value="1" style="padding: 20px; color: #2B477D">
BY LOCATION
</a>
</li>
<li>
<a data-dk-dropdown-value="2" style="padding: 20px; color: #2B477D">
BY SPECIALTY
</a>
</li>
</ul>
</div>
<select id="ddlMain" class="default" style="width: 365px;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$FeaturedContent$ddlMain\',\'\')', 0)" name="ctl00$FeaturedContent$ddlMain">
<option value="0" selected="selected">
BY PHYSICIAN
</option>
<option value="1">
BY LOCATION
</option>
<option value="2">
BY SPECIALTY
</option>
</select>
</div>
Each time a different option is selected, the developer console presents this output:
<select id="ddlMain" class="default" style="width: 365px;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$FeaturedContent$ddlMain\',\'\')', 0)" name="ctl00$FeaturedContent$ddlMain">
<option value="0">
BY PHYSICIAN
</option>
<option value="1" selected="selected">
BY LOCATION
</option>
<option value="2">
BY SPECIALTY
</option>
</select>
This behavior suggests that the originally assigned styling is lost upon selection of a new option.
Is there any way to preserve the styling without refreshing the page?
It seems that the style remains intact if the page refreshes after each selection.
The provided script styles the dropdown on load:
<script type="text/javascript">
$(document).ready(function(){
$('.default').dropkick();
});
</script>