Binding data to column filter dropdownlist

3 posts, 0 answers
  1. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2013

    Posted 28 Sep Link to this post

    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. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 30 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2013

    Posted 04 Oct in reply to Boyan Dimitrov Link to this post

    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

Back to Top