将项目添加到 kendoDropDownList答案

【问题标题】：Add Item To kendoDropDownList将项目添加到 kendoDropDownList
【发布时间】：2015-07-23 21:50:33
【问题描述】：

我正在尝试向 kendoDropDownList 添加一个项目，它似乎添加了选项但没有设置值和文本。检查选择它只是添加了一个新选项

 <option></option>

这是我正在使用的

 $("#nameList").data("kendoDropDownList")
     .dataSource.add({ "text": "Joe", "value": "Joe" });

更新

这是我的数据源模型和建议的requestEnd，但值似乎搞砸了

datasource_people = new kendo.data.DataSource({
        type: "json",
        serverFiltering: true,
        transport: {
            read: {
                dataType: 'json',
                type: 'GET',
                url: '/restful/people/'
            }
        },
        filter: {
            field: "status",
            operator: "eq",
            value: 1
        },
        schema: {
            data: function(response) {
                return response.data.plaintiffs;
            },
            model: {
                id: "person_id",
                fields: {
                    person_id: {type: "number"},
                    name: { type: "string"}
                }
            },
            errors: "error",
            total: function(response) {
                return response.data.total;
            }
        }
    });

后来

$("#people_list").kendoDropDownList({
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: {
                        datasource_people,
                        requestEnd: function (e) {
                            e.response.push({text: "John", value: "John"});
                        }
                    }
                });

【问题讨论】：

标签： javascript jquery kendo-ui kendo-dropdown

【解决方案1】：

经过一番搜索，它非常简单，但这正是我所需要的。

$("#people_list").getKendoDropDownList().dataSource.insert({
    person_id: "John",
    name: "John"
})

【讨论】：

【解决方案2】：

您可以在数据源加载后使用requestEnd向数据源添加新项目。

requestEnd: function (e) {
  e.response.push({text: "Joe", value: "Joe"});
}

我已经更新了其他用户的小提琴以向您展示它的工作原理。 jsFiddle example

【讨论】：

这似乎有效，而且是我需要的更长的行，但由于某种原因，所有值和文本仅在选择时显示为“未定义”。奇怪。
投赞成票或标记为已回答会很好，因为它可以解决您的问题。您可以发布另一个带有“未定义”问题的问题。
顺便说一句，你的 dataTextField 和 dataValueField 字段是错误的。

【解决方案3】：

不确定您到底想要什么，但您可以从数据源加载选项，然后在dataBound 触发后将更多选项附加到列表中。

$("#nameList").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        transport: { 
            read: { 
                dataType: 'json', 
                type: 'GET', 
                url: '/restful/companies' 
            }
        } 
    },
    dataBound:onDataBound
});

<script>
    function onDataBound(e) {
        e.sender.dataSource.add({ "text": "Joe", "value": "Joe" });
    }
</script>

【讨论】：

我们正在使用 data- 属性来初始化下拉菜单。我找不到关于 dataBound 的 data- 属性的任何信息
我也试过了，但似乎不起作用：function onDataBound(e) { e.sender.dataSource.add({ text: "John", value: "John" }); } var dropdownlist = $("#nameList").data("kendoDropDownList"); dropdownlist.bind("dataBound", onDataBound);

【解决方案4】：

使用这个：

<input id="nameList" value="1" />
var data = [
    { text: "Joe", value: "Joe" },
    { text: "Joe", value: "Joe"  },
    { text: "Joe", value: "Joe"  }
];

// create DropDownList from input HTML element
$("#nameList").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0,         
});

DEMO

【讨论】：

谢谢，但我应该提到我已经在列表中加载了选项。此方法将清除我当前的所有选项，而不是附加到列表中。
如何将原始数据源与新数据一起调用？传输：{读取：{数据类型：'json'，类型：'GET'，url：'/restful/companies'}}
您可以将数据推入新数据，然后再次运行脚本