Hide the parent node in tree-list/ Treeview angular 14

[Johina]

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:

mockData: any[] = [
  {
    wrkdocOid: 3,
    wrkdocType: 'RootTemplateContainer',
    wrkdocUdid: 'BuiltIn.RootContainer',
    wrkdocDescription:
      'an invisible built-in folder which contains all items that appear on the root level',
    wrkdocUpdatedate: null,
    wrkdocUpdatename: null,
    wrkdocWrkxlsoid: null,
    wrkdocParentoid: null,
    wrkdocPosition: null,
    wrkdocXmlfile: null,
    fmwrkdoclans: [],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
  {
    wrkdocOid: 4,
    wrkdocType: 'UnusedTemplateContainer',
    wrkdocUdid: 'BuiltIn.UnusedContainer',
    wrkdocDescription:
      'an invisible built-in folder which contains all items that appear in the not-used list',
    wrkdocUpdatedate: null,
    wrkdocUpdatename: null,
    wrkdocWrkxlsoid: null,
    wrkdocParentoid: null,
    wrkdocPosition: 1,
    wrkdocXmlfile: null,
    fmwrkdoclans: [],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
  {
    wrkdocOid: 5,
    wrkdocType: 'Folder',
    wrkdocUdid: 'BwTemplates',
    wrkdocDescription: null,
    wrkdocUpdatedate: '2010-03-03T09:42:15',
    wrkdocUpdatename: null,
    wrkdocWrkxlsoid: null,
    wrkdocParentoid: 3,
    wrkdocPosition: 0,
    wrkdocXmlfile: null,
    fmwrkdoclans: [],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
  {
    wrkdocOid: 52,
    wrkdocType: 'Folder',
    wrkdocUdid: 'BwIT100',
    wrkdocDescription: null,
    wrkdocUpdatedate: '2010-03-17T13:55:12',
    wrkdocUpdatename: 'Basware system',
    wrkdocWrkxlsoid: null,
    wrkdocParentoid: 5,
    wrkdocPosition: 0,
    wrkdocXmlfile: null,
    fmwrkdoclans: [
      {
        wrkdoclanWrkdocoid: 52,
        wrkdoclanText: 'BW Input Templates',
        wrkdoclanLanudid: 'EN',
        wrkdoclanWrkdoco: null,
      },
      {
        wrkdoclanWrkdocoid: 52,
        wrkdoclanText: 'BW Syöttöpohjat',
        wrkdoclanLanudid: 'FI',
        wrkdoclanWrkdoco: null,
      },
    ],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
 
  {

  {
    wrkdocOid: 10200,
    wrkdocType: 'Template',
    wrkdocUdid: 'E_104',
    wrkdocDescription: null,
    wrkdocUpdatedate: '2023-01-13T12:56:10',
    wrkdocUpdatename: 'Latvanen Henri',
    wrkdocWrkxlsoid: 10124,
    wrkdocParentoid: 4,
    wrkdocPosition: 0,
    wrkdocXmlfile: 20241,
    fmwrkdoclans: [
      {
        wrkdoclanWrkdocoid: 10200,
        wrkdoclanText: 'laskelma',
        wrkdoclanLanudid: 'EN',
        wrkdoclanWrkdoco: null,
      },
      {
        wrkdoclanWrkdocoid: 10200,
        wrkdoclanText: 'laskelma',
        wrkdoclanLanudid: 'FI',
        wrkdoclanWrkdoco: null,
      },
    ],
    inverseWrkdocParento: [],
    wrkdocParento: null,
  },
];

[Georgi]

Hi Johina, 

Thank you very much for the details provided.

If I understood you correctly, you are currently utilizing the Kendo UI for Angular TreeList component and are looking for an approach that would allow you to hide some of the nodes based on a specific condition. Please, correct me if I misinterpreted the requirement.

As of now, I am afraid that there is no built-in approach in our API that would allow the developer to hide specific nodes. The good news is that the desired modification could be achieved with the use of the built-in CellTemplateDirective, the NgClass structural directive, and some custom CSS. 

The developer can use the CellTemplateDirective together with the NgClass directive to add a specific custom class to these nodes that satisfy the pre-determined condition:

<ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex">
    <span [ngClass]="dataItem.wrkdocUdid == 'BuiltIn.RootContainer' || dataItem.wrkdocUdid 
      == 'BuiltIn.UnusedContainer' ? 'hide' : ''"> {{ dataItem.wrkdocUdid }}
    </span>
</ng-template>

Having done this, the developer can use the :has() CSS pseudo-class together with the .k-table-row selector and set the display property to none:

.k-table-row:has(.hide) {
     display: none;
}

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it: 

https://stackblitz.com/edit/angular-7byv4e

In case the suggested approach does not help you achieve the desired functionality, I would ask you to provide more detailed information about the expected end result. This would allow me to gain a better understanding of the exact scenario and thus provide a more suitable suggestion.

Let me know if this helps.

Regards,
Georgi
Progress Telerik