need to have multiple columns aligned in treeview

[Jennifer]

I have a treeview working with multiple columns but I need the buttons in those columns to be aligned.  The jquery example found here: https://www.telerik.com/forums/treeview-with-columns-in-node

was helpful but it relies on the data containing the row level information.  I don't want to have to add and maintain that in my datastructure.  Is there another way to do it.

 

Here is my code:

@Component({
    selector: 'app-treeview',
    template: `
    <kendo-treeview
    [nodes]="treeNodes"
    [isExpanded]=""
    textField="Text"

    kendoTreeViewExpandable

    kendoTreeViewFlatDataBinding
    idField="Ordinal"
    parentIdField="OrderNumber">
    <ng-template kendoTreeViewNodeTemplate let-dataItem>
   <div style="width:1500px;">
      <div style="display: inline-block;width:40%">
        {{dataItem.Text}}
      </div>
      <div style="display:inline; width:30%;">
      <button class="btn btn-primary">{{dataItem.NRName}}</button>

      </div>
      <div style="display:inline; width:30%; ">
        <button class="btn btn-primary">{{dataItem.RECName}}</button>
      </div>
   </div>
    </ng-template>
  </kendo-treeview>

  `
})

 

Any suggestions are appreciated.

[Svet]

Hi Jennifer,

We can rely on the number of levels of each node. In the provided example, we can apply a custom CSS class, using Angular's ngClass, only if there are no more child nodes of the specific node. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-w1nc9v?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik