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

时间:2018-10-10 06:02:37

标签: angular kendo-ui


这是我的代码,我需要在其中添加带复选框的多选下拉菜单,当前我在剑道网格内使用了单选下拉列表

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

1 个答案:

答案 0 :(得分:0)

我尝试使用kendo gridmultiselect + 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>

请检查此example