Sorting Filter Values

4 posts, 0 answers
  1. Sky
    Sky avatar
    2 posts
    Member since:
    Aug 2020

    Posted 07 Aug 2020 Link to this post

    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>

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 11 Aug 2020 Link to this post

    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

  3. Sky
    Sky avatar
    2 posts
    Member since:
    Aug 2020

    Posted 11 Aug 2020 in reply to Alex Hajigeorgieva Link to this post

    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

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 13 Aug 2020 Link to this post

    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

Back to Top