javascript - 尝试在页面加载时填充 telerik ddl 时出错

Question

如何在页面加载时填充 telerik 下拉列表？

当我尝试填充下拉列表时出现以下错误(在下面强调的行):

Error: 'data(...)' is null or not an object

这是我尝试填充 telerik ddl 的方法:

$(function(){
var values = [];
for (var i = 1; i < 10; i++) { 

values.push({ Text: i, Value: i });
}
****$("#MyDdl").data("tDropDownList").dataBind(values);****
});

也这样试过:

 $(function(){
    onDataBinding();
    });

function onDataBinding(e) {
        var MyDdl = $('#MyDdl').data('tDropDownList');
        var values = [];
        for (var i = 1; i < 10; i++) {  
    values.push({ Text: i, Value: i });
    }
      ****MyDdl.dataBind(values);****
    };

但在上面强调的行中出现以下未定义错误:

Error: 'undefined' is null or not an object

注意:添加按钮并在按钮单击事件上加载 ddl 会填充 telerik 下拉列表。这样做非常好:

    $(function(){
   var values = [];
        for (var i = 1; i < 10; i++) {             
        values.push({ Text: i, Value: i });
        }
        $("#MyDdl").data("tDropDownList").dataBind(values);            
    });

非常感谢任何帮助。

Answer 1

您需要在 DropDownList 的 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' }
    ]);
}

function ddl_onChange(e) {

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