CheckBox not showing up in Tree View

[Nitin]

I am using Tree view control and trying to show checkbox in front of tree items. I have used [kendoTreeViewCheckable] but still in the output I am not able see the checkbox in front of items. Here is the code:

Component.html

<kendo-treeview
            [nodes]="data"            
            textField="text"           
            [children]="children"
            [hasChildren]="hasChildren"
            kendoTreeViewExpandable
            [kendoTreeViewCheckable] ="checkableSettings"
            [(checkedKeys)]="checkedKeys"
        >
    </kendo-treeview> 

Component.ts : 

 

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Observable, of } from 'rxjs';
import { CheckableSettings } from '@progress/kendo-angular-treeview';
@Component({
  selector: 'app-mini-pub-info',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './mini-pub-info.component.html',
  styleUrls: ['./mini-pub-info.component.less']
})
export class TestComponent implements OnInit {

public data: any[] = [
    {
      text: 'Total', items: [
        { text: 'Gen' }
      ]
    },
    { text: 'QLD', items: [
        { text: 'Gen' },
        { text: 'Price' }
      ]
    },
    { text: 'NSW', items: [
        { text: 'Gen' },
        { text: 'Price' }
      ]
    },
    { text: 'VIC', items: [
        { text: 'Gen' },
        { text: 'Price' }
      ]
    },
    { text: 'SA', items: [
        { text: 'Gen' },
        { text: 'Price' }
      ]
    },
    { text: 'Load', items: [
        { text: 'CG' },
        { text: 'UT' },
        { text: 'T3' },
        { text: 'GU' },
        { text: 'SNY' },
        { text: 'BLG' },
        { text: 'MU' },
        { text: 'LNGS' },
        { text: 'VPGS' },
        { text: 'SA' }
      ]
    }
];

constructor() { }
  ngOnInit() {
  }
  public get checkableSettings(): CheckableSettings {
    return {
        checkChildren: true,
        checkParents: true,
        enabled: true,
        mode: 'multiple',
        checkOnClick: true,
    };
  }

 public children = (dataItem: any): Observable<any[]> => of(dataItem.items);
  public hasChildren = (dataItem: any): boolean => !!dataItem.items;

 

}

Output:

 

Attached

 

 

 

[Dimitar]

Hello Nitin,

As the provided setup works correctly with the latest version of the component and theme (example), I'd have to ask you to send over a zipped example project. There are several things that could potentially be causing this issue:

• improper import of the checkboxes styles
• custom css rules conflicting with @progress/kendo-theme-default

It would be easiest not to guess though but to inspect to problematic code directly.

Looking forward to your reply.

Regards,
Dimitar
Progress Telerik