Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Manikanta Vundavalli
385
How to hide some columns for child rows in igx-tree-grid
posted

Hi,

I have a scenario where I have parent row and child rows with a total of 6 columns and I want to display 6 columns for parent row and only 3 columns for child row. Can this be possible?

From the above image consider the first row as header, the second row in green is the parent row and the third row in blue is the child row and I want to display only three columns in the child row and hide the other three columns.

and my other question is in the tree-grid header row on sorting multiple columns on sort indicator a number (data-sortindex) is being displayed indicating the columns selected for sorting as shown below. Is there a way to hide it?


Thanks,

Mani

Parents
No Data
Reply
  • 640
    Offline posted

    Hello Mani,

    Thank you for posting in our community.

    At this point we do not provide an option for column hiding only for certain row. What I can suggest for achieving similar behavior is using Tree Grid Conditional Cell Styling for hiding the child rows cells in the last three columns:

    HTML

    <igx-tree-grid #treegrid1 [data]="data" [autoGenerate]="false" height="500px" width="100%" primaryKey="ID" foreignKey="ParentID">
   <igx-column field="UnitPrice" [cellClasses]="hideCell">
</igx-tree-grid>

    TYPESCRIPT

     

    private hideCellCB = (rowData, columnKey, cellValue, rowIndex) => {
        return rowData.ParentID !== -1 ? true : false;
};
 
public hideCell = {
        'hideCell': this.hideCellCB,
};

    SCSS

        :host {
        ::ng-deep {
            .hideCell {
                display: none;
            }
        }
    }

    However, the row element will continue to be with the width of the grid and only the hidden cells will be not visible.

    Regarding the second question, the index of the sort indicator can be removed with the help of SCSS:

    SCSS

     

       :host {
        ::ng-deep {
            .sort-icon::after {
                display: none;
            }
        }
    }

    I created a small sample illustrating my suggestion, which can be found here. Please test it on your side and let me know whether you find it helpful.

    Please let me know if you have any further questions and concerns.

    Regards
    Viktor Kombov
    Entry Level Software Developer
    Infragistics, Inc.

Children
No Data