Hello,
I'm using the kendo-grid for angular and in a colum I have date format.
The only possible option for the filter is less than equal (<=) the problem is who the filter work like lt (<) and not consider equal value.
If i selecet the filter date 31/01/2024 (in italy whw use dd/MM/yyyy) the grid show only data to 30/01/2024.
The same configuration using 'gte' work fine.
Thanks
LSo
I would like to open a grid like this (without manually dragging the header):
In other words, using this example, I would like to group by Name whenever the grid loads.
II have the grid configured like this in the html file:
And I have tried this in the component.ts file:
groupBy(this.groups, this.groups);But I think the GroupBy works on the data query and not on the grid.
Is there a way to do what I am trying to accomplish?
Thanks for any help or pointers.
Hi!
i want replace a input text with a dropdownlist-filter inside this default filter, i need to keep this filter: CONTAINS ... - AND / OR - CONTAINS ...
Can someone help me?
Thanks!!
When I select the "selectAll" checkbox, only the quantity number from the "pageSize" property is selected. When I scroll through the grid, the new visible rows are not selected and the previous rows are no longer selected.
Here is an example of a stackblitz:
https://stackblitz.com/edit/angular-tybn6w?file=src%2Fapp%2Fapp.component.ts
Hi,
you have the kendoGridInCellEditing, which is very handy. I use it in my project. But I have one issue with it. As per declaration if I click on a simple grid cell, the directive sets the clicked cell in edit mode. How can I prevent this?
Hi,
please help to set k-selected class on expand/collapse event in treeList (angular 16 app).
By default rows are highlighted on select event (k-selected class applied), but I need to highlight it on expand, collapse, select events.
I was trying to use rowCallback for setting/removing selected class and expand/collapse events for getting selected row id, but currently several rows are staying selected at the same time when should be selected only one (from the last action). Am I missing something, or is there a better approach?
rowCallback = (context) => {
return this.zone.run(() => {
if (context.dataItem.id === this.selectedNodeId) {
return {
'k-selected': true
}
}
else if (context.dataItem.id === this.previousSelectedNodeId) {
return {
'k-selected': false
}
}
});
}onAction(e) {
this.zone.run(() => {
const row = this.treeList.view.data.find(dataItem => dataItem.data.id === e.dataItem.id);
if (row) {
this.previousSelectedNodeId = this.selectedNodeId;
this.selectedNodeId = row.data.id;
}
});
}
<kendo-treelist #treeList kendoTreeListExpandable kendoTreeListSelectable
[data]="(loadNodes$ | async)"
[fetchChildren]="fetchChildren"
[hasChildren]="hasChildren"
(selectionChange)="onSelectionChange($event)"
[rowClass]="rowCallback"
(expand)="onAction($event)"
(collapse)="onAction($event)">
export class CustomMultiSelectFilterComponent implements AfterViewInit {
@Output() public handleFilterChange = new EventEmitter<CompositeFilterDescriptor>()
@Input() public data: string[] = []
@Input() public textField: string = ""
@Input() public valueField: string = ""
@Input() public filter: CompositeFilterDescriptor = { logic: "or", filters: [] }
@Input() public preFilterValue: string | null = null
@Input() public filterService: FilterService
@Input() public currentFilter: CompositeFilterDescriptor = { logic: "or", filters: [] }
public constructor(
filterService: FilterService
) {
this.filterService = filterService
}
public filterChange(filter: CompositeFilterDescriptor): void {
this.filter = filter
this.data = filterBy(this.data , filter)
this.handleFilterChange.emit(filter)
}
public onChange(values: string[], filterService: FilterService): void {
filterService.filter({
filters: values.map((value) => ({
field: this.valueField,
operator: "contains",
value,
})),
logic: "or",
})
}
public ngAfterViewInit(): void {
if (this.filterService) {
this.filterService.changes.subscribe((filter: CompositeFilterDescriptor) => {
this.currentFilter = filter
console.log("Current Filters:", this.currentFilter)
})
}
}
}
<kendo-multiselect
[data]="data"
[valuePrimitive]="true"
[textField]="textField"
[valueField]="valueField"
[value]="filter | filterValues"
(valueChange)="onChange($event, filterService)"
>
</kendo-multiselect>
<kendo-grid
kendoGridSelectBy="id"
[kendoGridBinding]="users"
filterable="menu"
[sortable]="true"
[resizable]="true"
(selectionChange)="selectionChange($event)"
[selectable]="selectableSettings"
[selectedKeys]="[selectedKeyArray]"
(filterChange)="handleFilterChange($event)"
[filter]="filter"
>
<kendo-grid-column-group title="{{ 'literal:Users | Total:' | translate }} {{ users.length }}" [columnMenu]="true">
<kendo-grid-column field="roles" title="{{ 'literal:Roles' | translate }}" [width]="220" [headerStyle]="{ 'font-weight': 'bold' }">
<ng-template kendoGridFilterMenuTemplate let-filter="filter" let-filterService="filterService">
<app-custom-multiselect-filter
[data]="rolesToFilter"
textField="rolesToFilter"
valueField="filterRoles"
[preFilterValue]="preFilter"
[filterService]="filterService"
[currentFilter]="filter"
>
</app-custom
Hello All,
I've got a product owner that requires the in-cell editing without needing to press Enter button. They want the cell to automatically enter edit mode simply by arrowing around the grid. My dev team is struggling to make this happen. Any suggestions or samples that would help us accomplish this? If we aren't able to make this work, we will have to use an entirely different framework (or roll our own) for grids, which I'm hoping to avoid.
Thanks