Enabling Column Hiding in Ignite UI for Angular Grid

Ignite UI for Angular Grid는 Grid Angular 가장 빠릅니다.  빠르게 실행될 뿐만 아니라 애플리케이션에서 igxGrid를 사용하는 것도 매우 쉽습니다. Ignite UI for Angular 그리드 구성 요소 클래스의 이름은 igxGrid 이며 템플릿에서 <igx-grid></igx-grid로 사용할 수 있습니다>

여기에서 Ignite UI for Angular Grid에 대해 자세히 알아보세요.

1단계: Angular 프로젝트에서 Ignite UI for Angular 추가

Angular 프로젝트에 igx-grid를 추가하는 세 가지 방법이 있습니다.

1. 새 프로젝트를 시작하는 경우 Ignite UI CLI를 사용하여 프로젝트를 스캐폴딩합니다. 명령줄 옵션을 사용하여 종속성 설치를 포함하여 igx-grid를 추가할 수 있습니다.
2. 기존 프로젝트에서 Ignite UI for Angular Toolbox Extension을 사용하여 프로젝트에 igx-grid를 추가할 수 있습니다.
3. npm을 사용하여 프로젝트에 Ignite UI for Angular 종속성을 설치할 수 있습니다.

2단계: Angular 프로젝트에 igx-grid 추가

igxGrid로 작업하려면 다음을 추가해야 합니다.

1. igxGridModule
2. BrowserAnimationModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxGridModule } from 'igniteui-angular';

가져온 후 이 두 모듈을 Module의 imports 배열에 전달합니다. 다음으로 igxGrid와 바인딩하기 위해 구성 요소에 로컬 데이터 소스를 생성해 보겠습니다.

getData() {
    return [
        { model: 'BMW', color: 'Black', price: '20000' },
        { model: 'Audi', color: 'Blue', price: '10000' },
        { model: 'Merc', color: 'Red', price: '25000' },
        { model: 'Toyta', color: 'Green', price: '18000' },
        { model: 'GM', color: 'Blye', price: '10000' },
    ];
}

구성 요소의 ngOnInit 라이프 사이클 후크에서 아래 나열된 코드와 같이 getData() 함수에서 데이터를 읽습니다. 템플릿에서 속성 바인딩을 사용하여 igxGrid의 데이터 소스를 localData로 설정합니다.

ngOnInit() {
    this.localData = this.getData();
}

아래 코드 목록에 표시된 대로 템플릿에 igxGrid를 추가합니다.  열 숨기기 기능을 사용할 수 있도록 열을 명시적으로 구성하고 있습니다.

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false">
    <igx-column field="model" header="Maker"></igx-column>
    <igx-column field="color" header="Color"></igx-column>
    <igx-column field="price" header="Price"></igx-column>
</igx-grid>

위의 igxGrid에서;

1. 열은 수동으로 구성됩니다.
2. Datasource is set using [data] property binding to localData
3. 열은 수동으로 구성되므로 autoGenerate가 false로 설정됩니다.

응용 프로그램 실행에 대한 이 시점에서 아래 이미지와 같이 Angular 응용 프로그램에 igxGrid가 표시됩니다.

Step 3:  Enable Column Hiding

그리드를 Ignite UI for Angular 그리드의 도구 모음에 열 숨기기 UI를 배치합니다. 그리드의 도구 모음 드롭다운을 사용하여 열을 표시하거나 숨길 수 있습니다.  따라서 첫 번째 단계는 그리드의 showToolbar를 true로 설정하는 것입니다.

<igx-grid .... [showToolbar]="true" toolbarTitle="Cars" ...>
 
</igx-grid>

showToolbar를 true로 설정한 후 columnHiding을 true로 설정해야 합니다.

<igx-grid .... [columnHiding]="true" ...>
 
</igx-grid>

showToolbar와 columnHiding의 조합을 설정하면 igxGrid에서 열 숨기기 작업을 할 수 있습니다. 열 숨기기 및 수동 열 구성을 사용하여 모든 것을 합치면 igx-grid는 아래 코드 목록과 같이 표시됩니다.

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false"
            [showToolbar]="true" toolbarTitle="Cars" [columnHiding]="true">
      <igx-column field="model" header="Maker"></igx-column>
      <igx-column field="color" header="Color"></igx-column>
      <igx-column field="price" header="Price"></igx-column>
</igx-grid>

응용 프로그램 실행의 이 시점에서 아래 이미지와 같이 igxGrid가 렌더링된 것을 볼 수 있습니다.

[disabledHiding] 속성을 true로 설정하여 열을 숨기지 않도록 설정할 수도 있습니다. 따라서 아래 코드 목록에 표시된 대로 열 모델의 숨기기를 비활성화할 수 있습니다.

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false"
          [showToolbar]="true" toolbarTitle="Cars" [columnHiding]="true">
    <igx-column field="model" [disableHiding]="true" header="Maker"></igx-column>
    <igx-column field="color" header="Color"></igx-column>
    <igx-column field="price" header="Price"></igx-column>
</igx-grid>

응용 프로그램을 실행하는 이 시점에서 아래 이미지에 표시된 모델 열을 숨기기 위해 비활성화된 igxGrid를 찾을 수 있습니다.

열 외에도 Angular Grid용 IgniteUI를 많이 숨기면 엔터프라이즈 애플리케이션에 가장 적합한 그리드를 만드는 많은 기능이 있습니다. 여기에서 모든 기능을 확인하세요.

지금까지 열을 숨기는 것이 속성 바인딩을 설정하는 것만큼 간단하다는 것을 살펴보았습니다. 이 게시물이 도움이 되었기를 바랍니다.