简体   繁体   English

将数据绑定到剑道下拉列表

[英]Binding data to kendo dropdownlist

I have a kendo grid with a column that has a custom filter template which is a dropdownlist. 我有一个Kendo网格,其中的一列具有一个自定义过滤器模板,该模板是一个下拉列表。 I am having trouble populating the data into the dropdownlist. 我无法将数据填充到下拉列表中。

What I want is to have the options be all of the unique values of all the records in that column. 我想要的是使该选项成为该列中所有记录的所有唯一值。

Side question: is there any easier way to populate the dropdownlist with the unique values of the columns? 附带的问题:有没有更简单的方法用列的唯一值填充下拉列表? As this is the most logical contents to place in the dropdown, I would hope there may be some built in way? 由于这是下拉菜单中最合乎逻辑的内容,我希望可能会有一些内置的方式?

What I'm trying to do is have it call a service that returns JSON specifying the options. 我正在尝试做的是让它调用返回JSON并指定选项的服务。

Below I have the 3 ways I've tried to code the data-column field based on google searches that led to very old topics on this forum, which is why I hope there is a simple way. 下面,我有3种尝试根据Google搜索对数据列字段进行编码的方法,这导致了该论坛上的话题非常古老,这就是为什么我希望有一种简单的方法。 The first 2 don't work but the third (hard coding it) does work. 前两个无效,但第三个(硬编码)有效。

1) This call hits the server and returns JSON but does not populate the dropdown. 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) This call doesn't hit the server at all 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) Hard coding the datasource data: This works correctly 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
        }
    }

Scenario 1 does not work, because you need to call options.success(...your data...) in the success callback of $.ajax() : 方案1不起作用,因为您需要在$.ajax()的成功回调中调用options.success(...your data...) $.ajax()

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM