コンテキストメニューを表示する右側のセルにデータを表示するようにag-Gridを設定しています。このコンテキストメニューは、ボタンによってトリガーされ、Bootstrapドロップダウンメニューを使用します。クリックすると、ボタンはメニューの表示を正しくトリガーしますが、ag-Gridセルはドロップダウンを非表示にします。オーバーフローを強制する:親要素とグリッドセル自体に表示されますが、成功しません。親要素にz-indexを設定しようとしても、それを機能させることができませんでした。私が持っていたのは、overflow:scrollを設定することです。セルの内容をスクロールすると、ドロップダウンが表示されます。正確にユーザーフレンドリーではありません。提案はありますか?注:これはすでに試みました: CSS :Bootstrap drowpdownがグリッドセルの後ろに隠れる
あなたが持っている提案をありがとう!
isPopup
は編集可能なセルでのみ機能します。
Ag-grid-communityバージョン19の編集不可能なセルでbootstrapドロップダウンを使用するには:
overflow: visible
から.ag-cell
、またはよりよく、cellClass
を列定義のセルに適用します。 .actions-button-cell
CSS:
.actions-button-cell {
overflow:visible;
}
.ag-row {
z-index: 0;
}
.ag-row.ag-row-focus {
z-index: 1;
}
これにより、ドロップダウンがセルおよび行の外に流れることができます。
グリッドの外側にもドロップダウンフローを配置したい場合は、次のように追加できます。
.ag-root,
.ag-body-viewport,
.ag-body-viewport-wrapper {
overflow: visible !important;
}
plnkrサンプル を参照してください
Ag-gridのセルにドロップダウンを実装するには、「cellRenderer」だけを使用できます。 「cellEditor」は必要ありません
@Component({
selector: 'app-project-status-management',
templateUrl: './project-status-management.component.html',
styleUrls: ['./project-status-management.component.scss']
})
export class ProjectStatusManagementComponent implements OnInit {
// Template of the Grid
@ViewChild('agGrid', { static: false }) agGrid: AgGridAngular;
// Template to the Select (Dropdown)
@ViewChild('templateCell', { static: true }) templateCell: TemplateRef<any>;
columnDefs: any;
frameworkComponents: any;
gridContext: any;
data: any[];
// Values shown on Dropdown
availableStatus: WorkflowStatus[] = [
{
workflowStatusId: 1,
name: 'InDesign',
description: 'In Design'
},
{
workflowStatusId: 3,
name: 'SourceReviewed',
description: 'Source Reviewed'
},
{
workflowStatusId: 5,
name: 'Translated',
description: 'Translated'
},
];
ngOnInit() {
this.setUpGrid();
// Set the context of the ag-grid
this.gridContext = {
availableStatus: this.availableStatus,
};
}
setUpGrid() {
// setup columns
this.columnDefs = [
{
colId: 'projectStatus',
headerName: 'Status',
field: 'workflowStatus.workflowStatusId',
cellRenderer: 'GridActionButtonCell',
cellRendererParams: {
ngTemplate: this.stringStatusCell
},
width: 170,
}];
this.frameworkComponents = {
GridActionButtonCell: GridActionButtonComponent,
};
}
}
<div>
...
<ag-grid-angular #agGrid
[rowData]="data"
[columnDefs]="columnDefs" [context]="gridContext"
[suppressRowClickSelection]="true"
...
[frameworkComponents]="frameworkComponents">
</ag-grid-angular>
...
</div>
<ng-template #templateCell let-row let-context="params">
<div class="d-flex flex-row" style="height: 100%;">
<select [(ngModel)]="row.workflowStatus.workflowStatusId">
<option *ngFor="let status of context.context.availableStatus" [ngValue]="status.workflowStatusId">{{status.description}}</option>
</select>
</div>
</ng-template>
要素を含むテンプレート '#templateCell'を定義します。
ノート:
1-"let-row" =>グリッドの各rowData(この場合はthis.data [i]になります)
2-"let-context =" params "=>変数を渡すためにグリッドに割り当てたコンテキストです。この場合、「availableStatus」というコンテキストに変数を設定します。
availableStatus: WorkflowStatus[] = [
{
workflowStatusId: 1,
name: 'InDesign',
description: 'In Design'
},
{
workflowStatusId: 3,
name: 'SourceReviewed',
description: 'Source Reviewed'
},
{
workflowStatusId: 5,
name: 'Translated',
description: 'Translated'
},
];
ngOnInit() {
....
this.gridContext = {
availableStatus: this.availableStatus,
};
}
これに対する私の解決策は、onCellClickedイベントハンドラーを追加して、フィールド(名前: 'actions')をクリックしたときに行の高さを変更することでした。
onCellClicked: function(params) {
if(params.column.colId == 'actions'){
var row = gridOptions.api.getDisplayedRowAtIndex(params.rowIndex);
if(row.rowHeight != 200) {
row.setRowHeight(200);
} else {
gridOptions.api.resetRowHeights();
}
gridOptions.api.onRowHeightChanged();
}
}
うまくいけば、行を展開せずに、ドロップダウンをグリッド上に表示できるようにするためのより良いソリューションを提示できます。
セルのスタイルオーバーフローが非表示になっているときに発生します。 overflow:visible
プロパティを追加してそれをオーバーライドします。angular2ag-gridでは、セルスタイルをoveflow:visible
に追加できます。
cellStyle: { "overflow": 'visible' }
私は多くのオプションを試した後、それをうまくやりました。また、1つのセルにbootstrapドロップダウンがあり、一番上の行のドロップダウンが切り取られていました(他の行の下に表示されていました)。
これを解決する秘訣は次のとおりです。
現在フォーカスされている行のZ-indexを高くします。 ag-gridは、相互作用している行にag-row-focus
クラスを適用します。あなたの場合、ボタンをクリックしてドロップダウンを開くと、その行がフォーカスされます。 Zインデックスを高くします
.ag-row.ag-row-level-0.ag-row-position-absolute.ag-row-focus
{z-index: 999;}
ag-row-position-absolute
を含む他の行は、zインデックスを0にします
.ag-row.ag-row-no-focus.ag-row-level-0.ag-row-position-absolute {
z-index: 0;
}
すみません、ラズガイ。私はまずCSSですべてを解決しようとします。