Angular & ComboBox integration

5 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Jun 2015

    Posted 08 Jun 2015 Link to this post

    Hello.

     

    we are testing the kendo ComboBox as part of our widget system , in order to integrate with angular we included kendo.directive modules.

    the Original issue i wanted to solve was how to disable the angular binding on key press up and down .

    Our directives are ES6 Classes and we using the kendo combo box directive , the problem here is its seems that the combo-box create another input element on the page and don't copy other attributes we added like angular ng-keydown , when  i used the post compile method to find the new kendo input element then adding the missing properties and then $recompile the input the browser was unresponsive.

     Using the kendo auto-complete directive was good because it's don't replace the original object.

     

     

       _getElementHtml() {
                    var mapper = this.mapper;
                    var item = mapper ? 'item' : 'item.key';
                    var mdId = this.$attrs.mdId + (this.listIndex ? "-" + this.listIndex : "");
                    var html = [];

                    html.push("<div class='idi-combo-box'>");
                    html.push("<span ng-show='$this.filterText'>{{$this.filterText}}</span>");
                    var kendoType = this.isServerAutoComplete() ? 'auto-complete' : 'combo-box';

                    html.push("<input kendo-" + kendoType + " k-on-open='onOpen(kendoEvent)'  k-options='comboConfig'  k-data-source='comboList'  k-on-select='onSelection(kendoEvent)' ");
                    html.push(" type='text' ng-show='!$this.filterText' id='" + mdId + "'");
                    html.push(" ng-model='kendoInput' ");
                    html.push(" tooltip-placement='bottom' ");
                    html.push(" tooltip='{{$this.tooltip}}' ");
                    html.push(" ng-keydown='$this._onKeyDown($event)'");
                    html.push(" ng-keypress='$this._onKeyPress($event,$this)'");
                    html.push(" ui-mask='{{::$this.mask}}'");

                    html.push((this.$attrs.readOnly ? 'readonly="readonly" ' : ''));

                    html.push("/>");
                    html.push("</div>");

                    return html.join('');
                }

     

     

    thanks in advance,

    elad.

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3725 posts

    Posted 10 Jun 2015 Link to this post

    Hello David,

    Indeed, the widget creates another input element that is used to display the selected text. The initial element, that holds the selected value will be hidden. The visible input copies some of the attributes and styles of the input element, but it does not move every possible attribute from the initial element.

    The only solution I can suggest you for now is to move the attributes manually to the visible one. You can access it using input field of the widget.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Michael
    Michael avatar
    72 posts
    Member since:
    Mar 2007

    Posted 08 Nov in reply to Georgi Krustev Link to this post

    Hi,

    I'm new with Angular and trying to use your components; the issue is following: I've followed the steps described in https://www.telerik.com/kendo-angular-ui/components/dropdowns/, but the control doesn't appear when running the app.

    I've got these messages (not sure it helps) when running npm update:

    PS D:\Applications\Web\CDCoreApp> npm update
    cdcore-app@0.0.0 D:\Applications\Web\CDCoreApp
    `-- @angular/animations@4.4.6

    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN enoent ENOENT: no such file or directory, open 'D:\Applications\Web\CDCoreApp\node_modules\sockjs-client\package.json'
    npm WARN enoent ENOENT: no such file or directory, open 'D:\Applications\Web\CDCoreApp\node_modules\debug\package.json'
    npm WARN enoent ENOENT: no such file or directory, open 'D:\Applications\Web\CDCoreApp\node_modules\webpack-dev-server\package.json'

    I've placed a single control in component this way:

    test.component.html

    <p>
      test works!
      <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist>
      v</kendo-dropdownlist>
    </p>

    test.component.ts

    import { Component, OnInit } from '@angular/core';
     
    @Component({
      selector: 'app-test',
      templateUrl: './test.component.html',
      styleUrls: ['./test.component.css']
    })
    export class TestComponent implements OnInit {
     
      constructor() { }
      public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"]
      ngOnInit() {
      }
     
    }

  4. Michael
    Michael avatar
    72 posts
    Member since:
    Mar 2007

    Posted 08 Nov in reply to Michael Link to this post

    Sorry,this is the correct test.component.html

    <p>
      test works!
      <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist>
    </p>
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 10 Nov Link to this post

    Hello Michael,

    I already addressed this in the support ticket, but I am writing here in case anyone else stumbles on the same issue.
    The reason why the components are not visible is that the Kendo UI theme is not imported. I suggest checking the following article:
        - Adding the Styles

    Regards,
    Alexander Popov
    Progress Telerik
    Try our brand new, jQuery-free Angular 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