2017-11-11 16 views

答えて

0

MultiSelectコンポーネントは、numerous templatesを提供し、ヘッダー、フッター、およびアイテムのコンテンツのレンダリングを制御するために使用できます。つまり、我々はいくつかの追加のスタイリングを使って異なるレイアウトを簡単に達成することができます。ここで

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

は、テンプレートの使用法を示しplunkerです:

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

コンポーネントは、テーブルのようなレイアウトを持っていない、あなたはそれを手動で実装する必要がありますことを、注意してください。それにもかかわらず、デモに示されているように、これは難しい作業ではありません。

+0

複数のオプションを1つの行に入れたい場合(たぶん彼はそれを意味していました)、次に 'float:left;'クラス 'k-item'に追加します。 – Ludwig

+0

わかりません。 @A_jが彼のアイデアについてコメントしてくれることを願っています。同じ行に複数のアイテムを配置するレイアウトに関しては、完璧に機能しないと言います。キーボードのナビゲーションは期待通りに機能せず、バグのように見えます。レイアウトを変更しないで、必要に応じて新しいカスタムコンポーネントを設計することをお勧めします。 –

関連する問題