jquerykendo-uikendo-gridkendo-treeview

Kendo TreeView display undefined


I had this sample kendo treeview demo, it work fine if I use same name but when I use different name ledger/group it read as undefined. Any idea how to fix this?

Full demo here

$("#treeview").kendoTreeView({
  dataBound: function(){
   this.expand('.k-item');
  },
  template: "<span #if(item.active=='n'){# style='color:red' #} #>#:item.group#</span>" ,
  dataSource: [
    { ledger: "Title 1st", active:"y", items: [
      { group: "subTitle1", active:"y" },
      { group: "subTitle2", active:"n" },
      { group: "subTitle3", active:"y" },
      ]},{
    ledger: "Title 2nd", active:"n"}
  ]
});

Solution

  • You just need a conditional statement within your template. Something like this should do it:

    $("#treeview").kendoTreeView({
      dataBound: function(){
        this.expand('.k-item');
      },
      template: "<span #if(item.active=='n'){# style='color:red' #} #>#: item.group != null ? item.group : item.ledger #</span>" ,
      dataSource: [
        { ledger: "Title 1st", active:"y", items: [
          { group: "subTitle1", active:"y" },
          { group: "subTitle2", active:"n" },
          { group: "subTitle3", active:"y" },
        ]},{
          ledger: "Title 2nd", active:"n"}
      ]
    });
    

    Full demo here