[英]Checking or unchecking a kendo-checkbox placed on a kendo-grid row does not work
I' am trying to add a checkbox column in a kendo-grid through Telerik's documentation.我正在尝试通过 Telerik 的文档在剑道网格中添加一个复选框列。 When I try to check or uncheck a checkbox from a row it does not work.
当我尝试选中或取消选中一行中的复选框时,它不起作用。
Here is my html:这是我的 html:
<kendo-grid
[data]="gridView"
[selectable]="selectableSettings"
[height]="317"
[kendoGridSelectBy]="getWholeItemRow"
[selectedKeys]="mySelection"
(selectedKeysChange)="onSelectedKeysChange($event)"
(remove)="confirmDeleteItemFromGrid($event)">
<ng-template
kendoGridToolbarTemplate>
<button
[disabled]='mySelection.length === 0'
mat-flat-button
class="btn-danger btn-sm"
(click)="removeSelectedItems()">Remove selected items</button>
</ng-template>
<kendo-grid-checkbox-column width="15" showSelectAll="true" [columnMenu]="false" >
<ng-template kendoGridHeaderTemplate>
<input class="k-checkbox" id="selectAllCheckboxId" kendoGridSelectAllCheckbox
[state]="selectAllState"
(selectAllChange)="onSelectAllChange($event)">
<label class="k-checkbox-label"
for="selectAllCheckboxId"></label>
</ng-template>
</kendo-grid-checkbox-column>
...
</kendo-grid>
TS: TS:
export class ImagesGridComponent implements OnInit{
@Input() captures: Array<Image>;
@Input() positionSection: number;
selectedImages: any[] = [];
public selectAllState: SelectAllCheckboxState = 'unchecked';
public mySelection: any[] = [];
public gridView: GridDataResult;
public selectableSettings: SelectableSettings = {
enabled: false,
checkboxOnly: false,
mode: 'multiple'
};
constructor(){}
ngOnInit(): void {
this.loadItems();
}
Function that returns the object stored in the row. Function 返回存储在行中的 object。 Used for [kendoGridSelectBy]:
用于 [kendoGridSelectBy]:
getWholeItemRow(context: RowArgs) {
return context.dataItem;
}
Function that should fired when the [selectedKeys] collection is updated: (NOT WORKING)更新 [selectedKeys] 集合时应触发的 Function:(不工作)
public onSelectedKeysChange(e) {
const len = this.mySelection.length;
if (len === 0) {
this.selectAllState = 'unchecked';
} else if (len > 0 && len < this.captures.length) {
this.selectAllState = 'indeterminate';
} else {
this.selectAllState = 'checked';
}
}
Function used when the header checkbox is checked/unchecked: Function 在选中/取消选中 header 复选框时使用:
public onSelectAllChange(checkedState: SelectAllCheckboxState) {
if (checkedState === 'checked') {
this.mySelection = this.captures;
this.selectAllState = 'checked';
} else {
this.mySelection = [];
this.selectAllState = 'unchecked';
}
}
Used to fill the grid:用于填充网格:
loadItems() {
this.gridView = {
data: this.captures,
total: this.captures.length
};
}
}
Thank you.谢谢你。
UPDATE:更新:
I edited the selectableSettings object and now works:我编辑了 selectableSettings object 现在可以工作了:
public selectableSettings: SelectableSettings = {
enabled: true,
checkboxOnly: true,
mode: 'multiple'
};
Add below properties in your kendo grid element:在您的剑道网格元素中添加以下属性:
HTML: HTML:
<kendo-grid [selectable]="selectableSettings" [kendoGridSelectBy]="onSelectedKey" [selectedKeys]="selectedData">
<kendo-grid-checkbox-column showSelectAll="true" [columnMenu]="false">
</kendo-grid-checkbox-column>
</kendo-grid>
TS: TS:
public setSelectableSettings(): void {
this.selectableSettings = {
checkboxOnly: false,
mode: 'multiple',
};
}
// This method is used to get the checked record data
public onSelectedKey(context: RowArgs): any {
return context.dataItem;
}
Kendo API reference:剑道 API 参考:
https://www.telerik.com/kendo-angular-ui/components/grid/api/CheckboxColumnComponent/ https://www.telerik.com/kendo-angular-ui/components/grid/api/CheckboxColumnComponent/
It seems that you have provided the checkbox with the wrong class.您似乎为复选框提供了错误的 class。 Instead of
k-checkbox
you are using k-radio
.您使用的是
k-radio
而不是k-checkbox
。 Change it as shown below,如下图修改,
<input type="checkbox" class="k-checkbox" id="selectAllCheckboxId"
kendoGridSelectAllCheckbox [state]="selectAllState"
(selectAllChange)="onSelectAllChange($event)"/>
It's needed to be an input html tag.它需要是一个输入 html 标签。 For me work.
为我工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.