Wie füge ich ein Dropdown-Menü in jeder Zeile einer Spalte für ag-Grid

Question

Ich bin Ag-Grid verwenden und ich möchte eine Spalte hinzufügen, in der jede Zeile ein Dropdown hat, sehe ich, wie Sie ein Dropdown hinzufügen Spalte nur einmal, aber nicht für jede Zeile.

Answer 1

Wenn Sie auf Enterprise-Version sind, können Sie über das Kontextmenü, hier ist ein Ausschnitt aus einer App arbeite ich an

function getContextMenu(params){ 
    var result; 

     switch (params.column.getId()) { 
      case 'Title': 
       result = [ 
        'copy', 
        'toolPanel' 
       ]; 

und in gridOptions

$scope.gridOptions = { 
    columnDefs: colDefs, 
    rowData: null, // I set data later 
    getContextMenuItems: getContextMenu 

So in meinem Kontext Menü Funktion sehe ich, wo der Benutzer geklickt hat, wenn er auf die Zeile Titel ich nur die Kopie und Werkzeug Panel-Elemente, und dann kann ich weiterhin "Fällen" für meinen Schalter hinzufügen und unique Menüelemente für jede Zeile festlegen.

Answer 2

sehen, dieses Bild:

durch diesen bestimmten Link gehen und Dropdown Siehe ag-grid

in diesem Bild sehen füge ich DropDown und Codierung Teil dieser:>

$scope.gridOptions = { 
    columnDefs: [ 
     { headerName: "CompanyName", field: "CompanyName", editable: true, width: 130 }, 
     { headerName: 'ProductName', field: "ProductName", editable: true, width: 130 }, 
     { headerName: "ProjectID", field: "ProjectID", editable: true, width: 100 }, 

     { headerName: "Status", field: "Status", editable: true, width: 100 }, 
     { headerName: "Delete", field: "Delete", editable: true, editable: false, width: 100, cellRenderer: customEditorImageWQ }, 
     { headerName: "Update", field: "Update", editable: true, editable: false, width: 100, cellRenderer: customEditor }, 
     { headerName: "CompanyName", field: "CompanyName", width: 150, cellRenderer: CustomCombobox }, 
     { headerName: "TextBox", field: "SimpleTextbox", width: 180, cellRenderer: CustomTextbox }, 
     { headerName: "Checkbox", field: "SimpleCheck", width: 100, cellRenderer: CustomCheckbox }], 
    // { "headerName": "Support Weld", "field": "SupportWeld", "width": 110, "editable": false, "newValueHandler": "", "cellRenderer": "cellRendererCheckBox", "headerGroup": null, "ReadOnly": "false", "Enabled": "true", "DefaultValue": "", "Default": "" }], 

    rowData: null, 
    enableColResize: true, 
    enableSorting: true, 
    rowSelection: 'multiple', 
    angularCompileRows: true, 
    rowDeselection: true, 
    onRowClicked: RowClick, 
    enableFilter: true, 
    editable: true, 
    suppressRowClickSelection: true, 

}; 

function **CustomCombobox**(params) { 
    var rowIndex = params.rowIndex; 

    var Column = params.eGridCell.attributes.colId; 
    var WeldGridData = $scope.gridOptions.rowData; 

    var editing = false; 
    //create select element using javascript 

    var eSelect = document.createElement("select"); 
    eSelect.setAttribute('class', 'custom-select form-control'); 
    eSelect.setAttribute('style', 'padding:0px'); 
    eSelect.setAttribute('name', params.colDef.field); 
    eSelect.setAttribute('id', params.colDef.field + "_" + rowIndex); 
    //get the value of the select option 
    var value = params.data.CompanyID; 

    var param = { 
     obj: [{ "Key": "navangracreation", value: "NavCreations" }, { "Key": "Angra", value: "Angra" }] 
    } 

    //create the default option of the select element 
    var eOption = document.createElement("option"); 
    eOption.text = "Select"; 
    eOption.value = ""; 
    eSelect.appendChild(eOption); 

    if (params.colDef.field == "CompanyName") { 
     CompanyName = $scope.CompanyList; 
     var companyid = params.data.CompanyID; 
     var eOptionVal = document.createElement("option"); 

     //Statical set data in grid ComboBox 
     eOptionVal.text = "Angra"; 
     eOptionVal.value = 1; 
     eSelect.appendChild(eOptionVal); 

     var eOption = document.createElement("option"); 
     eOption.text = "Navcreation"; 
     eOption.value = "2"; 
     eSelect.appendChild(eOption); 
    } 
    return eSelect; 
    }