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

get combobox currently typed text... angularJs

5 Answers 98 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Boris
Top achievements
Rank 1
Boris asked on 27 Sep 2016, 07:48 PM

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 }
},

 

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 29 Sep 2016, 12:15 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Boris
Top achievements
Rank 1
answered on 19 Dec 2016, 04:49 PM

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);
                   });
 
          }
0
Boris
Top achievements
Rank 1
answered on 19 Dec 2016, 08:28 PM

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");
                        });
                    }
                }
            })
        }
0
Boris
Top achievements
Rank 1
answered on 19 Dec 2016, 08:32 PM

edit

serverFiltering: true,

0
Stefan
Telerik team
answered on 21 Dec 2016, 09:41 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Integration with other JS libraries
Asked by
Boris
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Boris
Top achievements
Rank 1
Share this question
or