将数据绑定到kendo下拉列表

时间:2016-09-28 21:24:02

标签: javascript html ajax kendo-ui kendo-grid

我有一个带有列的kendo网格,该列具有自定义过滤器模板,该模板是下拉列表。我无法将数据填充到下拉列表中。

我想要的是让选项成为该列中所有记录的所有唯一值。

附带问题:是否有更简单的方法使用列的唯一值填充下拉列表?由于这是下拉列表中最符合逻辑的内容,我希望可能有一些内置方式?

我要做的是让它调用一个返回JSON指定选项的服务。

下面我有3种方法,我试图根据谷歌搜索对数据列字段进行编码,这导致了这个论坛上非常古老的主题,这就是为什么我希望有一个简单的方法。前两个不起作用,但第三个(硬编码)确实有效。

1)此调用命中服务器并返回JSON但不填充下拉列表。

 {
            "field": "location_name",
            "title": "Location",
            "filterable": {
                cell: {
                    template: function (args) {
                        args.element.kendoDropDownList({
                        dataTextField: "optionText",
                        dataValueField: "optionValue",
                        valuePrimitive: true,
                        dataSource: {
                            transport: {
                                read: 
                                    function(options) {
                                        $.ajax({
                                            type: "GET",
                                            url:  "/Patrol/Report.aspx/GetOptions",
                                            data: "d",
                                            contentType: "application/json; charset=utf-8",
                                            dataType: "json",
                                            success: function (msg) {
                                                alert(msg.d);
                                                return msg; //tried with and without the return
                                            }
                                        });
                                    }
                            }
                        }
                    });
                },
                showOperators: false
            }
        }

2)此呼叫根本没有到达服务器

        {
            "field": "location_name",
            "title": "Location",
            "filterable": {
                cell: {
                    template: function (args) {
                        args.element.kendoDropDownList({
                        dataTextField: "optionText",
                        dataValueField: "optionValue",
                        valuePrimitive: true,
                        dataSource: {
                            transport: {
                                read: {
                                    dataType: "jsonp",
                                    url: "/Patrol/Report.aspx/GetOptions",
                                }
                            }
                        }
                    });
                },
                showOperators: false
            }
        }

3)硬编码数据源数据:这可以正常工作

    {
        "field": "location_name",
        "title": "Location",
        "filterable": {
            cell: {
                template: function (args) {
                    args.element.kendoDropDownList({
                    dataTextField: "optionText",
                    dataValueField: "optionValue",
                    valuePrimitive: true,
                    dataSource: 
                        [{"optionText": "HP","optionValue": "HP"}, {"optionText": "Loc2","optionValue": "ID2"}]
                });
            },
            showOperators: false
        }
    }

1 个答案:

答案 0 :(得分:1)

方案1不起作用,因为您需要在options.success(...your data...)的成功回调中调用$.ajax()

http://docs.telerik.com/kendo-ui/framework/datasource/crud#read-loc