angular - AG-GRID tidak dapat menambahkan tombol ikon ke setiap baris ag-grid dan kotak centang multi-seleksi di ag-grid saya

Di setiap baris ag-grid saya, saya perlu menambahkan tombol ikon Angular Material di setiap baris ag-grid. Namun, hasilnya hanya menampilkan tombol teks. Itu tidak menampilkan tombol ikon di ag-grid saya.

Selanjutnya, saya perlu memiliki kotak centang multi pilihan di ag-grid saya. Namun, di ag-grid saya hanya dapat memilih satu baris saja. Bagaimana saya bisa mencapai pemilihan beberapa baris dalam daftar ag-grid?

Berikut adalah kode sumber saya.

  constructor() { 
      this.gridOptions = <GridOptions>{
          paginationPageSize: 18,
          animateRows: true,
    };
      this.gridOptions.columnDefs = [
        {
            field: "",
            width: 110,
            checkboxSelection: true
        },
        {
            headerName: "Distributor Code",
            field: "dist_code",
            width: 330,
            sortingOrder: ["asc", "desc"]
        },
        {
            headerName: "Distributor Name",
            field: "dist_name",
            width: 330,
            sortingOrder: ["asc", "desc"]
        },
        {
            headerName: "Status",
            field: "status",
            width: 330,
            sortingOrder: ["asc", "desc"],

        },
        {
            field: "", 
            width: 110, 
            cellRenderer: function clickNextRendererFunc(){
                    return '<button mat-stroked-button><mat-icon>keyboard_arrow_right</mat-icon></button>';
            }
        }
    ];
    this.gridOptions.rowData = [
        {dist_code: 1, dist_name: "ABC Enterprise", status: "Inactive"},
        {dist_code: 2, dist_name: "Go Go Enterprise", status: "Active"},
        {dist_code: 3, dist_name: "Alibaba Enterprise", status: "Active"},
        {dist_code: 4, dist_name: "Silver Enterprise", status: "Active"},
        {dist_code: 5, dist_name: "George Enterprise", status: "Inactive"},
        {dist_code: 6, dist_name: "Kent Enterprise", status: "Active"},
        {dist_code: 7, dist_name: "NP Enterprise", status: "Active"},
        {dist_code: 8, dist_name: "ED Enterprise", status: "Inactive"},
        {dist_code: 9, dist_name: "DD Enterprise", status: "Active"},
        {dist_code: 10, dist_name: "DF Enterprise", status: "Active"},
        {dist_code: 11, dist_name: "JS Enterprise", status: "Active"},
        {dist_code: 12, dist_name: "JD Enterprise", status: "Inactive"},
        {dist_code: 13, dist_name: "KFC Enterprise", status: "Active"},
        {dist_code: 14, dist_name: "MCD Enterprise", status: "Inactive"},
        {dist_code: 15, dist_name: "AH Enterprise", status: "Active"},
        {dist_code: 16, dist_name: "PP Enterprise", status: "Active"},
        {dist_code: 17, dist_name: "KOH Enterprise", status: "Active"},
        {dist_code: 18, dist_name: "HH Enterprise", status: "Active"},
        {dist_code: 19, dist_name: "GG Enterprise", status: "Inactive"},
        {dist_code: 20, dist_name: "PP2 Enterprise", status: "Active"}
    ]

    }

Berikut adalah tangkapan layar saya

Jawaban #1

Pertanyaan ini memiliki 3 bagian.

1. Aktifkan seleksi ganda:

Anda perlu memiliki atribut ini pada elemen ag-grid-angular: rowSelection="multiple"

2. Aktifkan kotak centang pemilihan:

Pertahankan checkboxSelection: true untuk ColDef pertama, seperti yang sudah Anda lakukan.

3. Tambahkan tombol ikon material angular di setiap baris

Anda perlu menggunakan cellRenderer dan mengembalikan string html untuk ini.

cellRenderer: (data) => {
    return `<mat-icon class="mat-icon material-icons mat-icon-no-color" role="img" aria-hidden="true">
       home</mat-icon>`;
}

Karena cellRenderer mengharapkan string html sebagai pengembalian, Anda tidak boleh hanya menyediakan <mat-icon>home</mat-icon> karena itu tidak akan dikompilasi.

Jawaban #2

Anda saat ini menggunakan string seperti yang ditampilkan, yang Anda butuhkan adalah sebuah komponen atau Anda bisa menggunakan kelas kustom yang menanganinya seperti ini. tapi, karena Anda ingin merender komponen material, Anda tetap harus mengompilasi materialbutton.

Saya sarankan Anda menggunakan cellRendererFramework dan menggunakan komponen kustom, Buat komponen kustom yang disebut RedComponentComponent dan render seperti ini.

cellRendererFramework: RedComponentComponent,//your custom component

Jadi, sel Anda akan terlihat seperti ini

      {
        headerName: "Value",
        field: "value",
        cellRendererFramework: RedComponentComponent,
        width: 100
      },

Dan komponen ini akan memiliki kode tombol Anda, dan itu akan bertanggung jawab atas rendering Anda.

Saya mem-fork demo mereka dan ini ada di sini, kamu bisa melihatnya.

Artikel terkait