时间戳

首页 > 解决方案 > 我们如何在具有角度 2 的剑道网格中使用多选下拉菜单

angular - 我们如何在具有角度 2 的剑道网格中使用多选下拉菜单

问题描述

这是我的代码，我需要在其中添加带有复选框的多选下拉菜单，目前我在剑道网格内使用单选下拉菜单

<kendo-grid-column field="CorporateDataFeedFileInputFieldID" title="Field Name" [filterable]="true" width="370px">
                <ng-template kendoGridCellTemplate let-dataItem>
                    {{fieldFileInputFeedID(dataItem.CorporateDataFeedFileInputFieldID)?.FieldNAme}}
                </ng-template>
                <ng-template kendoGridEditTemplate
                             let-dataItem="dataItem"
                             let-formGroup="formGroup">
                    <select class="form-control drpdown-grid-function-name" (change)="OnchangeInputField($event);" id="PercentageInputField">
                        <option *ngFor="let itemvalue of DdlInputFiledName" value={{itemvalue.CorporateDataFeedFileInputFieldID}} [selected]="itemvalue.CorporateDataFeedFileInputFieldID === editInputfiledId" #Optionfiledname>
                            {{itemvalue.FieldNAme}}
                        </option>
                    </select>
                </ng-template>
            </kendo-grid-column>


<kendo-grid-column field="DayOfWeek" title="Error Check day" [filterable]="false" width="90px" [style]="{'text-align': 'center'}">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
    <select class="form-control drpdown-grid-function-name" (change)="OnchangeWeakday($event);" id="listOfDayOfWeek">
        <option *ngFor="let itemvalue of tblFieldWeekDay" value={{itemvalue.DayOfWeek}} [selected]="itemvalue.DayOfWeek === editDayOfWeek" #OptionWeakDay>
        {{itemvalue.DayName}}
        </option>
    </select>
</ng-template>
</kendo-grid-column>

标签： angularkendo-ui

解决方案

我尝试使用kendo grid+multiselect作为单元格模板ng-template，它可以正常工作，例如：

<kendo-grid-column width="200" title="Ingredients" field="Ingredients">
            <ng-template kendoGridCellTemplate let-dataItem>
                   <kendo-multiselect [data]="listItems" [(ngModel)]="dataItem.Ingredients"></kendo-multiselect>
            </ng-template>

</kendo-grid-column>

请检查这个例子

推荐阅读