Chldren Indentation

Posted by: hoang.nguyen on 18 October 2018, 12:49 pm EST

    • Post Options:
    • Link

    Posted 18 October 2018, 12:49 pm EST - Updated 3 October 2022, 8:19 pm EST

    I am using flexgrid with following config:

    <wj-flex-grid #flex

    [autoGenerateColumns]=“true”

    [itemsSource]=“filterData”

    [childItemsPath]=“‘TeamMembers’”

    [showMarquee]=“true”

    [selectionMode]=“1”

    [headersVisibility]=“1”

    [treeIndent]=“30”

    [isReadOnly]=“true”

    (click)=“onClick(flex, $event)”

    (initialized)=“initialized(flex)”

    (formatItem)=“formatItem(flex, $event)”

    (loadedRows)=“loadedRows(flex)”>

    The problems I am having are:

    Anton, Annette are reported to Albert but they are not indented more to the right of Albert indicating they are reporting to Albert.

    Albert, Benjamin, and Bella are at the same level bu because Albert and Benjamin has direct reports, thus the triangle ion is added to the front of their name causing the name indented further in compare to Bella.

    Briget is reported to Benjamin and Billy and Bernard reported to Bridget but also their indentation differently

    How can I correct these indentation? Thank you very much.

  • Posted 22 October 2018, 12:22 am EST

    As part of the design, indent space is calculated including the glyph icons so the indentation seems to be fine. However, from the snippet you provided, we notice that you are setting treeIndent to a high value(30) which should increase the indent and this problem should not occur, so we tried to replicate the issue at our and were unable to do so. Could you please have a look at the following sample and let us know if there are some changes we need to make in order to replicate the issue:

    https://stackblitz.com/edit/angular-zmuekc?file=app%2Fapp.component.html

    ~Sharad

  • Posted 22 October 2018, 10:59 am EST - Updated 3 October 2022, 8:19 pm EST

    Hi Sharad,

    Thank for you respond. However, I take you example and modify the json data set to include an extra row without and children (name: ‘Intelligible Sky Test’, items: ) and as you can see on this example, name: ‘Intelligible Sky Test’ and name: ‘Intelligible Sky’ indented differently. Please se attachment below. Is there any other way work around sir? Thank you sir very much.

    Regards,

    Hoang

  • Posted 22 October 2018, 11:01 am EST - Updated 3 October 2022, 8:19 pm EST

  • Posted 23 October 2018, 2:33 am EST

    Hi,

    We were able to replicate the issue at our end and hence it has been forwarded to the concerned team for further investigation(Internal tracking Id: 349559).

    Till then you may fix the issue at your end by adding the following CSS:

    .wj-flexgrid .wj-row .wj-cell.wj-group .wj-btn-glyph{
      padding: 0px;
      text-align: left;
    }
    

    You may also refer to the following updated sample: https://stackblitz.com/edit/angular-imsdgz?file=styles.css

    ~Sharad

  • Posted 24 October 2018, 5:43 pm EST - Updated 3 October 2022, 8:19 pm EST

    Thank you Sharad for you respond. I have following your advice to add

    .wj-flexgrid .wj-row .wj-cell.wj-group .wj-btn-glyph{

    padding: 0px;

    text-align: left;

    }

    to my scss file but it does not make any diffrent. I took your demo url and modified the json as below:

    https://stackblitz.com/edit/angular-imsdgz?file=styles.css

    getTreeData(): {} {

    return [

    {

    name: ‘Adriane Simione’, items: [

    { name: ‘Intelligible Sky 1’, items: },

    {

    name: ‘Intelligible Sky 2’, items: [

    { name: ‘Theories’, length: ‘2:02’ },

    { name: ‘Giant Eyes’, length: ‘3:29’ },

    { name: ‘Jovian Moons’, length: ‘1:02’ },

    { name: ‘Open Minds’, length: ‘2:41’ },

    { name: ‘Spacetronic Eyes’, length: ‘3:41’ }]

    },

    { name: ‘Intelligible Sky 3’, items: }

    ]

    },

    {

    name: ‘Amy Winehouse’, items: [

    {

    name: ‘Back to Black’, items: [

    { name: ‘Addicted’, length: ‘1:34’ },

    { name: ‘He Can Only Hold Her’, length: ‘2:22’ },

    { name: ‘Some Unholy War’, length: ‘2:21’ },

    { name: ‘Wake Up Alone’, length: ‘3:43’ },

    { name: ‘Tears Dry On Their Own’, length: ‘1:25’ }]

    },

    {

    name: ‘Live in Paradiso’, items: [

    { name: “You Know That I’m No Good”, length: ‘2:32’ },

    { name: ‘Wake Up Alone’, length: ‘1:04’ },

    { name: ‘Valerie’, length: ‘1:22’ },

    { name: ‘Tears Dry On Their Own’, length: ‘3:15’ },

    { name: ‘Rehab’, length: ‘3:40’ }]

    }]

    },

    {

    name: ‘Black Sabbath’, items: [

    {

    name: ‘Heaven and Hell’, items: [

    { name: ‘Neon Knights’, length: ‘3:03’ },

    { name: ‘Children of the Sea’, length: ‘2:54’ },

    { name: ‘Lady Evil’, length: ‘1:43’ },

    { name: ‘Heaven and Hell’, length: ‘2:23’ },

    { name: ‘Wishing Well’, length: ‘3:22’ },

    { name: ‘Die Young’, length: ‘2:21’ }]

    },

    {

    name: ‘Never Say Die!’, items: [

    { name: ‘Swinging The Chain’, length: ‘4:32’ },

    { name: ‘Breakout’, length: ‘3:54’ },

    { name: ‘Over To You’, length: ‘2:43’ },

    { name: ‘Air Dance’, length: ‘1:34’ },

    { name: ‘Johnny Blade’, length: ‘1:02’ },

    { name: ‘Never Say Die’, length: ‘2:11’ }]

    },

    {

    name: ‘Paranoid’, items: [

    { name: ‘Rat Salad’, length: ‘3:44’ },

    { name: ‘Hand Of Doom’, length: ‘4:21’ },

    { name: ‘Electric Funeral’, length: ‘2:12’ },

    { name: ‘Iron Man’, length: ‘3:22’ },

    { name: ‘War Pigs’, length: ‘3:13’ }]

    }]

    },

    {

    name: ‘Brand X’

    }

    ];

    }

    getTreeData(): {} {

    return [

    {

    name: ‘Adriane Simione’, items: [

    { name: ‘Intelligible Sky 1’, items: },

    {

    name: ‘Intelligible Sky 2’, items: [

    { name: ‘Theories’, length: ‘2:02’ },

    { name: ‘Giant Eyes’, length: ‘3:29’ },

    { name: ‘Jovian Moons’, length: ‘1:02’ },

    { name: ‘Open Minds’, length: ‘2:41’ },

    { name: ‘Spacetronic Eyes’, length: ‘3:41’ }]

    },

    { name: ‘Intelligible Sky 3’, items: }

    ]

    },

    {

    name: ‘Amy Winehouse’, items: [

    {

    name: ‘Back to Black’, items: [

    { name: ‘Addicted’, length: ‘1:34’ },

    { name: ‘He Can Only Hold Her’, length: ‘2:22’ },

    { name: ‘Some Unholy War’, length: ‘2:21’ },

    { name: ‘Wake Up Alone’, length: ‘3:43’ },

    { name: ‘Tears Dry On Their Own’, length: ‘1:25’ }]

    },

    {

    name: ‘Live in Paradiso’, items: [

    { name: “You Know That I’m No Good”, length: ‘2:32’ },

    { name: ‘Wake Up Alone’, length: ‘1:04’ },

    { name: ‘Valerie’, length: ‘1:22’ },

    { name: ‘Tears Dry On Their Own’, length: ‘3:15’ },

    { name: ‘Rehab’, length: ‘3:40’ }]

    }]

    },

    {

    name: ‘Black Sabbath’, items: [

    {

    name: ‘Heaven and Hell’, items: [

    { name: ‘Neon Knights’, length: ‘3:03’ },

    { name: ‘Children of the Sea’, length: ‘2:54’ },

    { name: ‘Lady Evil’, length: ‘1:43’ },

    { name: ‘Heaven and Hell’, length: ‘2:23’ },

    { name: ‘Wishing Well’, length: ‘3:22’ },

    { name: ‘Die Young’, length: ‘2:21’ }]

    },

    {

    name: ‘Never Say Die!’, items: [

    { name: ‘Swinging The Chain’, length: ‘4:32’ },

    { name: ‘Breakout’, length: ‘3:54’ },

    { name: ‘Over To You’, length: ‘2:43’ },

    { name: ‘Air Dance’, length: ‘1:34’ },

    { name: ‘Johnny Blade’, length: ‘1:02’ },

    { name: ‘Never Say Die’, length: ‘2:11’ }]

    },

    {

    name: ‘Paranoid’, items: [

    { name: ‘Rat Salad’, length: ‘3:44’ },

    { name: ‘Hand Of Doom’, length: ‘4:21’ },

    { name: ‘Electric Funeral’, length: ‘2:12’ },

    { name: ‘Iron Man’, length: ‘3:22’ },

    { name: ‘War Pigs’, length: ‘3:13’ }]

    }]

    },

    {

    name: ‘Brand X’

    }

    ];

    }

    As you can see, the indentation is still not right. Any other way sir?

  • Posted 26 October 2018, 1:24 am EST

    Hi,

    If we understand correctly, you would like the indentation to the same as in TreeView control(Refer to attached image).

    Since the grid is not an actual tree control, it calculates its padding differently. However, you may handle the formatItem event to achieve the required functionality. Please refer to the following sample which demonstrates the same: https://stackblitz.com/edit/angular-8jrish?file=app%2Fapp.component.ts

    Furthermore, we have also asked the devTeam for an enhancement. We will let you know as we hear from them.

    Regards

    Sharad

  • Posted 29 October 2018, 11:49 am EST

    Thank you very much sir. It is working great!

Need extra support?

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

Learn More

Forum Channels