Questions on Kendo UI for Angular Forum

2 questions

0 answers

27 views

TreeList selected row on expand/collapse event

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

General Discussions

Grid

TreeList

TreeView

asked on 05 Jan 2024

0 answers

45 views

Standard component based on Kendo Treelist

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:

export class PKendoTreelistComponent<T> implements OnInit, AfterViewInit {
  //Retrive input with many type of input array
  @Input() rootData: Subject<T[]> = new Subject<T[]>();
  @Input() hasChildrenFn: (item: T) => boolean;
  @Input() fetchChildrenFn: (item: T) => T[];
  @ViewChild('customTreeList') public customTreelist: TreeListComponent;
  @ViewChild('treelistContent', { static: true }) treelistContent!: TemplateRef<any>;
  @ContentChildren(PKendoTreeListColumnComponent) columns;
  @ContentChildren(ColumnGroupComponent) columnGroups;
  constructor() {}
  ngOnInit(): void {
    console.log(this.treelistContent);
  }
  ngAfterViewInit(): void {
      this.customTreelist.columns.reset([
        this.customTreelist.columns.toArray()[0],
        this.columnGroups.toArray(),
        this.customTreelist.columns.toArray().slice(1)
      ])
  }
}

<kendo-treelist
    #customTreeList
    kendoTreeListExpandable
    [data]="rootData | async"
    [fetchChildren]="fetchChildrenFn"
    [hasChildren]="hasChildrenFn"
    [height]="400"
    >
    <ng-content></ng-content>
</kendo-treelist>

@Component({
  selector: 'app-p-kendo-treelist-column',
  template: `<kendo-treelist-column
  #CustomTreelistColumn
  [field]="field"
  [title]="title"
  [width]="width"
  [expandable]="expandable"
  >
</kendo-treelist-column>`
})
export class PKendoTreeListColumnComponent {
  @ViewChild(ColumnComponent) public realColumn: ColumnComponent;
  @Input() field: string = '';
  @Input() title: string = '';
  @Input() width: number = 0;
  @Input() expandable: boolean = false;
  constructor() { }
  ngAfterViewInit() {
    console.log(this.realColumn)
  }
}

Usage:

      <app-p-kendo-treelist 
      [rootData]="listGroupWebTreeList" 
      [hasChildrenFn]="hasChildren" 
      [fetchChildrenFn]="fetchChildren"
    >
      <kendo-treelist-column [expandable]="true" class="d-flex">
        <ng-template kendoTreeListCellTemplate let-dataItem>
          {{dataItem.VNGroupName}}
        </ng-template>
      </kendo-treelist-column>
      </app-p-kendo-treelist>