Question

I am implementing two dropdown lists where “Fund” dropdown list is populated by the selection of “Close Date” dropdown list (cascading). The problem is that after the Ajax update the “Fund” dropdown list displays a blank value instead of the first selection. I verified that the returned selections have the first item marked as “selected”. I have also tried a couple things to default the selected index of the dropdown after update. So how do I get the dropdown to default to a particular selection afetr it’s been updated. Lised below are code fragments for the definition of the dropdown lists and the javascript function that runs when “Close Date” is selected.

using Telerik 2011.1.315 and JQuery 1.5.1

<script type="text/javascript">
    fundListUrl = '<%= Url.Action("GetFundList","Admin") %>'
    function GetFundList(e)
    {
        var fundDropDown = $('#FundId');
        var fundDropDownData = fundDropDown.data('tDropDownList');
        fundDropDownData.loader.showBusy();
        $.get(fundListUrl, { dateId: e.value }, function (data) {
            fundDropDownData.dataBind(data);
            fundDropDownData.loader.hideBusy();
            fundDropDown.attr('selectedIndex', 0); // Not Working
        });
    }
</script>

…

<table>
    <tr>
    <td class="editlabel">Close Date:</td>
    <td>
        <%= Html.Telerik().DropDownListFor(o => o.ReportingPeriodDateId)
            .BindTo((SelectList)ViewData["closeDateList"])
            .ClientEvents(events => events.OnChange("GetFundList"))
        %>
    </td>
    </tr>
    <tr>
    <td class="editlabel">Fund:</td>
    <td>
        <%= Html.Telerik().DropDownListFor(o=>o.FundId)
            .BindTo((SelectList)ViewData["fundList"])
            .HtmlAttributes(new { style = "width: 40em;" })
        %>
    </td>
    </tr>
</table>

Answer 1

You should be able to select a combo item either by its index or its value (if you defined values for the combobox items beforehand) as follows:

<script type="text/javascript">
    fundListUrl = '<%= Url.Action("GetFundList","Admin") %>'
    function GetFundList(e)
    {
        var fundDropDown = $('#FundId');
        var fundDropDownData = fundDropDown.data('tDropDownList');
        fundDropDownData.loader.showBusy();
        $.get(fundListUrl, { dateId: e.value }, function (data) {
            fundDropDownData.dataBind(data);
            fundDropDownData.loader.hideBusy();
            fundDropDown.select(0); // select first combo item, or use fundDropDown.value('0') in case the first combo item has value set to 0
        });
    }
</script>