web-dev-qa-db-ja.com

Bootstrapドロップダウンメニュークリップメニューを含むag-Gridセル

コンテキストメニューを表示する右側のセルにデータを表示するようにag-Gridを設定しています。このコンテキストメニューは、ボタンによってトリガーされ、Bootstrapドロップダウンメニューを使用します。クリックすると、ボタンはメニューの表示を正しくトリガーしますが、ag-Gridセルはドロップダウンを非表示にします。オーバーフローを強制する：親要素とグリッドセル自体に表示されますが、成功しません。親要素にz-indexを設定しようとしても、それを機能させることができませんでした。私が持っていたのは、overflow：scrollを設定することです。セルの内容をスクロールすると、ドロップダウンが表示されます。正確にユーザーフレンドリーではありません。提案はありますか？注：これはすでに試みました： CSS ：Bootstrap drowpdownがグリッドセルの後ろに隠れる

あなたが持っている提案をありがとう！

twitter-bootstrapag-grid
4
kpinkerman

参照された投稿からの簡単な方法： isPopup function

isPopup:function(){
  return true;
}

更新：plnkrサンプル

enter image description here

働いた plnkr sample

0
un.spike

isPopupは編集可能なセルでのみ機能します。

Ag-grid-communityバージョン19の編集不可能なセルでbootstrapドロップダウンを使用するには：

  1. 適用overflow: visibleから.ag-cell、またはよりよく、cellClassを列定義のセルに適用します。 .actions-button-cell
  2. フォーカスされた行がフォーカスされていない行の上に表示されるようにZインデックスを設定します。

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サンプル を参照してください

6
peregrination

Ag-gridのセルにドロップダウンを実装するには、「cellRenderer」だけを使用できます。 「cellEditor」は必要ありません

  • 「コンポーネント名」.ts
@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,
    };
  } 
}
  • 'コンポーネント名' .html
<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,
    };
  }
0
Ricardo Magalhães

これに対する私の解決策は、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();

                    }
                }

うまくいけば、行を展開せずに、ドロップダウンをグリッド上に表示できるようにするためのより良いソリューションを提示できます。

0
kpinkerman

セルのスタイルオーバーフローが非表示になっているときに発生します。 overflow:visibleプロパティを追加してそれをオーバーライドします。angular2ag-gridでは、セルスタイルをoveflow:visibleに追加できます。

cellStyle: { "overflow": 'visible' }

0
Pramod C

私は多くのオプションを試した後、それをうまくやりました。また、1つのセルにbootstrapドロップダウンがあり、一番上の行のドロップダウンが切り取られていました（他の行の下に表示されていました）。

これを解決する秘訣は次のとおりです。

  1. 現在フォーカスされている行の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ですべてを解決しようとします。

0
Sudhir Kaushik