get combobox currently typed text... angularJs

[Boris]

I would like to be able to do custom server side filtering based on the text that the user types into the combobox instead of only relying on oData filtering.

(I'm currently using web api with odata)

Is there any way to get the text from the combox in angular.

I've tried setting ng-model to a scope var, but it only changes when the selected item is changed, not when user types something.

 

Can something like this be done?:

read: {
         url: "/api/Items/searchItemThumbs", // <-- Get data from here.
         dataType: "json", // <-- The default was "jsonp".
         data: { text: $scope.comboText }
},

 

[Stefan]

Hello Boris,

If I understand the requirement correctly based on the provided information, I can suggest the following:

1) To use the filtering event which will be fired when the user type to filter the ComboBox:

http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-filtering

2) Then use the text method of the ComboBox to retrieve the text value of the widget:

http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#methods-text

I made a Dojo example demonstrating this implementation:

http://dojo.telerik.com/evaCo

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress

 

 

[Boris]

This almost works, the problem is binding the combobox to the new datasource retrieved on filtering event.

$scope.comboBoxOptions = {
          placeholder:"Select Item",
          dataTextField: "Desc",
          autoBind: "false",
          minLength:1,
          dataSource: $scope.Products,
          dataValuetField: "MQS_Code",
          filter: "contains",
          filtering:function(e){
              console.log(e);
              //console.log($scope.combobox.text());
              $scope.Products = [];
              $http.get("../api/Items/searchItemsContains?txt=" + $scope.combobox.text())
                   .then(function (response) {

                       $scope.Products = response.data;
                       e.dataSource = $scope.Products;


                       $scope.combobox.dataSource.read();
                       console.log($scope.combobox.dataSource);
                   });

          }

[Boris]

So far I found this to work.

 

scope.item2Options = {
            dataTextField: "MQS_Code",
            dataValueField: "MQS_Code",
            filter: "contains",
            dataSource: new kendo.data.DataSource({
                serverFiltering: false,
                serverPaging: false,
                transport: {
                    read: function (options) {
                        url = "../api/Items/searchItemsContains?txt=" + $scope.ddlItem.text();
                        $http.get(url).success(function (data) {
                            options.success(data);
                        }).catch(function (data) {
                            alert("error");
                        });
                    }
                }
            })
        }

[Boris]

edit

serverFiltering: true,

[Stefan]

Hello Boris,

I'm happy to hear that the desired functionality is working as expected.

If additional information is needed on this matter I will gladly assist.

Regards,
Stefan
Telerik by Progress