Telerik Forums
Kendo UI for Angular Forum
1 answer
121 views

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?

Martin Bechev
Telerik team
 answered on 09 Jan 2024
0 answers
90 views
hi, I have a column with multiple object values ​​and I need to bind each id to default filter menu but kendo only allows me to bind an unique id via input (fieldName).
Is there a way to send multiple ids? or i have to create a custom component and add my logic there
marc
Top achievements
Rank 1
 asked on 09 Jan 2024
1 answer
80 views

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

Martin Bechev
Telerik team
 answered on 08 Jan 2024
1 answer
126 views

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?

 
horváth
Top achievements
Rank 2
Iron
Iron
 answered on 05 Jan 2024
0 answers
71 views

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)">
Kyrylo
Top achievements
Rank 1
 asked on 05 Jan 2024
0 answers
217 views
I'm working with my first instantiation of a light / dark theme and to do this I'm using css variables.

An example of what I mean:

input::placeholder {
  color: var(--input-placeholder);
}

What I'm noticing however for the items in a dropdown list is that if I use css variables I'll only see the initial set color (I just tested this with kelly green as the default) but if the variable switches the dropdown background and text colors will not update. An example of the css that I have in my all.css file:
.k-list-item {
  color: var(--input_color);
  background-color: var(--k_input_background2);
}

I just tried setting the program to dark mode and then creating the component and dropdowns after that's already selected - I still get the initial / default value not the actual. To clarify I'm setting other kendo css with this such as the grids, input backgrounds and text color, all of it's working fine - this is the only place it seems to be failing.

Let me know if this sounds familiar and if so what recommendations you have to work around this issue.
Ron
Top achievements
Rank 1
Iron
Iron
Iron
 asked on 04 Jan 2024
0 answers
113 views

<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:

  1. Template is reordered within the same Folder - Positions of all templates will be changed in this case. 
  2. Template is reordered into some other Folder - Parent id of dragged template and Positions of all templates in target folder will be changed.
  3. Folder is reordered into some other Folder - parent id of dragged template and its child templates will change and Positions of all templates in target folder will be changed.  
Now this can be handled through some custom logic. And templates can be saved to DB with new positions and parent-ids.
But I want to know, if Kendo Treelist provides any build-in event or mechanism through which these changed positions can be handled/accessed and can be sent to backend to save changes in DB afterwords.

Attaching few screenshots and mock data to help you understand the issue. 
ankit
Top achievements
Rank 1
 asked on 03 Jan 2024
0 answers
77 views

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.

SR
Top achievements
Rank 1
 asked on 02 Jan 2024
1 answer
112 views
Hi, there, so atm I'm trying to implement a custom filter menu, with kendo multiselect component, but I'm having some issues. So, what's happening it's that the filtering it's not working properly and I think the issue comes beacuse it's not getting the right currentFilter state. When I open the filter button it seems to do the filtering ok, but when I reopen the button, the filters selected previosly don't appear in the ui, despite the filtering persisting and I'm not able to unselect any filter at all, and if i try to filter again selecting new values it will just add the values to the currentFilter and perfoms the filtering adding the new values, plus the ones before. 


custom-component.ts

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)
      })
    }
  }

}


custom-filter.html

<kendo-multiselect
  [data]="data"  
  [valuePrimitive]="true"
  [textField]="textField"
  [valueField]="valueField"
  [value]="filter | filterValues"
  (valueChange)="onChange($event, filterService)"
  >
</kendo-multiselect>

table.html


<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


Yanmario
Telerik team
 answered on 02 Jan 2024
0 answers
213 views

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

 

 


Maurizio
Top achievements
Rank 1
Iron
 updated question on 25 Dec 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?