剑道重新绑定下拉列表数据源答案

【问题标题】：Kendo re-bind dropdownlist datasource剑道重新绑定下拉列表数据源
【发布时间】：2016-08-30 19:19:02
【问题描述】：

我有一段 html，其中包含一组相当大的输入控件，这些输入控件是从服务器返回的一组 JSON 数据动态生成的。

HTML 控件是根据 JSON 数据以及与之关联的项目构建的。

下拉列表选择项使用属性绑定：

data-bind='source: sourceObject'
data-text-field='optionText'
data-value-field='optionValue'

这是创建输入选择控件的 javascript：

function CreateSelectList(label, i, name) {
    var element = '<select data-bind=\'source:reportFormData.FormField[' + i + '].Options.Option\' data-value-field=\'optionValue\' data-text-field=\'optionText\' id=\'' + name + '\' name=\'' + name + '\' data-role=\'dropdownlist\'></select>';
    return CreateFormField(label, element);
}

问题：我需要选择性地修改其中一个下拉菜单的数据源。我不知道如何以编程方式更改数据源。

这不起作用：

var ddlData = $("#ddl_location").data("kendoDropDownList");
ddlData.setDataSource(jsonData.Option);

也不是这样：

$("#ddl_location").kendoDropDownList({
    dataTextField: "optionText",
    dataValueField: "optionValue",
    dataSource: jsonData.Option
});

我也尝试过调用这些：

ddlData.trigger("change");
ddlData.refresh();

jsonData.Option 与原始 JSON 元素 Report.FormField[i].Options.Option 的格式相同，例如"Option": [ {"optionText": "All", "optionValue": "0"}, ...
这里的区别在于它是一个新的数据子集，需要替换原来的数据源。

以下是用于最初创建控件的完整 JSON 的摘录：

{
"Report": {
    "report_id": "1",
    "FormField": [{
        "description": "End DateTime Picker",
        "name": "end_date",
        "label": "End Date",
        "FieldType": "datepicker",
        "displayOrder": "2",
        "isRequired": "1",
        "requiredFieldValidationMessage": "End Date is required."
    },
    {
        "description": "Client",
        "name": "ddl_client",
        "label": "Client",
        "FieldType": "dropdownlist",
        "displayOrder": "3",
        "isRequired": "0",
        "Options": {
            "Option": [{
                "optionText": "All",
                "optionValue": "0"
            },
            {
                "optionText": "*Airport Business Center",
                "optionValue": "68955"
            },
            {
                "optionText": "*Cushman & Wakefield",
                "optionValue": "68996"
            },
            {
                "optionText": "*IBMC College ",
                "optionValue": "68804"
            }
            ...
    }

【问题讨论】：

看起来FormField[i].Options 可能并不总是可用。您是否尝试使用多个列表设置多个 DropDownLists？
@SunnyPatel i 指的是输入控制号 i ，它可以是一个下拉列表、日期选择器、文本字段等。它只有一个 .Options 元素如果它是类型dropdownlist 这工作正常，表单生成正常。我需要在表单生成后修改单个下拉列表数据源。这有意义吗？
您是否尝试过将数据包装到 DataSource 对象中以查看它是否有所作为？ $("#ddl_location").data("kendoDropDownList").setDataSource(new kendo.data.DataSource({data: jsonData.Option}))。您也可以通过调用ddlData.trigger("databound");手动触发数据源更新。
new kendo.data.DataSource(jsonData.Option) 与n‌ew kendo.data.DataSource({data: jsonData.Option}) 做同样的事情。
@SunnyPatel 这似乎是正确的方向。它最终改变了下拉列表（它将它清除为空，而不是重新填充它），但是我现在收到来自剑道库文件kendo.all.min.js:11 的错误kendo.all.min.js:11 你知道发生了什么吗现在开始了吗？

标签： javascript jquery asp.net json kendo-ui

【解决方案1】：

在数据源上使用 read()：

var ddlData = $("#ddl_location").data("kendoDropDownList");
ddlData.setDataSource(jsonData.Option);
ddlData.dataSource.read();

【讨论】：