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

I need to implement a multiselect functionality using mousedown with the CTRL key. Is it possible?

Thanks

I am following this article:

Selection - TreeView - Kendo UI for Angular (telerik.com)

that shows using this directive:

[kendoTreeViewSelectable]="selection"

does the trick. However, in my code I am getting:

ERROR NullInjectorError: R3InjectorError(AwaAssetEditorModule)[TreeViewComponent -> TreeViewComponent -> TreeViewComponent -> TreeViewComponent]: 
  NullInjectorError: No provider for TreeViewComponent!
    at NullInjector.get (core.mjs:7493:27)
    at R3Injector.get (core.mjs:7914:33)
    at R3Injector.get (core.mjs:7914:33)
    at R3Injector.get (core.mjs:7914:33)
    at R3Injector.get (core.mjs:7914:33)
    at ChainedInjector.get (core.mjs:12084:36)
    at lookupTokenUsingModuleInjector (core.mjs:3201:39)
    at getOrCreateInjectable (core.mjs:3246:12)
    at Module.ɵɵdirectiveInject (core.mjs:10041:12)
    at NodeInjectorFactory.SelectDirective_Factory [as factory] (progress-kendo-angular-treeview.mjs:95:105)

Line 95 has something to do with a version of the software. I am running version 13.4.0. Is it compatible with this multi select functionality?

Thanks

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,

I have encountered an issue when I manipulate the array which I use for [nodes] in my kendo-treeview. When a new item is added to the array, or an old one is updated, they simply disappear from view. Since I knew that the array contained the new/updated item I eventually realized that it was in fact still being rendered in the HTML, just with the added "k-hidden" property - thus not being visible. 

I'm yet to figure out a good solution to this problem. I could in theory use ::ng-deep to disable the default behaviour of .k-hidden in the component, but then I can no longer use the filtering function as it relies upon being able to use k-hidden. 

How come the newly added or updated items in my array get the "k-hidden" property in the first place though? Here's an example of the code:

<kendo-treeview 
                  [nodes]="dataService.tables"
                  [filterable]="true"
                  [expandOnFilter]="{expandedOnClear: 'initial'}"
                  [textField]="['tableName', 'tableColumnName']"
                  kendoTreeViewExpandable
                  kendoTreeViewSelectable
                  kendoTreeViewHierarchyBinding
                  (selectionChange)="onTableClick($event)"
                  childrenField="tableColumns">
</kendo-treeview>

With dataService.tables being a simple "Array<Table>" which I occasionally push new objects to. (when I say update I mean replace the old item in the array with a new one, not simply changing fields on the item in the array)

Here you can see the difference between the elements as viewed through the browser console:

Apologies if this question has already been answered, or if I'm glossing over something obvious. I did some research but couldn't find anything.

The basic question:

Is it possible to intercept drops with DropPosition.Before or DropPosition.After, and change them to DropPosition.Over?

Do I need to handle this using a custom edit service?  If so, is there an example of setting one up that I can refer to?  I'm of course not looking for something already written to achieve exactly what I'm trying to do, but I'm having trouble finding even a basic example of using one with the treeview component, so I don't know where to begin.

Background on why I'm looking for this:

I have a drag and drop tree view in which I'm trying to maintain 1 level of hierarchy.  This is one level of folder nodes, each of which can contain file nodes which can be dragged and dropped between folder nodes.  File nodes cannot have children, and a folder node cannot be a child of another folder node.

I've been able to achieve this by checking the drop event and setting it to invalid unless the DropPosition is equal to Over, but this severely limits where the user can drop a node.

I'm currently preventing dropping one file node onto another file node, because the default behavior would make the dropped node the child of the target node.  Ideally, I'd like to instead allow the drop, but make the dropped node become a child of the target node's parent folder node, so a sibling of the file node it was dropped on.

I'm also preventing dropping a file node at the top or bottom edge of a folder node because Kendo reads this DropPosition as Before or After.  By default, this places the dropped file node at the same hierarchy level as the folder node it was dropped on.  Ideally, I'd like to change the Before and After positions to Over, so that the file node becomes a child of that folder rather than moving beside it.

I've implemented logic for some of this in (addItem) and (removeItem) handler methods on the component, and while they do handle the data correctly in the background, they seem to have no effect on what Kendo is doing visually in the template until the page is refreshed.

We are using remote data to create treeview, so our tree data type is

public treedata: Observable<any>;

So in search function we are getting exception

Argument of type 'Observable<any>' is not assignable to parameter of type 'any[]'.

How we apply a filter on remote async data?

I'm looking at the Node Template - TreeView - Kendo UI for Angular (telerik.com) . Trying to figure out how to open a new component / page when clicking on the tree node. Can someone provide an example?

Thanks,

Bryian Tan