CODEWITHSUNDEEP
angularjskendo-uikendo-dropdown
Ishan Fernando
Ishan Fernando

Reputation: 2868

KendoUI dropdown filter doesn't work with AngularJS

I try to add the filter to KendoUI dropdown list and It seems like not working. filter works fine without the angular. But when I add that to with angular it doesn't show the type filter inside the dropdown. I used the same example which is in the official website.

<div ng-controller='myctrl'>
    <h4 style="padding-top: 2em;">Remote data</h4>
    <select kendo-drop-down-list
            k-data-text-field="'ProductName'"
            k-data-value-field="'ProductID'"
            k-data-source="productsDataSource"
            style="width: 100%">
    </select>
<div>

Controller

angular.module('myApp', ["kendo.directives"])
.controller('myctrl', ['$scope', function($scope) {
    $scope.productsDataSource = {
        type: "odata",
        serverFiltering: true,
        filter: "startswith",
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",          
            }
        }
    };    
}]);

This is the jsfiddle.

Upvotes: 1

Views: 905

Answers (1)

Ian Preglo
Ian Preglo

Reputation: 431

You are placing your "filter" property incorrectly. Please see the demo guide.

The filter property should be in the kendo-drop-down-list element but since you are not using the kendo-drop-down-list as a tag and just using it as a property of the select element you need to add the filter property in the element tag as well. See below:

<select kendo-drop-down-list
    k-data-text-field="'ProductName'"
    k-data-value-field="'ProductID'"
    k-data-source="productsDataSource"
    filter="'startsWith'"
    style="width: 100%"></select>
<div>

and of course remove your filter property from your angular module

angular.module('myApp', ["kendo.directives"])
    .controller('myctrl', ['$scope', function($scope) {
        $scope.productsDataSource = {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                    }
                }
            };
        }]);

See the JSFilddle fork of your JSFiddle

Upvotes: 2

Related Questions