or
1 answer
12 views
<kendo-window title="Select Item" [width]="800" [height]="500" *ngIf="opened" (close)="windowClose()">
<kendo-grid
kendoGridSelectBy="id"
[kendoGridBinding]="KendoWindowData$ | async"
[filterable]="true"
[sortable]="true"
[height]="400"
[selectable]="selectableSettings"
(selectionChange)="onSelectionChange($event, grid)"
[(selectedKeys)]="mySelection">
<ng-template kendoGridToolbarTemplate>
<kendo-grid-checkbox-column [showSelectAll]="true" [width]="40"></kendo-grid-checkbox-column>
</ng-template>
<kendo-grid-column [width]="40"> </kendo-grid-column>
<kendo-grid-column field="innerCode" title="შიდა კოდი" [width]="250" [filterable]="true"></kendo-grid-column>
<kendo-grid-column field="name" title="სახელი" [width]="250" [filterable]="true"></kendo-grid-column>
<kendo-grid-column field="barcode" title="Barcode" [width]="250" [filterable]="true"></kendo-grid-column>
</kendo-grid>
<button (click)="confirmSelection(grid)" kendoButton>Confirm Selection</button>
</kendo-window> on here how to disable checked checkbox if it possible ?
2 answers
38 views
Hey everyone,
Hope this message finds you well.
I'm creating a grid table with Add/Edit/Delete features. Currently running into a blocker when clicking on a checkbox during an Add procedure. This action completely resets the values from the dropdown menus I've previously selected from. Any ideas as to why this behavior might be occurring? Thanks!
TS:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/other_api/DataService';
import { ErrorHandlerService } from '../../services/error-handler.service';
import { Item } from '../../models/other_api/Item';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SortDescriptor } from "@progress/kendo-data-query";
import { RemoveEvent, SaveEvent } from '@progress/kendo-angular-grid';
import { AnotherService } from '../../services/other_api/AnotherService';
import { DifferentService } from '../../services/other_api/DifferentService';
import { SomeService } from '../../services/other_api/SomeService';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.scss'],
})
export class ClientComponent implements OnInit {
clients: Item[] = [];
anotherItems: string[] = [];
differentItems: string[] = [];
someItems: string[] = [];
moreItems: string[] = [];
parentItems: string[] = [];
constructor(
private errorHandlerService: ErrorHandlerService,
private dataService: DataService,
private anotherService: AnotherService,
private differentService: DifferentService,
private someService: SomeService,
private formBuilder: FormBuilder,
) {
this.createFormGroup = this.createFormGroup.bind(this);
}
public formGroup: FormGroup = this.formBuilder.group({
Id: 0,
ClientName: '',
ClientKey: '',
ParentClientName: '',
IsParent: false,
MarketVertical: '',
Region: '',
Inactive: false,
Locale: ''
});
public createFormGroup = (args: any): FormGroup => {
const item = args.isNew ? new Item(0, '', '', '', '', '', false, false, '') : args.dataItem;
return this.formBuilder.group({
Id: item.Id,
ClientName: item.ClientName,
ClientKey: item.ClientKey,
ParentClientName: item.ParentClientName,
IsParent: item.IsParent || false,
MarketVertical: item.MarketVertical,
Region: item.Region,
Inactive: item.Inactive || false,
Locale: item.Locale
});
};
public sort: SortDescriptor[] = [
{
field: "Name",
dir: "asc",
},
];
public sortChange(sort: SortDescriptor[]): void {
this.sort = sort;
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
}
ngOnInit(): void {
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
};
login() {
//Implementation for login
};
showError() {
this.errorHandlerService.handleError("This is a test error. Stuff is super wrong.");
}
getClient(): void {
this.dataService.get(1).subscribe();
}
getAllClients(): void {
this.dataService.getAll().subscribe((data) => {
this.clients = data;
});
}
getAnotherItems(): void {
this.anotherService.getAll().subscribe((data) => {
this.anotherItems = data.map((anotherItem) => anotherItem.Name);
});
}
getDifferentItems(): void {
this.differentService.getAll().subscribe((data) => {
this.differentItems = data.map((differentItem) => differentItem.Description);
});
}
// Similar functions for other services
saveHandler(args: SaveEvent): void {
if (args.isNew) {
this.dataService.create(args.dataItem).subscribe((createdData) => {
const updateItem = this.clients.filter(element => element.ClientName === createdData.ClientName)[0];
updateItem.Id = createdData.Id;
});
}
else {
this.dataService.update(args.formGroup.value).subscribe((updatedData) => {
const updateItem = this.clients.filter(element => element.Id === updatedData.Id)[0];
updateItem.ClientName = updatedData.ClientName;
updateItem.ClientKey = updatedData.ClientKey;
// Similar updates for other properties
});
}
args.sender.closeRow(args.rowIndex);
}
removeHandler(args: RemoveEvent): void {
this.dataService.delete(args.dataItem).subscribe();
}
}
import { DataService } from '../../services/other_api/DataService';
import { ErrorHandlerService } from '../../services/error-handler.service';
import { Item } from '../../models/other_api/Item';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SortDescriptor } from "@progress/kendo-data-query";
import { RemoveEvent, SaveEvent } from '@progress/kendo-angular-grid';
import { AnotherService } from '../../services/other_api/AnotherService';
import { DifferentService } from '../../services/other_api/DifferentService';
import { SomeService } from '../../services/other_api/SomeService';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.scss'],
})
export class ClientComponent implements OnInit {
clients: Item[] = [];
anotherItems: string[] = [];
differentItems: string[] = [];
someItems: string[] = [];
moreItems: string[] = [];
parentItems: string[] = [];
constructor(
private errorHandlerService: ErrorHandlerService,
private dataService: DataService,
private anotherService: AnotherService,
private differentService: DifferentService,
private someService: SomeService,
private formBuilder: FormBuilder,
) {
this.createFormGroup = this.createFormGroup.bind(this);
}
public formGroup: FormGroup = this.formBuilder.group({
Id: 0,
ClientName: '',
ClientKey: '',
ParentClientName: '',
IsParent: false,
MarketVertical: '',
Region: '',
Inactive: false,
Locale: ''
});
public createFormGroup = (args: any): FormGroup => {
const item = args.isNew ? new Item(0, '', '', '', '', '', false, false, '') : args.dataItem;
return this.formBuilder.group({
Id: item.Id,
ClientName: item.ClientName,
ClientKey: item.ClientKey,
ParentClientName: item.ParentClientName,
IsParent: item.IsParent || false,
MarketVertical: item.MarketVertical,
Region: item.Region,
Inactive: item.Inactive || false,
Locale: item.Locale
});
};
public sort: SortDescriptor[] = [
{
field: "Name",
dir: "asc",
},
];
public sortChange(sort: SortDescriptor[]): void {
this.sort = sort;
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
}
ngOnInit(): void {
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
};
login() {
//Implementation for login
};
showError() {
this.errorHandlerService.handleError("This is a test error. Stuff is super wrong.");
}
getClient(): void {
this.dataService.get(1).subscribe();
}
getAllClients(): void {
this.dataService.getAll().subscribe((data) => {
this.clients = data;
});
}
getAnotherItems(): void {
this.anotherService.getAll().subscribe((data) => {
this.anotherItems = data.map((anotherItem) => anotherItem.Name);
});
}
getDifferentItems(): void {
this.differentService.getAll().subscribe((data) => {
this.differentItems = data.map((differentItem) => differentItem.Description);
});
}
// Similar functions for other services
saveHandler(args: SaveEvent): void {
if (args.isNew) {
this.dataService.create(args.dataItem).subscribe((createdData) => {
const updateItem = this.clients.filter(element => element.ClientName === createdData.ClientName)[0];
updateItem.Id = createdData.Id;
});
}
else {
this.dataService.update(args.formGroup.value).subscribe((updatedData) => {
const updateItem = this.clients.filter(element => element.Id === updatedData.Id)[0];
updateItem.ClientName = updatedData.ClientName;
updateItem.ClientKey = updatedData.ClientKey;
// Similar updates for other properties
});
}
args.sender.closeRow(args.rowIndex);
}
removeHandler(args: RemoveEvent): void {
this.dataService.delete(args.dataItem).subscribe();
}
}
------------------------------
HTML:
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default/dist/all.css" />
<app-page-layout [workingArea]="body" [footer]="footer">
<ng-template #body>
<h1>Clients</h1>
<kendo-grid [kendoGridReactiveEditing]="createFormGroup"
[kendoGridBinding]="clients"
[pageable]="true"
[sortable]="true"
[navigable]="true"
[filterable]="true"
[sort]="sort"
(sortChange)="sortChange($event)"
[pageSize]="10"
(save)="saveHandler($event)"
(remove)="removeHandler($event)">
<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand themeColor="success">Add</button>
</ng-template>
<kendo-grid-column field="ClientName" title="Client Name"> </kendo-grid-column>
<kendo-grid-column [filterable]="false" field="ClientKey" title="Client Key">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="clientKeys" [(ngModel)]="dataItem.ClientKey" name="ClientKey"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<!-- Other columns-->
<kendo-grid-column [filterable]="true" filter="boolean" field="IsParent" title="Is Parent" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input kendoCheckBox id="isParentCheckbox" type="checkbox" [checked]="dataItem.IsParent" disabled /><app-page-layout [workingArea]="body" [footer]="footer">
<ng-template #body>
<h1>Clients</h1>
<kendo-grid [kendoGridReactiveEditing]="createFormGroup"
[kendoGridBinding]="clients"
[pageable]="true"
[sortable]="true"
[navigable]="true"
[filterable]="true"
[sort]="sort"
(sortChange)="sortChange($event)"
[pageSize]="10"
(save)="saveHandler($event)"
(remove)="removeHandler($event)">
<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand themeColor="success">Add</button>
</ng-template>
<kendo-grid-column field="ClientName" title="Client Name"> </kendo-grid-column>
<kendo-grid-column [filterable]="false" field="ClientKey" title="Client Key">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="clientKeys" [(ngModel)]="dataItem.ClientKey" name="ClientKey"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<!-- Other columns-->
<kendo-grid-column [filterable]="true" filter="boolean" field="IsParent" title="Is Parent" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
</ng-template>
</kendo-grid-column>
<kendo-grid-column [filterable]="true" filter="boolean" field="Inactive" title="Inactive" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input kendoCheckBox id="InactiveCheckbox" type="checkbox" [checked]="dataItem.Inactive" disabled />
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="Actions" [width]="220">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridEditCommand themeColor="info">
Edit
</button>
<button kendoGridRemoveCommand themeColor="error">Remove</button>
<button kendoGridSaveCommand themeColor="success">
{{ isNew ? "Add" : "Update" }}
</button>
<button kendoGridCancelCommand themeColor="warning">
{{ isNew ? "Discard changes" : "Cancel" }}
</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</ng-template>
<ng-template #footer>
<app-custom-button [buttonText]="'Login'" aria-label="Login" (onClick)="login()"></app-custom-button>
<app-custom-button [buttonText]="'Show Error'" aria-label="Show Error" (onClick)="showError()"></app-custom-button>
</ng-template>
</app-page-layout>
</kendo-grid-column>
<kendo-grid-column [filterable]="true" filter="boolean" field="Inactive" title="Inactive" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input kendoCheckBox id="InactiveCheckbox" type="checkbox" [checked]="dataItem.Inactive" disabled />
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="Actions" [width]="220">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridEditCommand themeColor="info">
Edit
</button>
<button kendoGridRemoveCommand themeColor="error">Remove</button>
<button kendoGridSaveCommand themeColor="success">
{{ isNew ? "Add" : "Update" }}
</button>
<button kendoGridCancelCommand themeColor="warning">
{{ isNew ? "Discard changes" : "Cancel" }}
</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</ng-template>
<ng-template #footer>
<app-custom-button [buttonText]="'Login'" aria-label="Login" (onClick)="login()"></app-custom-button>
<app-custom-button [buttonText]="'Show Error'" aria-label="Show Error" (onClick)="showError()"></app-custom-button>
</ng-template>
</app-page-layout>
Slavena
Telerik team
answered
on
30 Nov 2023
1 answer
34 views
I am using the kendo grid checkbox column to select the records. but the records are not displaying as selected, once I move to the nextpage. I want the selected records to be shown as selected even i move to nextpage and come back to the same page.
in the below image, the slected records are showing as selected even when the page is changes. kindly help with code
1 answer
151 views
I have a scenario, where I have to filter the grid based on a Boolean column.
for ex: "isMember" is a boolean field with "yes" or "No" values
The user can filter records with :
"yes":- to see only member records,[checked= true]
"No":- to see non-member records[checked = fslse]
and "both yes and No":- to see all records[checked=null]
The Prime-ng has a p-triStateCheckbox component to implement this scenario.
Do we have something similar in kendo to implement this scenario?
1 answer
31 views
I have a grid with both its pageable and navigable settings turned on. This grid works fine but appears to oddly affect another grid on the page that is added dynamically when a button is clicked.
The dynamically created grid has selectable set to true and it has a checkbox column. The checkbox can be checked but not unchecked.
When either pageable or navigable is turned off for the first grid, the checkbox in the dynamic grid works as expected.
Here is a stackblitz project demonstrating the issue: (tested in Chrome and Edge)
https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-lqeqyu
This project uses older versions of Angular and Kendo, and I have tested with the latest versions and the bug is fixed.
Is there a temporary workaround for this issue until I am able to upgrade?
Thanks!
Marvin
0 answers
33 views
Hi,
this is a bug report, not a question.
If we change the size of a treeview with checkboxes to large or small, the size of the checkboxes doesn't change, it remains as medium.
Other "bug" in the documentation: the large size of a checkbox is 20px and not 24px.
0 answers
44 views
[RESOLVED]
Hello,
I have integrated kendo grid with some details-grid using the KendoGridDetailTemplate.
Everything works great, but I can't find a way of hiding the [+] sign when there is nothing to show in the details component.
I am already using the [KendoGridDetailTemplateShowIf]="ShowDetailsCondition" but the problem i'm facing is that when the directive is called, I don't have access to the methods in my component, since "this" changes and represents the directive itself.
<ng-template kendoGridDetailTemplate let-dataItem [kendoGridDetailTemplateShowIf]="showDetailsCondition">
<app-cash-register-main-cash-register-action-form-details
[invoiceHeaders]="invoiceHeaders"
[quoteHeaders]="quoteHeaders"
[shipmentHeaders]="shipmentHeaders"
[subscriptionHeaders]="subscriptionHeaders"
[orderHeaders]="orderHeaders"
[creditNoteHeaders]="creditNoteHeaders"
[document]="dataItem">
</app-cash-register-main-cash-register-action-form-details>
</ng-template>
hasHeaders(dataItem): boolean {
console.log(dataItem);
let document = dataItem;
const type = document.SourceEntity;
const id = document.EntityId;
let documentFound = [];
switch (type) {
case 'InvoiceHeader':
console.log('InvoiceHeader');
const InvoiceHeader = this.invoiceHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(InvoiceHeader, type));
documentFound.push(...this.findParentDocumentFromLines(InvoiceHeader?.Lines, type));
break;
case 'QuoteHeader':
console.log('QuoteHeader');
const selectedQuoteHeader = this.quoteHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedQuoteHeader, type));
documentFound.push(...this.findParentDocumentFromLines(selectedQuoteHeader?.Lines, type));
break;
case 'SubscriptionHeader':
console.log('SubscriptionHeader');
const selectedSubscription = this.subscriptionHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedSubscription, type));
documentFound.push(...this.findParentDocumentFromLines(selectedSubscription?.Lines, type));
break;
case 'OrderHeader':
console.log('OrderHeader');
const selectedOrderHeader = this.orderHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedOrderHeader, type));
documentFound.push(...this.findParentDocumentFromLines(selectedOrderHeader?.Lines, type));
break;
case 'CreditNoteHeader':
console.log('CreditNoteHeader');
const selectedCreditNoteHeader = this.creditNoteHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedCreditNoteHeader, type));
documentFound.push(...this.findParentDocumentFromLines(selectedCreditNoteHeader?.Lines, type));
break;
case 'ShipmentHeader':
console.log('ShipmentHeader');
const selectedShipmentHeader = this.shipmentHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedShipmentHeader, type));
break;
}
if (documentFound.length > 0) {
return true;
}
return false;
}
here is my condition function:
public showDetailsCondition(dataItem: MovementDocumentCustomer): boolean {
console.log(dataItem);
return (
(dataItem.SourceEntity === 'InvoiceHeader' ||
dataItem.SourceEntity === 'ShipmentHeader' ||
dataItem.SourceEntity === 'OrderHeader') &&
this.hasHeaders(dataItem)
);
}
error : "this.hasHeaders is not a function" => I guess it's because "this" represent now the Directive and not my component
How could I use custom methods/function from my component into my condition function without have it returning an error ?
Thanks you!
Audric
Audric
Top achievements
Rank 1
Rank 1
updated question
on
05 Dec 2022
0 answers
40 views
I have used the kendo tree view component with multi select check boxes.
and when I check them it will return the position of the node tree item. like below image.
My problem is how can I get the text of the selected items instead of this checked keys.
Here is my code
<div class="example-config">Checked keys: {{ checkedKeys.join(",") }}</div>
<kendo-treeview
textField="moduleName"
[nodes]="nodes"
[children]="children"
[hasChildren]="hasChildren"
kendoTreeViewExpandable
kendoTreeViewCheckable
class="k-treeview"
[(checkedKeys)]="checkedKeys"
(checkedChange)="checked(checkedKeys)"
>
<ng-template kendoTreeViewNodeTemplate let-dataItem>
{{dataItem.moduleName || dataItem.featureName}}
</ng-template>
</kendo-treeview> public checkedKeys: any[] = [];
public nodes: any[] = [
{
moduleId: 1,
moduleName: 'Home',
features: [
{
featureId: 2,
featureName: 'Orgonization',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: [
{
featureId: 10,
featureName: 'Test',
subFeatures: [{
featureId: 8,
featureName: '8888888888',
subFeatures: []
}]
},
{
featureId: 11,
featureName: 'New',
subFeatures: []
},
]
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
{
featureId: 3,
featureName: 'Planing',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: []
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
],
},
];
/**
* A function that returns an observable instance which contains the
* [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
* for a given parent node.
*/
public children = (dataitem: any): Observable<any[]> =>
of(dataitem.features || dataitem.subFeatures);
/**
* A function that determines whether a given node
* [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
*/
public hasChildren = (dataitem: any): boolean =>
!!dataitem.features || !!dataitem.subFeatures;
Nimni
Top achievements
Rank 1
Rank 1
asked
on
17 Nov 2022
0 answers
65 views
I have used the kendo tree view component with multi select check boxes.
and when I check them it will return the position of the node tree item. like below image.
My problem is how can I get the text of the selected items instead of this checked keys.
Here is my code
<div class="example-config">Checked keys: {{ checkedKeys.join(",") }}</div>
<kendo-treeview
textField="moduleName"
[nodes]="nodes"
[children]="children"
[hasChildren]="hasChildren"
kendoTreeViewExpandable
kendoTreeViewCheckable
class="k-treeview"
[(checkedKeys)]="checkedKeys"
(checkedChange)="checked(checkedKeys)"
>
<ng-template kendoTreeViewNodeTemplate let-dataItem>
{{dataItem.moduleName || dataItem.featureName}}
</ng-template>
</kendo-treeview> public checkedKeys: any[] = [];
public nodes: any[] = [
{
moduleId: 1,
moduleName: 'Home',
features: [
{
featureId: 2,
featureName: 'Orgonization',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: [
{
featureId: 10,
featureName: 'Test',
subFeatures: [{
featureId: 8,
featureName: '8888888888',
subFeatures: []
}]
},
{
featureId: 11,
featureName: 'New',
subFeatures: []
},
]
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
{
featureId: 3,
featureName: 'Planing',
subFeatures: [
{
featureId: 4,
featureName: 'Group Activity Solution',
subFeatures: []
},
{
featureId: 4,
featureName: 'Office of the CIO',
subFeatures: []
},
]
},
],
},
];
/**
* A function that returns an observable instance which contains the
* [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
* for a given parent node.
*/
public children = (dataitem: any): Observable<any[]> =>
of(dataitem.features || dataitem.subFeatures);
/**
* A function that determines whether a given node
* [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
*/
public hasChildren = (dataitem: any): boolean =>
!!dataitem.features || !!dataitem.subFeatures;
Nimni
Top achievements
Rank 1
Rank 1
asked
on
17 Nov 2022
1 answer
643 views
Hi,
I have made a kendo grid with the select checkbox so the user can pick the rows required.
I have everything working that I need except users would like to sort the selected rows so they appear at the top (allows them to check easily what has been selected).
I cannot figure out how to do this, it doesn't seem like I can bind the checkbox to a field. At the moment the only way I can think of is to use the "selectedKeysChange" event to set a boolean variable to true for each selected row and then make a custom button a manual sort (although not gone down this route just yet so not sure it will work)
Is there a built in way to sort selected rows / kendo-grid-checkbox-column?
Many Thanks
