Angular & ComboBox integration

[David]

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.

[Georgi Krustev]

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

 

 

[Michael]

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() {
  }

}

[Michael]

Sorry,this is the correct test.component.html

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

[Alexander Popov]

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