Question

I am trying to add client events to a telerik dropdownlist, but doing so makes it static. By static I mean it doesnt behave as a dropdown list anymore, Its doesnt respond when I click and hence cant view/select values. But as soon as I change the dropdown list to a combobox it works perfectly fine. It lets me click and view/select values.

Why is this happening? why can I add client events to a telerik combobox but not to a telerik dropdown list?

Here is how I populate Combo Box:

        <%= Html.Telerik().ComboBox().Name("ComboBox")
            .HtmlAttributes(new { @id = "ComboBox", @style = "width:104px;" })
            .ClientEvents(events =>
        {
            events.OnDataBinding("ComboBox_onDataBinding");
        })%>  

function ComboBox_onDataBinding(e) {
    var comboBox = $('#ComboBox').data('tComboBox');
                comboBox.dataBind([
                    { Text: "Product 1", Value: "1" },
                    { Text: "Product 2", Value: "2", Selected: true },
                    { Text: "Product 3", Value: "3" },
                    { Text: "Product 4", Value: "4" },
                    { Text: "Product 5", Value: "5" }
                ], true);
};

Here is how I populate drop-down list:

        <%= Html.Telerik().DropDownList().Name("DropDownList")
            .HtmlAttributes(new { @id = "DropDownList", @style = "width:104px;" })
            .ClientEvents(events =>
        {
            events.OnDataBinding("DropDownList_onDataBinding");
        })%>  

function DropDownList_onDataBinding(e) {
    var dropDownList = $('#DropDownList').data('tDropDownList');
                dropDownList.dataBind([
                    { Text: "Product 1", Value: "1" },
                    { Text: "Product 2", Value: "2", Selected: true },
                    { Text: "Product 3", Value: "3" },
                    { Text: "Product 4", Value: "4" },
                    { Text: "Product 5", Value: "5" }
                ], true);
};

Thanks in advance.

Answer 1

In your case, when you don’t use Ajax or WebService client side databinding, you shouldn’t configure OnDataBinding event handler. You need to configure OnLoad instead:

.ClientEvents(events => events.OnLoad("ddl_onLoad").OnChange("ddl_onChange")

handlers:

function ddl_onLoad(e) {

    var ddl = $(this).data('tDropDownList');

    ddl.dataBind([
        { Text: 'Product 1', Value: '1' },
        { Text: 'Product 2', Value: '2', Selected: true },
        { Text: 'Product 3', Value: '3' },
        { Text: 'Product 4', Value: '4' }
    ], true);
}

function ddl_onChange(e) {

    //var ddl = $(this).data('tDropDownList');
    console.log(e.value);
}