I have a Kendo-Grid with pagination and kendo-grid-checkbox-column,
and I want to be able to check the checkboxes according to the backend data.
Though it seems its impossible to use [kendoGridSelectionCheckbox] combined with [checked].
`
<kendo-grid #factoring
[data]="factoringSites"
[pageSize]="factoringSitesPageSize"
[skip]="skipFactoring"
[pageable]="true"
(pageChange)="pageChange($event, 'factoring')"
[height]="300"
[selectable]="{enabled: true, checkboxOnly: true }"
kendoGridSelectBy="id"
[(selectedKeys)]="myFactoringSitesSelection"
(selectedKeysChange)="onSelectedKeysChange($event, 'factoring')"
disabled="!factoringChecked">
<kendo-grid-checkbox-column [width]="40">
<ng-template kendoGridHeaderTemplate let-dataItem>
<input type="checkbox" kendoCheckBox id="selectAllFactoringCheckboxId" kendoGridSelectAllCheckbox
[state]="selectAllFactoringState"
(selectAllChange)="onSelectAllChange($event, 'factoring')"
[disabled]="selectAllReverseFactoringState == 'checked'">
<label class="k-checkbox-label" for="selectAllFactoringCheckboxId"></label>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-factoringidx="rowIndex">
<input type="checkbox"
kendoCheckBox
[kendoGridSelectionCheckbox]="factoringidx"
[checked]="true"
(change)="selectionChangeHandler($event, dataItem,'factoring')"
/>
</ng-template>
</kendo-grid-checkbox-column>
Selecting checkboxes without [kendoGridSelectionCheckbox] selects the same placed row in the next page, even though the index of the row is completely different..
So how can I use the combination of both, or just not selecting the the row of the next page
Example - https://stackblitz.com/edit/angular-rssxbc
I have 3 columns, and therefore 3 cells in which I have a button.
At the click of the button I would like to open / close the detail template
Without having the + icon on the left
HTML:
<kendo-grid-column field="info" title="info">
<ng-template kendoGridCellTemplate let-dataItem>
<button mat-button (click)="clickInfoCell()">
</button>
</ng-template>
</kendo-grid-column>
<ng-template kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex">
//DETAIL TEMPLATE BODY
</ng-template>
TS:
public onCellClick(event: CellClickEvent){
this.myEvent= event;
}
//toggleTemplate
public clickInfoCell(){
//Close previous template
//Open detail template
}
thanks
There's actually a built-in mechanism with dedicated directives for this purpose.
Template:
<kendo-grid
[kendoGridBinding]="gridView"
[kendoGridExpandDetailsBy]="expandDetailsBy"
[(expandedDetailKeys)]="expandedDetailKeys"
></kendo-grid>
Component:
public expandedDetailKeys: any[] = [1];
public expandDetailsBy = (dataItem: any): any => {
return dataItem.ProductID;
};
You can read about the mechanism here.
You can see a working demo in StackBlitz here.
Something like this. But this example is for kendoUI for jquery. I need documentation for kendoUI for angular.
I do it in my application. Here is a simple version of it:
HTML Template
<kendo-grid [data]="someData" [height]="750">
<kendo-grid-column field="LaborType" title="Task" width="120">
<ng-template kendoGridCellTemplate let-dataItem>
{{ GetLaborTypeDesc(dataItem.LaborType)?.LaborTypeDesc }}
</ng-template>
<ng-template kendoGridEditTemplate>
<kendo-dropdownlist [defaultItem]="{LaborTypeID: null, LaborTypeDesc: 'Select a task...'}" [data]="LaborTypes"
textField="LaborTypeDesc" valueField="LaborTypeID" [valuePrimitive]="true">
</kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
</kendo-grid>
Typescript
LaborTypes: Array<{ LaborTypeDesc: string, LaborTypeID: number }> = [];
public GetLaborTypeDesc(id: number): any {
return this.LaborTypes.find(x => x.LaborTypeID === id);
}
I have Add, Edit, and Delete commands in my grid that involves a form not seen here. I populate the LaborTypes object array in my ngOnInit function as well, so the user has options to choose in the dropdown.
I have a kendo grid with in-cell editing and a pair of date columns. I want to specify a maximum and a minimum date for the datepickers inside the cell the user is editing, but it doesn't seem to exist any property for that.
I tried to do it with templates:
<kendo-grid-column field="StartDate" title="Start Date">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<kendo-datepicker
format="{0:dd/MM/yyyy}"
[(ngModel)]="dataItem"
></kendo-datepicker>
</ng-template>
</kendo-grid-column>
But I'm getting a bunch of errors. How can I make this work?
EDIT: I created a stackblitz example based on one of the in-cell editing examples that I found in the documentation:
https://stackblitz.com/edit/angular-ewvsh5
Here, I discovered that I wasn't specifying the property ngModel has to connect to:
[(ngModel)]="dataItem"
Should be:
[(ngModel)]="dataItem.Date"
Ok, I changed it, but now, when I click on the date cell, instead of appearing a datepicker, it appears a regular input. Please, check this part in the components template, it's where the problem is:
<!-- This doesn't work -->
<kendo-grid-column field="Date" title="Date">
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
let-isEdited="isEdited"
*ngIf="editingDateCell"
>
<kendo-datepicker [(ngModel)]="dataItem.Date"></kendo-datepicker>
</ng-template>
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
let-isEdited="isEdited"
*ngIf="!editingDateCell"
>
{{ dataItem.Date | date }}
</ng-template>
</kendo-grid-column>
What am I doing wrong?
EDIT II: All the solutions so far show the datepicker inside the cell. That's fine, I know how to do it. The problem is that before the user clicks to edit the cell, that cell must be like a label, when the user clicks on that label, it has to become a datepicker. If the user changes the date and clicks away, the grid has to know that the data has been updated and act accordly. In summary, I need to preserve the in-cell editing behavior.
You need to use the min and max date picker properties. Please refer to this API reference link for date picker min max example.
Also refer to this forum link for an example of a date picker column template.
#Component({
selector: 'my-app',
template: `
<form novalidate #myForm="ngForm">
<kendo-grid
[data]="view | async"
[height]="533"
[pageSize]="gridState.take" [skip]="gridState.skip" [sort]="gridState.sort"
[pageable]="true" [sortable]="true"
(dataStateChange)="onStateChange($event)"
(edit)="editHandler($event)" (cancel)="cancelHandler($event)"
(save)="saveHandler($event)" (remove)="removeHandler($event)"
(add)="addHandler($event)"
[navigable]="true"
>
<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand type="button">Add new</button>
</ng-template>
<kendo-grid-column field="ProductName" title="Product Name">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<input [(ngModel)]="dataItem.ProductName" kendoGridFocusable name="ProductName" class="k-textbox" required/>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="date" title="Date" format="{0:yyyy-MM-dd}">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-datepicker
[format]="'yyyy-MM-dd'"
[(ngModel)]="dataItem.date"
[min]="min"
[max]="max"
name="date"></kendo-datepicker>
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="command" width="220">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridEditCommand type="button" class="k-primary">Edit</button>
<button kendoGridRemoveCommand type="button">Remove</button>
<button kendoGridSaveCommand type="button" [disabled]="myForm.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
<button kendoGridCancelCommand type="button">{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</form>
`
})
export class AppComponent implements OnInit {
public min: Date = new Date(2018, 2, 10);
public max: Date = new Date(2018, 11, 25);
}
Finally, what I had to do is to use the kendoGridEditTemplate instead of the kendoGridCellTemplate and use [formControl] instead of [(value)] or [(ngModel)]. If you follow the example found in the documentation, and you want to add a custom date column so you have full access to the datepicker's properties, the markup to add is this one:
<kendo-grid-column
field="StartDate"
title="Start Date"
[format]="{ date: 'dd/MM/yyyy' }"
>
<ng-template
kendoGridEditTemplate <!-- Important -->
let-column="column"
let-formGroup="formGroup"
>
<kendo-datepicker
format="dd/MM/yyyy"
[formControl]="formGroup.get(column.field)" <!-- Important -->
[min]="minimumDate"
>
</kendo-datepicker>
</ng-template>
</kendo-grid-column>
To set a minimum and maximum of a datepicker use [min] and [max]. See this demo for an example.
Here's an example code that does what you require:
#Component({
selector: 'my-app',
template: `
<p>Date</p>
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductID"></kendo-grid-column>
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="date" [format]="{ date: 'long' }">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<kendo-datepicker [(value)]="dataItem.date" [min]="minDate" [max]="maxDate">
</kendo-datepicker>
</ng-template>
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public minDate = new Date(2018, 4, 1);
public maxDate = new Date(2018, 4, 31);
const products = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": true,
date: new Date("2018-05-05T00:00:00-05:00")
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false,
date: new Date("2018-05-07T00:00:00-05:00")
}
];
public gridData: any[] = products.map(item => {
item.date = new Date(item.date);
return item;
});
}
I am building an Angular application. In my KendoUI Grid, EmployeeID and Total hours are numbering, not sure how to set the filter for them.
ReportDate which is stored in the format mm/dd/yyyy (03/16/2018), I am using filter="date" format="{0:d}" as given in an example on Telerik website, but with this filter, the date displays as 3/16/2018 instead of 03/16/2018 and filter doesn't get applied. Please guide how to correct format.
<kendo-grid
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
(dataStateChange)="dataStateChange($event)"
[kendoGridBinding]="employees"
[height]="600" [group]="group" [pageable]="true" [pageSize]="10">
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand>
<span class="k-icon k-i-file-excel"></span>Export to Excel</button>
</ng-template>
<kendo-grid-column field="EmployeeID" title="Employee ID" [width]="150"></kendo-grid-column>
<kendo-grid-column field="ReportDate" title="Report Date" width="240" filter="date" format="{0:d}" ></kendo-grid-column>
<kendo-grid-column field="BeginTime" title="Begin Time"></kendo-grid-column>
<kendo-grid-column field="EndTime" title="End Time"></kendo-grid-column>
<kendo-grid-column field="TotalHours" title="Total Hours"></kendo-grid-column>
<kendo-grid-column field="Approvedby" title="Approved by"></kendo-grid-column>
<kendo-grid-column field="Timestamp" title="Time stamp"></kendo-grid-column>
<kendo-grid-excel fileName="Report.xlsx" [fetchData]="allData"></kendo-grid-excel>
</kendo-grid>
I don't really get your question since it's solution may be just changing the format, so you wanted to it to be 03/16/2018. Then
why dont you just change the format to filter="date" format="{0:dd/MM/yyyy}
as long as your ReportDate field is stored as date in the datasource it should work.
Example : taken from kendo example, i'm just slightly changing the format here