get combobox currently typed text... angularJs

6 posts, 0 answers
  1. Boris
    Boris avatar
    10 posts
    Member since:
    Feb 2015

    Posted 27 Sep 2016 Link to this post

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

     

  2. Stefan
    Admin
    Stefan avatar
    675 posts

    Posted 29 Sep 2016 Link to this post

    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.
     
  3. Boris
    Boris avatar
    10 posts
    Member since:
    Feb 2015

    Posted 19 Dec 2016 in reply to Stefan Link to this post

    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);
                       });
     
              }
  4. Boris
    Boris avatar
    10 posts
    Member since:
    Feb 2015

    Posted 19 Dec 2016 Link to this post

    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");
                            });
                        }
                    }
                })
            }
  5. Boris
    Boris avatar
    10 posts
    Member since:
    Feb 2015

    Posted 19 Dec 2016 in reply to Boris Link to this post

    edit

    serverFiltering: true,

  6. Stefan
    Admin
    Stefan avatar
    675 posts

    Posted 21 Dec 2016 Link to this post

    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.
Back to Top