So verwenden Sie Dropdown -Pfeil, um AG Grid Rich auszuwählen.JavaScript

Javascript-Forum
Anonymous
 So verwenden Sie Dropdown -Pfeil, um AG Grid Rich auszuwählen.

Post by Anonymous »

Ich bewertete das AG -Grid als Datennetz im Vergleich zur Verwendung von Martable. Ein Aufhängen ist ihre Funktion "Select Cell Editor". Ich möchte sein Verhalten ändern, um sich wie die mobile Dropdown wie folgt zu verhalten: < /p>

Einklick . < /li>
Doppelklicken Sie auf die Zelle, um die Dropdown-Liste anzuzeigen. < /li>
Einklick Seite der Zelle, um die Dropdown-Liste anzuzeigen. Die Zelle oder 2) Einzelklicks auf dem ertrinken Pfeilsymbol. Verhalten Sie sich wieder so, wie es sich martbar handelt. Alternative können Sie auch die Eigenschaft "SingleClickedit" in "True" ändern, um nur ein einzelnes Klick zu benötigen, um die Dropdown -Liste anzuzeigen In der Dropdown-Liste wird angezeigt. Anschließend habe ich das Zell -Rendering verwendet, um ein Dropdown -Pfeilsymbol (mit Bootstrap) hinzuzufügen, und versuchte das Skript zu diesem Symbol hinzuzufügen, um die Dropdown -Liste beim Klicken anzuzeigen. Ich habe jedoch zwei Probleme. Ich kann das Skript nicht herausfinden, das erforderlich ist, um die Dropdown -Liste anzuzeigen, wenn das Symbol geklickt wird. Oder gibt es eine Konfigurationseinstellung, die ich verwenden kann, wo ich nicht das Zellrendering verwenden müsste? Oder rendert die Zelle die einzige Option? Br />

Code: Select all

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);
});
Links:
Ag -Gitterzelle Dropdown -Beispiel:
https: //www.ag-grid.com/javascript-data-grid/pr ... ch-select/
Handbuch für Handbuch für Handbuch für Handbuch für Handbuch:
https://handsontable.com/docs/javascrip ... cell-type/

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post