Binding data to column filter dropdownlist

[Tom]

I have a grid with a column that has a filter template which is a dropdownlist. 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.

 

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. 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.

           

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

2) This call doesn't hit the server at all

            {
                "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

            {
                "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
                }
            }

[Boyan Dimitrov]

Hello Tom,

Could you please provide the exact response which is returned from the server with first approach? 

Regards,
Boyan Dimitrov
Telerik by Progress

 

 

[Tom]

Apologies for the formatting it won't let me edit the question.

The service returned:

[{"optionText":"Loc1", "optionValue":"ID1"}]

 

I've since found out the issue, it was that I did not call options.success

function(options) {

    var data = ... //JSON dropdownlist item data

    options.success(data); //this solved my problem

}

 

Thanks