Multi column combo box in Kendo for Angular 2

1
votes

I am trying to create multi-column combo-box in Kendo-Angular 2.I can't find it in the documentation: https://www.telerik.com/kendo-angular-ui/components/dropdowns/ Is this option present in the Kendo support for Angular 2?

1
kendo-ui-angular2

1 Answers

0
votes

The MultiSelect component provides numerous templates, which could be used to control the rendering of the header, footer and the item content. That being said, we can easily achieve different layout using some additional styling.

<kendo-multiselect
    [data]="listItems"
    [(ngModel)]="value"
    [textField]="'text'"
    [valueField]="'value'"
  >
  <ng-template kendoMultiSelectHeaderTemplate>
    <div class="dropdown-header k-widget k-header">
      <span>Value</span>
      <span>Text</span>
    </div>
  </ng-template>
  <ng-template kendoMultiSelectItemTemplate let-dataItem>
    <span class="k-state-default"><h3>{{dataItem.value}}</h3></span>
    <span class="k-state-default"><h3>{{dataItem.text}}</h3></span>
  </ng-template>
</kendo-multiselect>

Here is a plunker that demonstrates the templates usage:

http://plnkr.co/edit/BvdyXuQ4TQ5OFwDliqYd?p=preview

Please note, that the component doesn't have table-like layout and you will need to implement it manually. Nevertheless as it is shown in the demo, this shouldn't be a tough task.