Angular Tree Grid Column Hiding

The Ignite UI for Angular Tree Grid provides an IgxColumnActionsComponent with an IgxColumnHidingDirective which allows users to perform column hiding directly through the user interface or by using the Angular component. The Material UI Grid has a built-in column hiding UI, which can be used through the Tree Grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page.

Angular Tree Grid Column Hiding Example

Tree Grid Setup

트리 그리드를 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 열에 대한 필터링과 정렬을 모두 활성화합니다.

<!--columnHiding.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%"
    height="560px" columnWidth="200px" [allowFiltering]="true">
    <igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
    <igx-column [field]="'ID'" dataType="number" [sortable]="true"></igx-column>
    <igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
    <igx-column [field]="'HireDate'" dataType="date" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'Age'" dataType="number" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-tree-grid>

Toolbar's Column Hiding UI

The built-in Column Hiding UI is placed inside an IgxDropDownComponent in the Tree Grid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown. For this purpose all we have to do is set both the IgxGridToolbarActionsComponent and the IgxGridToolbarHidingComponent inside of the Tree Grid. We will also add a title to our toolbar by using the IgxGridToolbarTitleComponent and a custom style for our Tree Grid's wrapper.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-tree-grid ...>
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
        ...
    </igx-tree-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 10px;
}

The Tree Grid provides us with some useful properties when it comes to using the toolbar's column hiding UI. By using the igx-grid-toolbar-hiding title property, we will set the title that is displayed inside the dropdown button in the toolbar.

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-tree-grid>
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding #hidingActionRef title="Column Hiding"></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
    </igx-tree-grid>
</div>

By using the columnsAreaMaxHeight property of the IgxGridToolbarHidingComponent, we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want.

// columnHiding.component.ts

public ngAfterViewInit() {        
    this.hidingActionRef.columnsAreaMaxHeight = "200px";
}

In order to use the expanded set of functionalities for the column hiding UI, we can use the IgxColumnActionsComponent's columnsAreaMaxHeight property. This way we can use it according to our application's requirements.

이 문서의 시작 부분에 있는 Angular 열 숨기기 예제 섹션에서 위 코드의 결과를 볼 수 있습니다.

Custom Column Hiding UI

Let's say we want to manually define our IgxColumnActionsComponent, add the IgxColumnHidingDirective so that it knows what its purpose would be and put it anywhere on the page. First, however, we need to import the IgxColumnActionsModule.

// app.module.ts

...
import {
    ...
    IgxColumnActionsModule 
} from 'igniteui-angular/grids/core';
// import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxColumnActionsModule],
})
export class AppModule {}

Now let's create our IgxColumnActionsComponent. In our application, we will place it next to the grid (which is not the case with the toolbar's column hiding UI, where the component is inside a dropdown by design). We will also set the columns property of the component to the columns of our Tree Grid and include some custom styles to make our application look even better!

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.columns">
    </igx-column-actions>
</div>
<div class="gridContainer">
    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
        ...
    </igx-tree-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 15px;
    display: flex;
    flex-direction: row;
}

.columnHidingContainer {
    min-width: 250px;
    height: 560px;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px gray;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25);
    igx-column-actions {
        height: 460px;
    }
}

.columnsOrderOptionsContainer {
    margin-top: 20px;
    margin-bottom: 20px;
}

.gridContainer {
    width: 100%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    margin-left: 30px;    
}

Add title and filter prompt

A couple more things we can do in order to enrich the user experience of our column hiding component is to set the title and the filterColumnsPrompt properties. The title is displayed on the top and the filterColumnsPrompt is the prompt text that is displayed in the filter input of our column hiding UI.

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="treeGrid.columns"
                       title="Column Hiding" filterColumnsPrompt="Type here to search">
    </igx-column-actions>
</div>

Add column display order options

We can also allow the user to choose the display order of the columns in the column hiding UI. For this purpose we will use the columnDisplayOrder property, which is an enumeration type property and has the following options:

