Как использовать выпадающую стрелку, чтобы показать список редакторов Ag Grid Select Select Select ⇐ Javascript

[Anonymous]

Я оцениваю сетку Ag для использования в качестве сетки данных по сравнению с использованием красивого. Одна подвеска-их функция «Select Cell Editor». Я хотел бы изменить его поведение, чтобы вести себя как симпатичный выпадающий список следующим образом: < /p>

Сингл нажмите на ячейку, чтобы выбрать ее только, без раскрывающегося списка. . < /li>
Дважды щелкните ячейку, чтобы показать раскрывающий список. сторона ячейки, чтобы показать раскрывающий список. < /li>
< /ol>
С ячейка или 2) один щелчок на значке стрелки утопления. Опять же, ведут себя, как это, как изнасиловано. В качестве альтернативы вы также можете изменить свойство «singleclickedit» на «true», чтобы потребовать только один щелчок, чтобы отобразить раскрывающий список, но я не хочу этого, потому что он не позволяет вам просто выбрать ячейку без ячейки без ячейки без ячейки. Выпадающий список показывает. Затем я использовал рендеринг ячейки, чтобы добавить значок выпадающей стрелки (с помощью Bootstrap) и попытался добавить скрипт в этот значок, чтобы отобразить раскрывающий список при нажатии. Однако у меня две проблемы. Я не могу выяснить сценарий, необходимый для отображения раскрывающегося списка, когда нажимается значок. < /Li>
< /ol>
Есть идеи? Или есть ли настройка конфигурации, которую я могу использовать там, где мне не придется использовать рендеринг ячейки? Или рендеринг ячейки единственный вариант? Br />

Код: Выделить всё

let gridApi;

class ClassDropdown {
init(params) {
this.eGui = document.createElement("div");
this.eGui.innerHTML = `${params.value}[i][/i]`;
this.iconChevron = this.eGui.querySelector(".bi-chevron-down");
this.iconChevron.onclick = () => alert("this should show the dropdown list");
}

getGui() {
return this.eGui;
}

refresh() {
return false;
}

destroy() { }
};

const languages = ["English", "Spanish", "French", "Portuguese"];

const gridOptions = {
defaultColDef: { width: 200, editable: true, },
columnDefs: [
{ field: "language", cellEditor: "agRichSelectCellEditor", cellEditorParams: { values: languages, }, singleClickEdit: true },
{ field: "test", cellEditor: "agRichSelectCellEditor", cellEditorParams: { values: languages, }, cellRenderer: ClassDropdown, cellClass: 'my-class'  },
],
rowData: [
{ language: "English", test: "English" },
{ language: "Spanish", test: "English" },
{ language: "French", test: "English" },
{ language: "English", test: "English" }
],
};

document.addEventListener("DOMContentLoaded", () => {
const gridDiv = document.querySelector("#myGrid");
gridApi = agGrid.createGrid(gridDiv, gridOptions);
});

Ссылки:
Ag Grid выпадает пример:
https: //www.ag-grid.com/javascript-data-grid/pr ... t/образное. https://handsontable.com/docs/javascrip ... cell-type/

Подробнее здесь: https://stackoverflow.com/questions/794 ... ditor-list