将客户端事件添加到telerik下拉列表使其成为静态

时间:2012-10-30 16:23:48

标签: javascript jquery html telerik telerik-mvc

我正在尝试将客户端事件添加到telerik下拉列表中,但这样做会使其成为静态。通过静态我的意思是它不再表现为下拉列表,它在我点击时没有响应,因此无法查看/选择值。但是只要我将下拉列表更改为组合框,它就可以正常工作。它让我点击并查看/选择值。

为什么会这样?为什么我可以将客户端事件添加到telerik组合框但不添加到telerik下拉列表中?

以下是我填充组合框的方法:

        <%= 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);
};

以下是我填充下拉列表的方法:

        <%= 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);
};

提前致谢。

2 个答案:

答案 0 :(得分:1)

在您的情况下,当您不使用Ajax或WebService客户端数据绑定时,您不应该配置OnDataBinding事件处理程序。您需要改为配置OnLoad:

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

处理程序:

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);
}

答案 1 :(得分:0)

你在.dataBind()处理程序中调用OnDataBinding,这只会再次触发OnDataBinding事件,并再次...

考虑在OnLoad事件或

中进行客户端数据绑定