Telerik Forums
Kendo UI for Angular Forum
1 answer
16 views
Telerik Treelist not working for save,edit,delete on telerik website  URL:  https://demos.telerik.com/kendo-angular-ui/demos/treelist/editing/in-cell-editing?theme=default-ocean-blue-a11y
Martin Bechev
Telerik team
 answered on 10 Jun 2025
1 answer
47 views

Hello,

We encountered a problem inside our app while using the kendo-treelist component.

As shown in the video attached, we use a template to edit the values in the tree, which is either kendo-dropdownlist or kendo-numerictextbox. At the press of the kendo-icon-wrapper, which contains that arrow SVG icon (for increasing/decreasing the value or selecting from the dropdown), the whole row will either collapse or expand depending on the current state that it has.

From debugging, we believe that because the same SVG icon has been used, it might trigger the collapsing/expanding.

After adding a kendo-icon-wrapper component inside that cell, we could observe the same behaviour when pressing next to the 'test' text.

We are looking for a solution to this problem.

Thank you in advance.

Martin Bechev
Telerik team
 answered on 28 Mar 2025
1 answer
63 views

Setting the initial TreeList selection, or clearing it programmatically, does not seem to update the Select All checkbox.  Is there a way to programmatically do it?
I am using row selection as described in these pages:

https://www.telerik.com/kendo-angular-ui/components/treelist/selection/row-selection#select-all-checkbox

https://www.telerik.com/kendo-angular-ui/components/treelist/selection/persisting#persisting-row-selection-based-on-a-specific-field

Thanks.

Zornitsa
Telerik team
 answered on 13 Jan 2025
1 answer
61 views

I have a kendo-treelist in Angular

 

Edit mode has only Number, Text or boolean,

 <kendo-treelist-column field="Enhed" title="Enhed"  editor="text"
    [style]="{'text-align': 'left','min-width':'100px','padding': '0px'}"
      [headerStyle]="{'text-align': 'left'}">
       <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="Enhed">
        <span *ngIf="!kendotreelist.isEditingCell()">{{dataItem.Enhed}}</span>
        <select *ngIf="kendotreelist.isEditingCell()" type="text" [(ngModel)]="dataItem.Enhed" >
          <option *ngFor="let enhed of enheder" [value]="enhed">{{enhed}}</option>
        </select>
      </ng-template>
    </kendo-treelist-column>

 

I need to make it custom select instead.

Is there any one who knows how?

 

Martin Bechev
Telerik team
 answered on 24 Sep 2024
1 answer
85 views

I am a newbee in Kendo Components and need advice on selecting the right component.

I want a grid or tree representation of something like a book with the following structur.

- Book 1

-- Chapter 1

--- Subchapter 1

---- Line 1

---- Line 2

--- Subchapter 2

---- Line 1

---- Line 2

- Book 2

-------

-------

There are about 18 books. Some books divide lines in both chapters and subchapters. Other books only divide by chapters. So using a Grid can be a problem since setting groups = 'book, chapter, subchapter' would mean that books that dont use subchapters will be presented with an empty group for subchapter

I have tried using Master-Detail grid with 4 levels af grid (see the picture). This actually seem to work but will require a lot of styling to get rid of unwanted space. And there is the issue of a bit difficult navigation betwwen the levels.

Would it be better to use a treelist or treeview.

Zornitsa
Telerik team
 answered on 12 Sep 2024
1 answer
52 views

Hello everyone

I would like to persist the selection of columns in a kendo treelist, such that when a user reloads the page their selection of columns remains the same.

Is there a way of hooking into the events that take place when a selection is applied?

For example, in the picture attached, if the user were to select to display 'Description Two' and hit apply, then I would like for all three columns to be displayed on next reload. Likewise if a user were to hide both Description columns, then only the 'Name' column would be displayed on next reload. All three would still show up in the column chooser in this example, just that two of them would be turned off.

What might I do to achieve this in Angular15?

Best regards

Martin Bechev
Telerik team
 answered on 11 Apr 2024
1 answer
152 views

Hey guys,

I have an angular form that contains two tree lists: the first one is hierarchal and the 2nd is flat.  Both are populated using [kendoTreeListFlagBinding] and both render correctly.  The first tree list is hierarchal and the second is flat.  Yay Kendo!!

The issue is when I go to export from the flat treelist, it exports hierarchal and not flat.

First Treelist

 <kendo-treelist
            *ngIf="!this.isFlatList"
            [kendoTreeListFlatBinding]="ssAllowances"
            filterable="menu"
            [filter]="filter"
            (filterChange)="this.setFilter($event)"
            [sortable]="{ mode: 'multiple' }"
            [sort]="sort"
            kendoTreeListExpandable
            idField = 'currentGUID'  
            parentIdField='parentGUID'
            >
            <ng-template kendoTreeListToolbarTemplate>
              <button look="flat" type="button" class="btn"
                      title="Export to Excel" kendoTreeListExcelCommand>
                <i class="fa fa-lg fa-file-excel-o"></i>
              </button>
            </ng-template>

code for the column defs etc

 

second Treelist

 <kendo-treelist-column
              *ngIf="this.canDeleteAllowance()"
              width="25">
              <ng-template kendoTreeListCellTemplate let-dataItem #deleteButtonTemplate>
                <a *ngIf="dataItem.canDelete && dataItem.allowanceId !== 0"
                (click)="deleteAllowance(dataItem)"
                title="CLick to Delete">
                <i class="fa fa-trash"></i></a>
              </ng-template>
            </kendo-treelist-column>
            <kendo-treelist-excel fileName="ShipsetAllowances.xlsx"></kendo-treelist-excel>
          </kendo-treelist>

code for the column defs etc

 

What I need is the "directive" to tell excel to export the data as a flat list.

What am I missing from the doc

 

Thanx Kyle

 

 

Kyle
Top achievements
Rank 1
Iron
 answered on 05 Mar 2024
1 answer
86 views
Hi, we're currently using the TreeList and we've encountered an issue... while trying to edit a cell of a column named with a dot inside as "AR32.2" for example... the edit input doesn't show up

Could you help us with this case, please? :D 

Thank you,
Uscatu Cosmin

Zornitsa
Telerik team
 answered on 05 Feb 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
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
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?