Angular Hierarchical Grid のセル編集
Ignite UI for Angular Hierarchical Grid コンポーネントは、Angular CRUD 操作のための優れたデータ操作機能と強力な API を提供します。デフォルトで Hierarchical Grid はセル編集 を使用し、デフォルトのセル編集テンプレート によって、列のデータ型に基づいてさまざまなエディターが表示されます。さらに、データ更新アクション用の独自のカスタム テンプレートを定義したり、変更をコミット/破棄したりするためのデフォルトの動作をオーバーライドすることもできます。
Angular Hierarchical Grid セル編集とセル テンプレートの例
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxHierarchicalGridModule,
IgxDialogModule,
IgxButtonModule,
IgxCheckboxModule,
IgxDatePickerModule
} from "igniteui-angular" ;
import { HGridEditingSampleComponent } from "./hierarchical-grid/hierarchical-grid-editing/hierarchical-grid-editing.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
HGridEditingSampleComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxHierarchicalGridModule,
IgxDialogModule,
IgxButtonModule,
IgxCheckboxModule,
IgxDatePickerModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー
import { Component, OnInit, ViewChild } from '@angular/core' ;
import {
IgxDialogComponent, IgxHierarchicalGridComponent,
IgxNumberSummaryOperand, IgxSummaryResult
} from 'igniteui-angular' ;
import { SINGERS } from '../../data/singersData' ;
import { Singer } from '../models' ;
class MySummary {
public operate(data?: any []): IgxSummaryResult[] {
const result = [];
result.push(
{
key : 'min' ,
label : 'Min' ,
summaryResult : IgxNumberSummaryOperand.min(data)
},
{
key : 'max' ,
label : 'Max' ,
summaryResult : IgxNumberSummaryOperand.max(data)
},
{
key : 'avg' ,
label : 'Avg' ,
summaryResult : IgxNumberSummaryOperand.average(data)
});
return result;
}
}
@Component ({
selector : 'app-hierarchical-grid-editing' ,
styleUrls : ['./hierarchical-grid-editing.component.scss' ],
templateUrl : 'hierarchical-grid-editing.component.html'
})
export class HGridEditingSampleComponent implements OnInit {
@ViewChild ('hierarchicalGrid' , { static : true })
private hierarchicalGrid: IgxHierarchicalGridComponent;
@ViewChild ('dialogAdd' , { read : IgxDialogComponent, static : true })
private dialog: IgxDialogComponent;
public localdata;
public singer: Singer;
public mySummary = MySummary;
private id = 14 ;
constructor ( ) { }
public ngOnInit(): void {
this .localdata = SINGERS;
this .singer = {
ID : this .id,
Artist : 'Mock Jagger' ,
Debut : 2005 ,
GrammyAwards : 4 ,
GrammyNominations : 7 ,
HasGrammyAward : false
};
}
public formatter = (a ) => a;
public addRow ( ) {
this .hierarchicalGrid.addRow(this .singer);
++this .id;
this .cancel();
}
public cancel ( ) {
this .dialog.close();
this .singer = {
ID : this .id,
Artist : 'Mock Jagger' ,
Debut : 2005 ,
GrammyAwards : 4 ,
GrammyNominations : 7 ,
HasGrammyAward : false
};
}
public removeRow (rowIndex ) {
const row = this .hierarchicalGrid.getRowByIndex(rowIndex);
row.delete();
}
}
ts コピー <div class ="grid__wrapper" >
<button igxButton ="raised" (click )="dialogAdd.open()" class ="addSingerBtn" > Add New Singer</button >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" #hierarchicalGrid class ="hgrid" [data ]="localdata" [autoGenerate ]="false"
[height ]="'580px'" [width ]="'100%'" >
<igx-column field ="Artist" [editable ]="true" [dataType ]="'string'" > </igx-column >
<igx-column field ="HasGrammyAward" header ="Has Grammy Award?" [editable ]="true" [dataType ]="'boolean'" >
</igx-column >
<igx-column field ="Debut" [editable ]="true" dataType ="number" [formatter ]="formatter" > </igx-column >
<igx-column field ="GrammyNominations" header ="Grammy Nominations" [editable ]="true" dataType ="number"
[hasSummary ]="true" [summaries ]="mySummary" > </igx-column >
<igx-column field ="GrammyAwards" header ="Grammy Awards" [editable ]="true" dataType ="number"
[hasSummary ]="true" [summaries ]="mySummary" > </igx-column >
<igx-column [width ]="'100px'" >
<ng-template igxCell let-cell ="cell" >
<button igxButton ="icon" (click )="removeRow(cell.id.rowIndex)" >
<igx-icon > delete</igx-icon >
</button >
</ng-template >
</igx-column >
<igx-row-island [height ]="null" [key ]="'Albums'" [autoGenerate ]="false" >
<igx-column field ="Album" [editable ]="true" [dataType ]="'string'" > </igx-column >
<igx-column field ="LaunchDate" header ="Launch Date" [editable ]="true" [dataType ]="'date'" > </igx-column >
<igx-column field ="BillboardReview" header ="Billboard Review" [editable ]="true" dataType ="number" > </igx-column >
<igx-column field ="USBillboard200" header ="US Billboard 200" [editable ]="true" dataType ="number" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Songs'" [autoGenerate ]="false" >
<igx-column field ="Number" header ="No." [editable ]="true" dataType ="number" > </igx-column >
<igx-column field ="Title" [editable ]="true" [dataType ]="'string'" > </igx-column >
<igx-column field ="Released" [editable ]="true" [dataType ]="'date'" > </igx-column >
<igx-column field ="Genre" [editable ]="true" [dataType ]="'string'" > </igx-column >
</igx-row-island >
</igx-row-island >
</igx-hierarchical-grid >
<igx-dialog #dialogAdd title ="New Singer" [rightButtonLabel ]="'Add'" [leftButtonLabel ]="'Cancel'"
(leftButtonSelect )="cancel()" (rightButtonSelect )="addRow()" >
<div class ="dialogNewRecord" >
<igx-input-group >
<label igxLabel for ="artist" > Artist</label >
<input igxInput id ="artist" type ="text" [(ngModel )]="singer.Artist" />
</igx-input-group >
<igx-checkbox id ="hasGrammyAward" [(ngModel )]="singer.HasGrammyAward" > Has Grammy Award</igx-checkbox >
<igx-input-group >
<label igxLabel for ="debut" > Debut</label >
<input igxInput id ="debut" type ="number" [(ngModel )]="singer.Debut" />
</igx-input-group >
<igx-input-group >
<label igxLabel for ="grammyNominations" > Grammy Nominations</label >
<input igxInput id ="grammyNominations" type ="number" [(ngModel )]="singer.GrammyNominations" />
</igx-input-group >
<igx-input-group >
<label igxLabel for ="grammyAwards" > Grammy Awards</label >
<input igxInput id ="grammyAwards" type ="number" [(ngModel )]="singer.GrammyAwards" />
</igx-input-group >
</div >
</igx-dialog >
</div >
html コピー .addSingerBtn .igx-button--raised {
margin-bottom : 10px ;
background-color : lightgrey;
color : black;
&:hover {
background-color : rgba(0 , 0 , 0 , 0.26 )
}
}
.grid__wrapper {
margin: 0 auto;
padding : 16px ;
}
.dialogNewRecord {
> * {
margin-bottom : 8px ;
&:last-child {
margin-bottom : 0 ;
}
}
}
.igx-input-group {
margin-bottom : 10px ;
padding : 5px ;
}
.igx-checkbox {
margin-top : 5px ;
margin-bottom : 5px ;
padding-top : 8px ;
padding-bottom : 5px ;
}
.reorderLevelInput {
color : black;
width : 100% ;
}
scss コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
任意のタイプのエディター コンポーネントで igxCellEditor
を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネント (igxSelect
、igxCombo
など) ではなく、セル要素にフォーカスが残るためです。これが、igxFocus
ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の流暢な編集フロー
が維持されます。
セルの編集
UI を介した編集
編集可能なセルがフォーカスされたときに以下のいずれかの方法で特定のセルを編集モードにすることができます。
ダブルクリック;
シングル クリック - 以前選択したセルが編集モードで現在選択したセルが編集可能な場合のみ、シングル クリックで編集モードに入ります。以前選択したセルが編集モードではない場合、編集モードに入らずにシングル クリックでセルを選択します。
Enter
キーの押下;
F2
キーの押下;
変更をコミットしない場合 も以下の方法で編集モードを終了できます。
Escape
キーの押下;
ソート 、フィルターリング 、検索 、非表示 操作の実行時。
変更をコミット しない場合も以下の方法で編集モードを終了できます。
Enter
キーの押下;
F2
キーの押下;
Tab
キーの押下;
他のセルをシングル クリック - Hierarchical Grid で他のセルをクリックしたときに変更がサブミットされます。
その他の操作 (ページング、サイズ変更、ピン固定、移動など) は、編集モードを終了して変更を送信します。
セルは、垂直/水平方向へのスクロールや Hierarchical Grid 以外をクリックした場合も編集モードのままです。セル編集と行編集両方で有効です。
API を介した編集
プライマリキーが定義されている場合のみ IgxHierarchicalGrid API でもセル値を変更することができます。
public updateCell ( ) {
this .hierarchicalGrid.updateCell(newValue, rowID, 'Age' );
}
typescript
セルを更新するその他の方法として IgxGridCell
の update
メソッドで直接更新する方法があります。
public updateCell ( ) {
const cell = this .hierarchicalGrid.getCellByColumn(rowIndex, 'ReorderLevel' );
cell.update(70 );
}
typescript
セル編集テンプレート
デフォルトのセル編集テンプレートの詳細については、編集トピック を参照してください。
セルが編集モードのときに適用されるカスタム テンプレートを提供する場合は、igxCellEditor
ディレクティブ を使用できます。これを行うには、igxCellEditor
ディレクティブでマークされた ng-template
を渡し、カスタム コントロールを cell.editValue
に適切にバインドする必要があります:
<igx-column field ="class" header ="Class" [editable ]="true" >
<ng-template igxCellEditor let-cell ="cell" let-value >
<igx-select class ="cell-select" [(ngModel )]="cell.editValue" [igxFocus ]="true" >
<igx-select-item *ngFor ="let class of classes" [value ]="class" >
{{ class }}
</igx-select-item >
</igx-select >
</ng-template >
</igx-column >
html
このコードは、Race
、Class
、および Alignment
列のセルに IgxSelectComponent
を実装する以下のサンプルで使用されています。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
import {
IgxGridModule,
IgxSelectModule
} from "igniteui-angular" ;
import { GridSelectComponent } from "./grid/grid-select/grid-select-sample.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
GridSelectComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxGridModule,
IgxSelectModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Character } from './characters' ;
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxGridComponent } from 'igniteui-angular' ;
import { DATA, ALIGNMENTS, RACES, CLASSES } from './data' ;
@Component ({
selector : 'app-grid-select-sample' ,
styleUrls : ['./grid-select-sample.component.scss' ],
templateUrl : './grid-select-sample.component.html'
})
export class GridSelectComponent implements OnInit {
@ViewChild ('grid1' , { read : IgxGridComponent, static : true })
public grid1: IgxGridComponent;
public data;
public alignments;
public races;
public classes;
public character;
public generateRandomData (data ) {
return data.map((e ) => {
const indexAlignments = Math .floor(Math .random() * ALIGNMENTS.length);
e.alignment = ALIGNMENTS[indexAlignments];
const indexRaces = Math .floor(Math .random() * RACES.length);
e.race = RACES[indexRaces];
const indexClasses = Math .floor(Math .random() * CLASSES.length);
e.class = CLASSES[indexClasses];
return e;
});
}
public ngOnInit ( ) {
this .data = this .generateRandomData(DATA);
this .character = new Character();
this .alignments = ALIGNMENTS;
this .races = RACES;
this .classes = CLASSES;
}
}
ts コピー <igx-grid #grid1 [data ]="data" [primaryKey ]="'name'" height ="600px" >
<igx-column field ="name" header ="Character name" [editable ]="true" >
</igx-column >
<igx-column field ="race" header ="Race" [editable ]="true" >
<ng-template igxCellEditor let-cell ="cell" let-value >
<igx-select class ="cell-select" [(ngModel )]="cell.editValue" [igxFocus ]="true" >
<igx-select-item *ngFor ="let race of races" [value ]="race" >
{{ race }}
</igx-select-item >
</igx-select >
</ng-template >
</igx-column >
<igx-column field ="class" header ="Class" [editable ]="true" >
<ng-template igxCellEditor let-cell ="cell" let-value >
<igx-select class ="cell-select" [(ngModel )]="cell.editValue" [igxFocus ]="true" >
<igx-select-item *ngFor ="let class of classes" [value ]="class" >
{{ class }}
</igx-select-item >
</igx-select >
</ng-template >
</igx-column >
<igx-column field ="age" header ="Age" [dataType ]="'number'" [editable ]="true" width ="10%" >
</igx-column >
<igx-column field ="alignment" header ="Alignment" [editable ]="true" >
<ng-template igxCellEditor let-cell ="cell" let-value >
<igx-select class ="cell-select" [(ngModel )]="cell.editValue" [igxFocus ]="true" >
<igx-select-item *ngFor ="let alignment of alignments" [value ]="alignment" >
{{ alignment }}
</igx-select-item >
</igx-select >
</ng-template >
</igx-column >
</igx-grid >
html コピー :host {
display : block;
padding : 16px ;
}
.cell-select {
width : 100% ;
height : 100% ;
}
scss コピー
セルテンプレート igxCell
は、編集モード外での列のセルの表示方法を制御します。
igxCellEditor
セル編集テンプレート ディレクティブは、編集モードでの列のセルの表示方法を処理し、編集されたセルの編集値を制御します。
任意のタイプのエディター コンポーネントで igxCellEditor
を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネント (igxSelect
、igxCombo
など) ではなく、セル要素にフォーカスが残るためです。これが、igxFocus
ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の 流暢な編集フロー
が維持されます。
列とそのテンプレートの構成方法の詳細については、グリッド列構成 のドキュメントを参照してください。
CRUD 操作
CRUD 操作 を実行した場合、filtering 、sorting 、grouping などのパイプが再適用されるため、ビューが自動的に更新されることに注意してください。
IgxHierarchicalGridComponent
は基本的な CRUD 操作のための簡易な API を提供します。
新しいレコードの追加
Hierarchical Grid コンポーネントは、提供したデータをデータ ソースに追加する addRow
メソッドを公開します。
public addRow ( ) {
const record = this .getNewRecord();
this .hierarchicalGrid.addRow(record, 1 );
}
typescript
データを Hierarchical Grid で更新
Hierarchical Grid のデータ更新は、グリッドでプライマリキーが定義されている場合のみ updateRow
と updateCell
メソッドで行うことができます。セルと行の値またはそのいずれかを各 update
メソッドで直接更新できます。
this .hierarchicalGrid.updateRow(newData, this .selectedCell.cellID.rowID);
this .hierarchicalGrid.updateCell(newData, this .selectedCell.cellID.rowID, this .selectedCell.column.field);
this .selectedCell.update(newData);
const row = this .hierarchicalGrid.getRowByKey(rowID);
row.update(newData);
typescript
Hierarchical Grid からデータを削除
deleteRow()
メソッドは、プライマリキーが定義されている場合に指定した行のみを削除することに注意してください。
this .hierarchicalGrid.deleteRow(this .selectedCell.cellID.rowID);
const row = this .hierarchicalGrid.getRowByIndex(rowIndex);
row.delete();
typescript
igx-hierarchical-grid に関係なく、ボタンのクリックなどのユーザー インタラクションに関連付けできます。
<button igxButton igxRipple (click )="deleteRow($event)" > Delete Row</button >
html
編集イベントでのセル検証
グリッドの編集イベントを使用して、ユーザーがグリッドを操作する方法を変更できます。
この例では、cellEdit
イベントにバインドすることにより、入力されたデータに基づいてセルを検証します。セルの新しい値が事前定義された基準を満たしていない場合、イベントをキャンセルすることでデータソースに到達しないようにします (event.cancel = true
)。また、IgxToast
を使用してカスタム エラーメッセージを表示します。
最初に必要なことは、グリッドのイベントにバインドすることです。
<igx-hierarchical-grid (cellEdit )="handleCellEdit($event)"
... >
...
</igx-hierarchical-grid >
html
cellEdit
は、セルの値がコミットされる直前に発生します。handleCellEdit
の定義では、アクションを実行する前に特定の列を確認する必要があります。
export class MyHGridEventsComponent {
public handleCellEdit (event: IGridEditEventArgs ) {
const today = new Date ();
const column = event.column;
if (column.field === 'Debut' ) {
if (event.newValue > today.getFullYear()) {
this .toast.message = 'The debut date must be in the past!' ;
this .toast.open();
event.cancel = true ;
}
} else if (column.field === 'LaunchDate' ) {
if (event.newValue > new Date ()) {
this .toast.message = 'The launch date must be in the past!' ;
this .toast.open();
event.cancel = true ;
}
}
}
}
typescript
ここでは、2 つの列を検証しています。ユーザーがアーティストのデビュー 年またはアルバムの発売日 を変更しようとした際に、グリッドは今日よりも後の日付を許可しません。
以下は、上記の検証が igx-hierarchical-grid
に適用された結果のデモです。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxHierarchicalGridModule,
IgxToastModule
} from "igniteui-angular" ;
import { HGridEditingEventsComponent } from "./hierarchical-grid/hierarchical-grid-editing-events/hierarchical-grid-editing-events.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
HGridEditingEventsComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxHierarchicalGridModule,
IgxToastModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' ;
import { IGridCreatedEventArgs, IGridEditEventArgs,
IgxGridBaseDirective, IgxHierarchicalGridComponent, IgxToastComponent, VerticalAlignment } from 'igniteui-angular' ;
import { Subject } from 'rxjs' ;
import { takeUntil } from 'rxjs/operators' ;
import { SINGERS } from '../../data/singersData' ;
import { Singer } from '../models' ;
@Component ({
selector : 'app-hierarchical-grid-editing-events' ,
styleUrls : ['./hierarchical-grid-editing-events.component.scss' ],
templateUrl : 'hierarchical-grid-editing-events.component.html'
})
export class HGridEditingEventsComponent implements OnInit , OnDestroy {
@ViewChild (IgxHierarchicalGridComponent, { read : IgxHierarchicalGridComponent, static : true })
public grid: IgxHierarchicalGridComponent;
@ViewChild (IgxToastComponent, { read : IgxToastComponent, static : true })
public toast: IgxToastComponent;
public localData: Singer[];
private destroy$ = new Subject();
constructor ( ) { }
public ngOnInit(): void {
this .localData = SINGERS;
this .toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
}
public ngOnDestroy(): void {
this .destroy$.next();
this .destroy$.complete();
}
public formatter = (a ) => a;
public handleCellEdit (event: IGridEditEventArgs ) {
const today = new Date ();
const column = event.column;
if (column.field === 'Debut' ) {
if (event.newValue > today.getFullYear()) {
this .toast.open('The debut date must be in the past!' );
event.cancel = true ;
}
} else if (column.field === 'LaunchDate' ) {
if (event.newValue > new Date ()) {
this .toast.open('The launch date must be in the past!' );
event.cancel = true ;
}
}
}
public handleCreate (event: IGridCreatedEventArgs ) {
event.grid.cellEdit.pipe(takeUntil(this .destroy$)).subscribe((e ) => this .handleCellEdit(e));
}
}
ts コピー <igx-hierarchical-grid [igxPreventDocumentScroll ]="true" [data ]="localData" [autoGenerate ]="false"
height ="600px" width ="100%" primaryKey ="Artist" (cellEdit )="handleCellEdit($event)" >
<igx-column field ="Artist" dataType ="string" > </igx-column >
<igx-column field ="HasGrammyAward" header ="Has Grammy Award?" [editable ]="true" dataType ="boolean" >
</igx-column >
<igx-column field ="Debut" [editable ]="true" dataType ="number" [formatter ]="formatter" > </igx-column >
<igx-column field ="GrammyNominations" header ="Grammy Nominations" [editable ]="true" dataType ="number" > </igx-column >
<igx-column field ="GrammyAwards" header ="Grammy Awards" [editable ]="true" dataType ="number" > </igx-column >
<igx-row-island [height ]="null" key ="Albums" primaryKey ="Album" [autoGenerate ]="false" (gridCreated )="handleCreate($event)" >
<igx-column field ="Album" [editable ]="true" dataType ="string" > </igx-column >
<igx-column field ="LaunchDate" header ="Launch Date" [editable ]="true" dataType ="date" > </igx-column >
<igx-column field ="BillboardReview" header ="Billboard Review" [editable ]="true" dataType ="number" > </igx-column >
<igx-column field ="USBillboard200" header ="US Billboard 200" [editable ]="true" dataType ="number" > </igx-column >
</igx-row-island >
</igx-hierarchical-grid >
<igx-toast > </igx-toast >
html コピー :host {
display : block;
padding : 16px ;
}
scss コピー
スタイル設定
IgxHierarchicalGrid で Ignite UI for Angular テーマ ライブラリ
を使用してセルのスタイルを設定できます。グリッドの grid-theme
は、ユーザーがグリッドのさまざまな側面をスタイル設定できる広範なプロパティを公開します。
以下の手順では、編集モードでグリッドのセルのスタイルを設定する方法と、それらのスタイルの範囲を設定する方法について説明します。
Ignite UI テーマ ライブラリ
を使用するには、まずグローバル スタイルでテーマ index
ファイルをインポートする必要があります。
スタイル ライブラリのインポート
@use "igniteui-angular/theming" as *;
scss
以上で Ignite UI for Angular テーマ エンジンによって公開されているすべての機能を使用できます。
パレットの定義
インデックス ファイルをインポート後、カスタム パレットを作成します。好きな 3 つの色を定義し、それらを使用して palette
でパレットを作成しましょう。
$white : #fff ;
$blue : #4567bb ;
$gray : #efefef ;
$color-palette : palette(
$primary : $white ,
$secondary : $blue ,
$surface : $gray
);
scss
テーマの定義
これで、パレットを使用してテーマを定義できます。セルは grid-theme
によってスタイル設定されているため、それを使用して IgxHierarchicalGrid のテーマを生成できます。
$custom-grid-theme : grid-theme(
$cell-editing-background : $blue ,
$cell-edited-value-color : $white ,
$cell-active-border-color : $white ,
$edit-mode-color : color($color-palette , "secondary" , 200 )
);
scss
テーマを適用
テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに sass
@include
ステートメントを使用することです。
@include grid ($custom-grid-theme );
scss
デモ
上記の手順に加えて、セルの編集テンプレートに使用されるコントロールのスタイルを設定することもできます (input-group
、datepicker
および checkbox
)。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxHierarchicalGridModule } from "igniteui-angular" ;
import { HGridEditingStyleComponent } from "./hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
HGridEditingStyleComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxHierarchicalGridModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxHierarchicalGridComponent } from 'igniteui-angular' ;
import { SINGERS } from '../../data/singersData' ;
import { Singer } from '../models' ;
@Component ({
selector : 'app-hierarchical-grid-editing-style' ,
styleUrls : ['./hierarchical-grid-editing-style.component.scss' ],
templateUrl : 'hierarchical-grid-editing-style.component.html'
})
export class HGridEditingStyleComponent implements OnInit {
@ViewChild (IgxHierarchicalGridComponent, { static : true })
private hierarchicalGrid: IgxHierarchicalGridComponent;
public localdata: Singer[];
public singer: Singer;
constructor ( ) { }
public ngOnInit(): void {
this .localdata = SINGERS;
}
public formatter = (a ) => a;
}
ts コピー <div class ="grid__wrapper" >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" #hierarchicalGrid class ="hgrid" [data ]="localdata" [autoGenerate ]="false" [height ]="'600px'"
[width ]="'100%'" >
<igx-column field ="Artist" [editable ]="true" [dataType ]="'string'" > </igx-column >
<igx-column field ="HasGrammyAward" header ="Has Grammy Award?" [editable ]="true" [dataType ]="'boolean'" >
</igx-column >
<igx-column field ="Debut" [editable ]="true" dataType ="number" [formatter ]="formatter" > </igx-column >
<igx-column field ="GrammyNominations" header ="Grammy Nominations" [editable ]="true" dataType ="number" > </igx-column >
<igx-column field ="GrammyAwards" header ="Grammy Awards" [editable ]="true" dataType ="number" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Albums'" [autoGenerate ]="false" >
<igx-column field ="Album" [editable ]="true" [dataType ]="'string'" > </igx-column >
<igx-column field ="LaunchDate" header ="Launch Date" [editable ]="true" [dataType ]="'date'" > </igx-column >
<igx-column field ="BillboardReview" header ="Billboard Review" [editable ]="true" dataType ="number" > </igx-column >
<igx-column field ="USBillboard200" header ="US Billboard 200" [editable ]="true" dataType ="number" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Songs'" [autoGenerate ]="false" >
<igx-column field ="Number" header ="No." [editable ]="true" dataType ="number" > </igx-column >
<igx-column field ="Title" [editable ]="true" [dataType ]="'string'" > </igx-column >
<igx-column field ="Released" [editable ]="true" [dataType ]="'date'" > </igx-column >
<igx-column field ="Genre" [editable ]="true" [dataType ]="'string'" > </igx-column >
</igx-row-island >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー @use '../../../variables' as *;
$white : #fff ;
$blue : #4567bb ;
$color-palette : palette($primary : $white , $secondary : $blue , $surface : #fff );
$grid-theme : grid-theme(
$cell-editing-background : $blue ,
$cell-edited-value-color : $white ,
$cell-active-border-color : $white ,
$edit-mode-color : color($color-palette , "secondary" , 200 )
);
$input-theme : input-group-theme(
$filled-text-color : $white ,
$focused-text-color : $white ,
$idle-text-color : $white ,
$idle-bottom-line-color : $white ,
$focused-bottom-line-color : $white ,
$interim-bottom-line-color : $white ,
$hover-bottom-line-color : $white ,
$box-background : $blue
);
$checkbox-theme : checkbox-theme(
$empty-color : color($color-palette , "secondary" , 200 ),
$fill-color : $white ,
$tick-color : $blue
);
$datepicker-theme : calendar-theme(
$date-selected-text-color : $white ,
$date-selected-background : $blue
);
:host {
@include palette($color-palette );
::ng-deep {
@include css-vars($checkbox-theme );
@include css-vars($input-theme );
@include css-vars($datepicker-theme );
@include css-vars($grid-theme );
}
}
.grid__wrapper {
margin : 0 auto;
padding : 16px ;
}
scss コピー
このサンプルは、Change Theme
(テーマの変更) から選択したグローバル テーマに影響を受けません。
API リファレンス
その他のリソース