This is a migrated thread and some comments may be shown as answers.

Binding data to column filter dropdownlist

2 Answers 73 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 28 Sep 2016, 09:18 PM

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

2 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 30 Sep 2016, 03:19 PM

Hello Tom,

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

Regards,
Boyan Dimitrov
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Tom
Top achievements
Rank 1
answered on 04 Oct 2016, 02:38 PM

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

Tags
Grid
Asked by
Tom
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Tom
Top achievements
Rank 1
Share this question
or