Angular & ComboBox integration

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

    Posted 08 Jun 2015 Link to this post



    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" ' : ''));


                    return html.join('');



    thanks in advance,


  2. Georgi Krustev
    Georgi Krustev avatar
    3723 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.

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top