Как показать и использовать радиокнопку на ag-grid?

Question

Я изучаю ag-grid и попробовал следующий код, чтобы показать флажок в моем приложении.

В app.component.html:

<ag-grid-angular
  style:"width: 500px; height: 500px;"
  class: "ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  rowSelection="multiple"
  [gridOptions]="gridOptions"
  [gridReady]="onGridReady($event)">
</ag-grid-angular>

В AppComponent.ts:

export class AppComponent implements OnInit {
  @ViewChild('agGrid')
  agGrid: AgGridNg2;
  private gridApi;
  private gridColumnApi;
  gridOptions: GridOptions;

  columnDefs = [
    {headerName: 'Make', field: 'make', checkboxSelection: true}, 
    {headerName: 'Model', field: 'model'}
    {headerName: 'Price', field: 'price'}, 
  ];
  rowData: [
    {make: 'Toyota', model: 'Celica', price: 35000},
    {make: 'Ford', model: 'Mondeo', price: 32000},
    {make: 'Porsche', model: 'Boxter', price: 72000}
  ];

  onGridReady() {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
}

Я хотел показать переключатель вместо флажка.

Answer 1

Для обработки visual детали необходимо создать пользовательскую cellRenderer

Для обработки edit материала вы должны создать пользовательскую cellEditor

Итак, для пользовательского components вам нужно создать .html файл для визуальных вещей и .ts для логической обработки.

простой .html дляпереключатели:

<div class="radio-container">
    <input type="radio" [value]="1" [(ngModel)]="radioValue" (change)="stopEdit()">
    <input type="radio" [value]="2" [(ngModel)]="radioValue" (change)="stopEdit()">
    <input type="radio" [value]="3" [(ngModel)]="radioValue" (change)="stopEdit()">
</div>

и .ts вы должны обрабатывать ICellEditorComp functions:

1. agInit - для инициализации и привязки существующего значения к вашей модели
2. isPopup - будет ли это окно popup или внутри ячейки
3. getValue - этот function вернет значение после stopEditing api-функция выполнения

простая .ts

private params: any;
public radioValue: number;

agInit(params: any): void {
    this.params = params;
    this.radioValue = params.value;
}

getValue(): any {
    return this.radioValue;
}

isPopup(): boolean {
    return true;
}

stopEdit() {
  alert(`Value changed to: ${this.radioValue}`);
  this.params.api.stopEditing();
}

Не забывайте, что пользовательский components должен быть включен в frameworkComponents внутри gridOptions или как [frameworkComponents] html ag-grid property.

Worked plnkr sample

Обновление: row-selection via radio-button inside cellRenderer

NOT SELECTED
<input type="radio" [(checked)]="!params.node.selected"  (change)="handleChange()">
SELECTED
<input type="radio" [(checked)]="params.node.selected" (change)="handleChange()">
{{params.value}}

handleChange() {
  this.params.node.setSelected(!this.params.node.selected)
}

Кроме того, имейте в виду, что в этом случае мы неПри использовании editor логика может обрабатываться только через renderer

Обработано Пример PLNKR

Answer 2

Шаг 1: В columnDefs: {checkboxSelection: false} // Добавьте это к вашему объекту

Шаг 2: Добавьте это к тому же объекту, где вы добавили checkboxSelection

cellRenderer: function cellTitle(params) {
  let cellValue = '<div class="ngSelectionCell"><input name="selected" type="radio"></div>';
  return cellValue;
},

Шаг3: Добавьте этот код в ваш локальный файл CSS:

.ag-body {
  .ag-row {
    .ag-cell {
      input[type=checkbox]:checked:after, 
      input[type=radio]:checked:after {
        display: none;
       }
      input[type=checkbox]:after, input[type=radio]:after {
        display: none;
      }
    }
  }
}

Answer 3

Вы всегда можете использовать свойство rowSelection в вашем AppComponent.ts.просто измените свой атрибут с нескольких на один.Таким образом, флажок будет вести себя как переключатель.

rowSelection: 'single',