igniteui-angular igxTreeGrid level visualization improvement

igxTreeGrid level visualization improvement

Open luiscla27 opened this issue 2 years ago • 5 comments

Is your feature request related to a problem? Please describe.

Currently, igxTreeGrid levels are differentiated by using left paddings, I want to be able to easily see every row's parent, this FR is a usability improvement, I'm referring to the following paddings: The reason that the current padding approach is not enough for me is that I have rows that have children, and others that don't which leads to confusion when there's only one row with child rows displayed and that single row is uncollapsed (please see this and also this)

Describe the solution you'd like

I want to more explicitly show igxTreeGrid parent/child relations, something like this:

Describe alternatives you've considered

Currently, I managed to do the following using CSS only, this result is enough for me and fulfills my use case. However, I'm opening this FR because my code might break when you guys add new features or changes to any related DOM/classes. That's my real concern.

So, any alternative solution that prevents that issue would be ok, even a new attribute for <igx-column> called treeChildIcon would be enough:

This is the SCSS code I used to add the icons, please note that I only support 4 nested levels:

:host ::ng-deep {
  .igx-grid__td--tree-cell {
    > div:first-child.igx-grid__tree-grouping-indicator[style='visibility: hidden;'] {
      width: 0;
    }
    > div:first-child:not(.igx-grid__tree-grouping-indicator) {
      + .igx-grid__tree-grouping-indicator {
        &[style='visibility: hidden;'] {
          &::before {
            width: 1rem;
            visibility: visible !important;
            .igx-icon {
              visibility: hidden;
            }
          }
        }
        &::before {
          content: '';
          font-family: 'Material Icons';
          font-size: 1.5rem;
          display: inline-flex;
          line-height: 100%;
          text-indent: 1rem;
        }
      }
      &.igx-grid__tree-cell--padding-level-1 + .igx-grid__tree-grouping-indicator::before {
        content: 'subdirectory_arrow_right';
        color: rgb(0 70 145 / 50%);
      }
      &.igx-grid__tree-cell--padding-level-2 + .igx-grid__tree-grouping-indicator::before {
        content: 'subdirectory_arrow_right';
        color: rgb(0 70 145 / 25%);
      }
      &.igx-grid__tree-cell--padding-level-3 + .igx-grid__tree-grouping-indicator::before {
        content: 'subdirectory_arrow_right';
        color: rgb(0 145 70 / 50%);
      }
      &.igx-grid__tree-cell--padding-level-4 + .igx-grid__tree-grouping-indicator::before {
        content: 'subdirectory_arrow_right';
        color: rgb(0 145 70 / 25%);
      }
    }
  }
}

Update 2021/11/30: Added width:0 to subclass + .igx-grid__tree-grouping-indicator[style="visibility: hidden;"] to remove unnecesary padding when the extra arrow is present. Also, increased text-indent from 0.35rem to 1rem to align icons. Update 2021/12/14: Fixed padding issues for non collapsable rows

Nov 25 '21 01:11 luiscla27

Another way to approach this might be doing it similarly of how MSExcel does it, It just occurred to me today, it looks a lot more like a standard approach: