Wijmo 5, FlexGrid and treeIndent not actually indenting

Posted by: ssmith on 31 January 2018, 7:57 am EST

    • Post Options:
    • Link

    Posted 31 January 2018, 7:57 am EST

    I’m using the latest version of Wijmo 5 (v405) in an Angular 2 application, and have a hierarchical list of data I’m displaying.

    The data is correctly nested, with child objects of the data in subItems, and subItems of the subItems etc.

    I’m using the following properties on the flexGrid:

        <wj-flex-grid #flex
                   [itemsSource]="data" 
                   [childItemsPath]="'subItems'"
                   [treeIndent] = "1">
    

    My expectation is that the child items would be indented in the list view, something like this:

    Parent
      Child Item
      Child Item
         Child of Child Item
    Parent etc.
    

    But this isn’t occurring, all parent and child items are displaying, but all flush left to the edge of the grid.

    Am I misunderstanding this?

    I had also tried adding ```

    [selectionMode]=“‘ListBox’”

  • Posted 31 January 2018, 10:35 pm EST

    The TreeIndent property takes a number in pixels. So, setting it to “1” doesn’t really have any effect. You need to set it to larger number for eg. “15” to see the effect.

    However, if you set the childItemsPath property, the grid automatically sets the indent for the items in a hierarchical structure. Does it not work for you if you don’t set the treeIndent property?

  • Posted 1 February 2018, 2:41 am EST

    On one grid, setting treeIndent to 15 does indent the first column - as it happens, my first column on that grid is check-boxes, and it’s actually the second column I want to indent - is that possible?

    On the main grid, setting treeIndent to 15 doesn’t change anything.

    Setting childItemsPath does display the child items in the grid, but doesn’t change the indent on either grid.

  • Posted 1 February 2018, 5:26 pm EST

    Can you please attach a stripped down version of your application where I can see the issue and find a solution for you?

    If you already haven’t, please take a look at the following demo and scroll down to ‘Trees and Hierarchical Data’ and ‘Sorting Trees’ demos -

    http://demos.wijmo.com/5/Angular2/FlexGridIntro/FlexGridIntro/

    The two demos show the Tree structure in FlexGrid but don’t have the TreeIndent property set.

    Thanks

  • Posted 2 February 2018, 3:27 am EST

    Thanks for getting back to me - unfortunately in the interest of time, I’ve had to implement my own indenting functionality in order to hit a deadline.

    I’m afraid I’m not able to sanitize my project enough to post any of it, so I’m going to have to close out this issue and revisit it in the future when time allows.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels