How to use Dropdown Extender to trigger OnSelectedIndexChanged event

Question

I am trying to construct a Dropdown list using the AjaxToolKit's dropdownlistextender. I have the following markup:

<asp:Label ID="ddTest" runat="server" Text="Transactions" Width="300px" BorderColor="#C0C0C0" CssClass="selecter"/>
    <ajaxToolkit:DropDownExtender runat="server" ID="ddeSections"
              TargetControlID="ddTest" DropDownControlID="panelItems" HighlightBackColor="Silver" 
              DropArrowBackColor="white" HighlightBorderColor="Silver"/>

and the following for the "list" items:

   <table runat="server" id="ctlOptions" class="options" cellspacing="2" cellpadding="2" border="1">
     <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">Transactions</td></tr>
     <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">The second option</td></tr>
     <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">The third option</td></tr>
     <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">The fourth option</td></tr>
     <tr><td class="item" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" onclick="clickIt(this)">The fifth option</td></tr>
   </table>

my JavaScript looks like this:

function mouseOver(obj) {
    if (obj) obj.className = 'itemOver';
}


function mouseOut(obj) {
    if (obj) obj.className = 'item';
}

where item and itemOver are appropriately styled CSS classes. The problem is that I want my onclick event to trigger a SelectedIndexChanged-type event on the server. I have tried with this function:

function clickIt(obj) {
    var ddTest = document.getElementById("ctl00_ContentPlaceHolder1_ddTest");
    var selVal = '';
    if (ddTest) {
        selVal = obj.firstChild.nodeValue;
        ddTest.firstChild.nodeValue = selVal;
        __doPostBack('<%=ddSections.ClientID %>', '');
    }
}

ddSections is an asp:Dropdown whose OnSelectedIndexChanged event I am attempting to fire.

This triggers a page-level postback, but not the ddSections_SelectedIndexChanged server-side method that I want to trigger. The ddSections, incidentally, will be hidden.

please can you offer some advice. I have spent three days trying to figure this out and have come up empty handed. Feel free to re-format for readability. Thanks in advance.

Answer 1

It's been two weeks since I asked this question, and I am assuming that nobody will answer, so for the record, I will post how I actually solved this problem.

1. I changed from using an html Table to using an Unordered list. (an option that I had previously ignored because of my perceived difficulty in styling the <UL>.

2. I added two hidden fields, one to trigger whether or not the event had fired, and one to store the selected value.

<asp:HiddenField runat="server" ID="hidSelectionChanged" Value="false"/> <asp:HiddenField runat="server" ID="hidSelectionValue" Value=""/>

I created the "change" event as follows:

function onchange(param) {
    var chg = document.getElementById('<%=hidSelectionChanged.ClientID%>');
    var val = document.getElementById('<%=hidSelectionValue.ClientID%>');

    if (chg) {
        chg.value = 'true';
    }
    if (val) {
        val.value = param;
    }

    __doPostBack('pnlResults', '');
}

Then in each LI of the UL I had this code:

<li class="ddl_li"><a href="javascript:onchange('Summary_1')">Summary</a></li>

The result was a full page post-back, but in the Page_Load event of the Page, I could now check hidSelectionChanged.Value to see if the PostBack was triggered by my dropdown, and I could check hidSelectionValue.Value to get the selected value.

In the end, all worked out well.