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

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

code for the column defs etc

second 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

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:

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.  

In our application we are using angular 14 and the kendo control  tree-list , our requirement is to set the focus on the next node after we delete any node . Is there any possible method or way out to set focus.

For example If we delete "BW Input Template" then focus should be set on "Report Template" (there can be any number of node in BW Input Template folder ) and same for any node within the folder if deleted then focus should set to next node within the folder also I need the  focused node data.

The code sample and data is below

<kendo-treelist
  class="kendo-treelist"
  [kendoTreeListFlatBinding]="data"
  #directive="kendoTreeListFlatBinding"
  parentIdField="wrkdocParentoid"
  idField="wrkdocOid"
  kendoTreeListExpandable
  kendoTreeListSelectable
  [height]="1200"
  [rowReorderable]="true"
  (cellClick)="onCellClick($event)"
>
  <kendo-treelist-rowreorder-column
    [width]="25"
  >
  </kendo-treelist-rowreorder-column>
  <kendo-treelist-column 
    [expandable]="true" 
    title="Name" 
    [width]="250"
  >
    <ng-template 
      kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex"
    >
      <span class="k-icon k-i-folder" *ngIf="isFolder(dataItem)"></span>
      <span> {{ getTemplateName(dataItem) }}</span>
    </ng-template>
  </kendo-treelist-column>
  <kendo-treelist-column
    field="wrkdocUdid"
    title="ID"
    [width]="140"
  ></kendo-treelist-column>
</kendo-treelist>

DATA set:

In our application we are using angular 14 and the kendo control  tree-list , our requirement is to hide the parent node(Root container, unsedContainer) as you can see in the attached image. We want to display the child node only. Is there is any way out or property by which we can hide the root node.

The code sample and data is below

<kendo-treelist
  class="kendo-treelist"
  [kendoTreeListFlatBinding]="data"
  #directive="kendoTreeListFlatBinding"
  parentIdField="wrkdocParentoid"
  idField="wrkdocOid"
  kendoTreeListExpandable
  kendoTreeListSelectable
  [height]="1200"
  [rowReorderable]="true"
  (cellClick)="onCellClick($event)"
>
  <kendo-treelist-rowreorder-column
    [width]="25"
  >
  </kendo-treelist-rowreorder-column>
  <kendo-treelist-column 
    [expandable]="true" 
    title="Name" 
    [width]="250"
  >
    <ng-template 
      kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex"
    >
      <span class="k-icon k-i-folder" *ngIf="isFolder(dataItem)"></span>
      <span> {{ getTemplateName(dataItem) }}</span>
    </ng-template>
  </kendo-treelist-column>
  <kendo-treelist-column
    field="wrkdocUdid"
    title="ID"
    [width]="140"
  ></kendo-treelist-column>
</kendo-treelist>

DATA set:

Hello,

Does the TreeList component support server-side pagination?

It seems that the only way to use pagination with the TreeList component is to fetch all the parent nodes from the remote resource and then the component can apply paging to them in memory. Is this correct, or can the parent nodes be paginated server-side in a similar fashion to items with the Grid component? And if so, how would one go about doing this?

Our use case involves a two-level hierarchy, where there may be tens of thousands of parent nodes, so only being able to fetch the child nodes on demand isn't quite enough to limit the amount of data loaded at once, hence our need to paginate the parent nodes.

Thank you.

Hi,
I am making a standard treelist component based on kendo treelist, and im having some problem which i dont know how to fix it. 
2. I want to allow user can add kendo treelist column and use ng-template KendoTreelistCell as `Usage code` below but it keep throw this error:
Uncaught (in promise): NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]: 
  NullInjectorError: No provider for OptionChangesService!
NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]: 
 NullInjectorError: No provider for OptionChangesService!
https://stackblitz.com/edit/angular-keazja?file=src%2Fapp%2Fapp.component.ts
My component treelist:

Usage:

Regards,
Hnaul

Hi Members,

I have been trying to achieve drag and drop between Kendo Grid to Kendo Tree and vice versa but unable to find a feasible solution.

Is it possible to do so, if yes then can you please let me share some example of if someone has implemented something similar.

By default i think it doesn't support dragging and dropping from Kendo Angular Tree Control to Kendo Angular Grid Control