• 알파벳순 (열을 알파벳순으로 정렬)
• DisplayOrder (트리 그리드에 표시되는 방식에 따라 열 순서 지정)

옵션에 맞게 멋지게 디자인된 라디오 버튼 몇 개를 만들어 보겠습니다! 계속해서 IgxRadio 모듈을 구하면 됩니다.

// app.module.ts

...
import {
    ...
    IgxRadioModule    
} from 'igniteui-angular/radio';
// import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],    
})
export class AppModule {}

Now all we have to do is bind the checked property of both radio buttons respectively with different conditions and handle their click events.

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    ...
    <div class="columnsOrderOptionsContainer">
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'Alphabetical'"
                   (click)="columnHidingUI.columnDisplayOrder = 'Alphabetical'">
            Alphabetical order
        </igx-radio>
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'DisplayOrder'"
                   (click)="columnHidingUI.columnDisplayOrder = 'DisplayOrder'">
            Display order
        </igx-radio>
    </div>
</div>

Disable hiding of a column

사용자가 열을 숨기기 UI에서 열을 숨기는 것을 쉽게 막을 수 있는데, 단순히 속성 속성을 true로 설정disableHiding 하면 됩니다.

<!--columnHiding.component.html-->

<div class="gridContainer">
    <igx-tree-grid ... >
        ...
        <igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        ...
    </igx-tree-grid>
</div>

모든 것이 잘 진행되었다면 UI 구성요소를 숨기는 열은 다음과 같습니다.

스타일링

열 작업 구성 요소의 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 인덱스 파일을 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

By using the simplest approach, we create a new theme that extends the column-actions-theme and accepts the $title-color and the $background-color parameters.

$custom-column-actions-theme: column-actions-theme(
  $background-color: #292826,
  $title-color: #ffcd0f
);

As seen, the column-actions-theme only controls colors for the column actions container, but does not affect the buttons, checkboxes and the input-group inside of it. Let's say we want to style the buttons as well, so we will create a new button theme:

$custom-button: button-theme(
  $foreground: #292826, 
  $disabled-foreground: rgba(255, 255, 255, .54)
);

Note

우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.

In this example we only changed the text-color of the flat buttons and the button disabled color, but the button-theme provides way more parameters to control the button style.

마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.

@include css-vars($custom-column-actions-theme);

.igx-column-actions {
  @include css-vars($custom-button);
}

Note

We include the created button-theme within .igx-column-actions, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too.

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep for the components inside the column action component (buttons, checkboxes ...etc):

@include css-vars($custom-column-actions-theme);

:host {
  ::ng-deep {
    .igx-column-actions {
      @include css-vars($custom-button);
    }
  }
}

Demo

API References

이 기사에서는 트리 그리드의 도구 모음에서 기본 제공 열 숨김 UI를 사용하는 방법을 배웠고 이를 별도의 구성 요소로도 정의했습니다. 사용자가 다양한 열 순서 중에서 선택할 수 있는 UI를 도입했으며 고유한 사용자 지정 제목을 설정하고 프롬프트 텍스트를 필터링했습니다. 또한 추가 Ignite UI for Angular 구성 요소인 IgxRadio 버튼을 사용했습니다.

열 숨김 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.

• IgxColumnActions구성 요소
• IgxColumnActions구성 요소 스타일

사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:

IgxTreeGridComponent properties:

• 숨겨진열 개수

IgxColumnComponent properties:

• 비활성화숨기기

IgxGridToolbarComponent properties:

• 진행률 표시

IgxGridToolbarComponent components:

• IgxGridToolbarTitleComponent
• IgxGridToolbarActionsComponent

IgxGridToolbarComponent methods:

IgxTreeGridComponent events:

• 열 가시성이 변경됨

IgxRadioComponent

Styles:

• IgxTreeGridComponent Styles
• IgxRadioComponent 스타일

Additional Resources

• 트리 그리드 개요
• 가상화 및 성능
• 필터링
• 페이징
• 정렬
• 요약
• 열 고정
• 열 크기 조정
• 선택

• 수색

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular