Hello,
I'm using kendo-angular-spreadsheet v14.3.0. When the spreadsheet component receives a file.
this.spreadsheet.spreadsheetWidget.fromFile(target.files[0]);
Then a `SpreadsheetExcelImportEvent` is triggered.
<kendo-spreadsheet (excelImport)="onExcelImport($event)"> </kendo-spreadsheet>
When doing `event.sender.toJSON()` I get the `DocumentDescriptor` that's currently on the spreadsheet component and not the descriptor of the file which was loaded.
onExcelImport(event: SpreadsheetExcelImportEvent): void {
// not the documentDescriptor of the file that was just loaded
const documentDescriptor = event.sender.toJSON();
}
Is this intended behavior? There's no event to get the DocumentDescriptor of the 'new' spreadsheet?
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)">
<kendo-treelist
class="kendo-treelist"
[kendoTreeListFlatBinding]="data"
#directive="kendoTreeListFlatBinding"
[rowClass]="dynamicClass"
[parentIdField]="parentIdField"
[idField]="idField"
kendoTreeListExpandable
kendoTreeListSelectable
[rowReorderable]="true"
(cellClick)="onCellClick($event)"
[itemKey]="idField"
[(selectedItems)]="selected"
[(expandedKeys)]="expandedIds"
[isExpanded]="isExpanded"
(expand)="onExpand($event)"
(collapse)="onCollapse($event)"
(rowReorder)="onRowReorder($event)"
[loading]="data.length == 0"
>
<kendo-treelist-rowreorder-column [width]="25"></kendo-treelist-rowreorder-column>
<kendo-treelist-column
*ngFor="let column of treeListOptions.columns"
[field]="column.field"
[expandable]="column.expandable"
[title]="column.title"
[width]="column.width">
<ng-template *ngIf="column.ngTemplate" kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex">
<!-- Context values will be accessible for column customization on the parent component. -->
<ng-container *ngTemplateOutlet="template; context: { dataItem, rowIndex, column }"></ng-container>
</ng-template>
</kendo-treelist-column>
</kendo-treelist>
Hi,
I am using Kendo Treelist Angular with 'kendoTreeListFlatBinding'. Mock data is also attached. There could be multiple folders and each folder can have multiple templates in it. I want to use row-reorder on my tree-list component.
After enabling rowreorder. I have following scenarios to deal with:
I have a component with kendo-dropdownlist and kendo-multiselect. When I expand the multi-select and then try to expand the dropdown, the multiselect popup item list is not closed automatically. Clicking outside however, closes both popups.
I think this is because of the stop propagation on kendo-dropdownlist onBlur and onFocus methods. Please advise.
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,
I need to set the value of a kendo-combobox inside an angular form using code after receive the value from a webservice.
<form class="k-form" [formGroup]="usrForm">
<kendo-combobox #formContractor formControlName="formCity" [data]="cities"
textField="name" valueField="id" (valueChange)="ControlValueChange($event)" [clearButton]="true">
</kendo-combobox>
</form>
I have tried to set the value using object (my desire) or primitive value but the value is alwais null.
this.usrForm.controls['formCity'].setValue(newCityObj);
this.usrForm.controls['formCity'].patchValue(newCityObj);
this.usrForm.patchValue({formCity: newCityObj});
buth the control alwais remain blank,
if I show the form value in the console:
console.log(this.usrForm.value);
the formCity value is set but the value in the kendo-combobox are not displayed (kombo text remain blank)
I have see a lot of documentation and sample on read the value...but nothing about the set value by code.
Thanks
Maurizio