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

Sorting Filter Values

3 Answers 21 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sky
Top achievements
Rank 1
Sky asked on 07 Aug 2020, 05:22 PM

Hello,

I can't seem to find a way to sort my filter values into alpha order when the values are being pulled from JSON. Previously filtername.sort() had worked when I had the JSON data directly on the page but that is not an option with this implementation. 

Live page:

https://www.ccah-alliance.org/Urgent-Visit-Providers.html

 

Code:

  <div id="grid"></div>

            <script>



                $(document).ready(function () {

                    var myDataSource =
                        new kendo.data.DataSource({
                            data: JSON,
                            schema: {
                                model: {
                                    fields: {
                                        "ProviderName": { type: "string" },
                                        "OfficeName": { type: "string" },
                                        "OfficeAddress": { type: "string" },
                                        "OfficeCityStateZip": { type: "string" },
                                        "PrimarySpecialty": { type: "string" },
                                        "ProviderLanguages": { type: "string" },
                                        "Hospitals": { type: "string" }
                                    }
                                }
                            },
                            transport: {
                                read: "/aspnetforms/UrgentVisitProviders.ashx"
                            },
                            pageSize: 15,
                            sort: [
                                { field: "OfficeCityStateZip", dir: "asc" },
                            ]
                        });

                    myDataSource.read();


                    $("#grid").kendoGrid({
                        dataSource: myDataSource,
                        dataBound:
                            function (e) {
                                var data = $("#grid").data("kendoGrid").dataSource._data;
                                for (i = 0; i < data.length; i++) {

                                    if (myCities.indexOf(data[i].OfficeCityStateZip) === -1) {
                                        myCities.push(data[i].OfficeCityStateZip);
                                    }

                                    if (mySpecialty.indexOf(data[i].PrimarySpecialty) === -1) {
                                        mySpecialty.push(data[i].PrimarySpecialty);
                                    }

                                    if (myLanguages.indexOf(data[i].ProviderLanguages) === -1) {
                                        myLanguages.push(data[i].ProviderLanguages);
                                    }

                                    if (myHospitals.indexOf(data[i].Hospitals) === -1) {
                                        myHospitals.push(data[i].Hospitals);
                                    }

                                }
                            },
                        columns: [{
                            field: "ProviderName",
                            title: "Provider",
                            width: 80,
                            filterable: false
                        },
                        {
                            field: "OfficeName",
                            title: "Office",
                            width: 110,
                            filterable: false

                        },
                        {
                            field: "OfficeAddress",
                            title: "Address",
                            width: 100,
                            filterable: false
                        },
                        {
                            field: "OfficeCityStateZip",
                            title: "City/State/Zip",
                            width: 105,
                            filterable: {
                                ui: cityFilter
                            }
                        },
                        {
                            field: "PrimarySpecialty",
                            title: "Specialty",
                            width: 80,
                            filterable: {
                                ui: specialtyFilter
                            }
                        },
                        {
                            field: "ProviderLanguages",
                            title: "Languages Spoken",
                            width: 85,
                            filterable: {
                                ui: languagesFilter
                            }
                        },
                        {
                            field: "Hospitals",
                            title: "Hospital",
                            width: 100,
                            filterable: {
                                ui: hospitalFilter
                            }
                        }],

                        sortable: true,
                        height: 900,
                        navigatable: true,
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    eq: "Only show"
                                }
                            }
                        },
                        pageable: {
                            alwaysVisible: true,
                            pageSizes: [5, 10, 20, 100]
                        }
                    });






                    var myCities = [];
                    var mySpecialty = [];
                    var myLanguages = [];
                    var myHospitals = [];




                    myCities.sort();
                    mySpecialty.sort();
                    myLanguages.sort();
                    myHospitals.sort();





                    function languagesFilter(element) {
                        element.kendoDropDownList({
                            dataSource: myLanguages,
                            optionLabel: "--Select Language--"
                        });
                    }


                    function cityFilter(element) {
                        element.kendoDropDownList({
                            dataSource: myCities,
                            optionLabel: "--Select City--"
                        });
                    }

                    function specialtyFilter(element) {
                        element.kendoDropDownList({
                            dataSource: mySpecialty,
                            optionLabel: "--Select Specialty--"
                        });
                    }

                    function hospitalFilter(element) {
                        element.kendoDropDownList({
                            dataSource: myHospitals,
                            optionLabel: "--Select Hospital--"
                        });
                    }






                });


            </script>

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 11 Aug 2020, 09:40 AM

Hello, Sky,

Thank you for the provided code snippet.

I believe that the reason is the sort() method is called too early.

Try this way:

function languagesFilter(element) {
  element.kendoDropDownList({
      dataSource: myLanguages.sort(),
      optionLabel: "--Select Language--"
  });
}

Here is a runnable example that demonstrates this approach:

https://dojo.telerik.com/@bubblemaster/eDeWubuk

Finally, the dataBound event receives the grid instance that triggered it, so you do not need to obtain it, and I would suggest using the public API, to get the data, instead of the private _data property:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/data

dataBound: function (e) {
       // instead of this
       var data = $("#grid").data("kendoGrid").dataSource._data;
       // use this
       var data = this.dataSource.data();
}

 

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

0
Sky
Top achievements
Rank 1
answered on 11 Aug 2020, 05:04 PM

Thank you Alex! One unrelated filter question. As you can see from my data a lot of it is capitalized. Is there any way to use something like jQuery's toLowerCase method on this data?

Cheers,

-Sky

0
Alex Hajigeorgieva
Telerik team
answered on 13 Aug 2020, 03:55 PM

Hello, Sky,

You can use the toLowerCase() JavaScript method perhaps when you generate the data:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase

However, the filter is case sensitive by default. If you wish to display the values by lower case, but filter them as they are, you may consider using objects instead and have a dataTextField and a dataValueField as part of the DropDownList definition.

Regards,
Alex Hajigeorgieva
Progress Telerik

Tags
Grid
Asked by
Sky
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Sky
Top achievements
Rank 1
Share this question
or