I'm evaluating AG Grid to use as a data grid versus using Handsontable. One hang-up is their "select cell editor" feature. I'd like to change its behavior to behave like the Handsontable dropdown as follows:

1. Single-click the cell to select it ONLY, without the dropdown list showing.
2. Double-click the cell to show the dropdown list.
3. Single-click on a down arrow icon, located on the far right-hand side of the cell to show the dropdown list.

In sum, I want to show the dropdown list only when the user either 1) double-clicks on the cell or 2) single-clicks on the drown arrow icon. Again, behave like Handsontable does.

It's default behavior is to require double-click on the cell to show the dropdown list which I don't want. As an alternative, you can also change the "singleClickEdit" property to "true" to only require a single click to show the dropdown list, but I don't want that either because it doesn't allow you to just select the cell without the dropdown list showing.

To get my desired behavior I've left the default behavior of requiring double-click to show the dropdown list. Then, I used cell rendering to add a dropdown arrow icon (using Bootstrap) and tried adding script to that icon to show the dropdown list when clicked. However, I'm having the following problem.

How do I show the AG Select Cell Editor dropdown list when the cell render icon is clicked.

Any ideas? Or, is there a configuration setting I can use where I would not have to use cell rendering? Or is cell rendering the only option?

Fiddle, Example, and Links provided below:

Fiddle:

/

Example:

let gridApi

class ClassDropdown {
  init(params) {
    this.eGui = document.createElement("div")
    this.eGui.setAttribute("class", "my-cell-container")
    this.eGui.innerHTML =
      '<span class="my-cell-value">' +
      params.value +
      '</span><i class="my-cell-icon bi bi-caret-down-fill"></i>'
    this.iconChevron = this.eGui.querySelector(".my-cell-icon")
    this.iconChevron.onclick = () => alert("how do i show dropdown list")
  }

  getGui() {
    return this.eGui
  }

  refresh() {
    return false
  }

  destroy() {}
}

const languages = [
  "English",
  "Spanish",
  "French",
  "Portuguese",
  "This has been added to see what happens when the text doesn't fit in the cell and needs to be wrapped",
]

const gridOptions = {
  defaultColDef: { width: 200, editable: true },
  columnDefs: [
    {
      field: "doubleclick",
      headerName: "Double Click",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: { values: languages },
    },
    {
      field: "singleclick",
      headerName: "Single Click",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: { values: languages },
      singleClickEdit: true,
    },
    {
      field: "custom",
      headerName: "Custom",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: { values: languages },
      cellRenderer: ClassDropdown,
      cellClass: "my-cell"
    },
  ],
  rowData: [
    { doubleclick: "English", singleclick: "Spanish", custom: "French" },
    { doubleclick: "Spanish", singleclick: "French", custom: "Portuguese" },
    { doubleclick: "French", singleclick: "Portuguese", custom: "English" },
    {
      doubleclick: "Other",
      singleclick:
        "This has been added to see what happens when the text doesn't fit in the cell and needs to be wrapped",
      custom:
        "This has been added to see what happens when the text doesn't fit in the cell and needs to be wrapped",
    },
    { doubleclick: "Other", singleclick: "Other", custom: "Other" },
  ],
}

Links:

AG Grid cell dropdown example:

/

Handsontable cell dropdown example:

/

I'm evaluating AG Grid to use as a data grid versus using Handsontable. One hang-up is their "select cell editor" feature. I'd like to change its behavior to behave like the Handsontable dropdown as follows:

1. Single-click the cell to select it ONLY, without the dropdown list showing.
2. Double-click the cell to show the dropdown list.
3. Single-click on a down arrow icon, located on the far right-hand side of the cell to show the dropdown list.

In sum, I want to show the dropdown list only when the user either 1) double-clicks on the cell or 2) single-clicks on the drown arrow icon. Again, behave like Handsontable does.

It's default behavior is to require double-click on the cell to show the dropdown list which I don't want. As an alternative, you can also change the "singleClickEdit" property to "true" to only require a single click to show the dropdown list, but I don't want that either because it doesn't allow you to just select the cell without the dropdown list showing.

To get my desired behavior I've left the default behavior of requiring double-click to show the dropdown list. Then, I used cell rendering to add a dropdown arrow icon (using Bootstrap) and tried adding script to that icon to show the dropdown list when clicked. However, I'm having the following problem.

How do I show the AG Select Cell Editor dropdown list when the cell render icon is clicked.

Any ideas? Or, is there a configuration setting I can use where I would not have to use cell rendering? Or is cell rendering the only option?

Fiddle, Example, and Links provided below:

Fiddle:

https://jsfiddle/ptwonbro/uz4jr9sc/6/

Example:

let gridApi

class ClassDropdown {
  init(params) {
    this.eGui = document.createElement("div")
    this.eGui.setAttribute("class", "my-cell-container")
    this.eGui.innerHTML =
      '<span class="my-cell-value">' +
      params.value +
      '</span><i class="my-cell-icon bi bi-caret-down-fill"></i>'
    this.iconChevron = this.eGui.querySelector(".my-cell-icon")
    this.iconChevron.onclick = () => alert("how do i show dropdown list")
  }

  getGui() {
    return this.eGui
  }

  refresh() {
    return false
  }

  destroy() {}
}

const languages = [
  "English",
  "Spanish",
  "French",
  "Portuguese",
  "This has been added to see what happens when the text doesn't fit in the cell and needs to be wrapped",
]

const gridOptions = {
  defaultColDef: { width: 200, editable: true },
  columnDefs: [
    {
      field: "doubleclick",
      headerName: "Double Click",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: { values: languages },
    },
    {
      field: "singleclick",
      headerName: "Single Click",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: { values: languages },
      singleClickEdit: true,
    },
    {
      field: "custom",
      headerName: "Custom",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: { values: languages },
      cellRenderer: ClassDropdown,
      cellClass: "my-cell"
    },
  ],
  rowData: [
    { doubleclick: "English", singleclick: "Spanish", custom: "French" },
    { doubleclick: "Spanish", singleclick: "French", custom: "Portuguese" },
    { doubleclick: "French", singleclick: "Portuguese", custom: "English" },
    {
      doubleclick: "Other",
      singleclick:
        "This has been added to see what happens when the text doesn't fit in the cell and needs to be wrapped",
      custom:
        "This has been added to see what happens when the text doesn't fit in the cell and needs to be wrapped",
    },
    { doubleclick: "Other", singleclick: "Other", custom: "Other" },
  ],
}

Links:

AG Grid cell dropdown example:

https://www.ag-grid/javascript-data-grid/provided-cell-editors-rich-select/

Handsontable cell dropdown example:

https://handsontable/docs/javascript-data-grid/dropdown-cell-type/

• javascript
• ag-grid
• ag-grid-js

1 Answer 1

I figured it out.

The solution was based on the "No-Click Editing" example in the "Editing API" found in their document at the link below (at the bottom of the page):

https://www.ag-grid/javascript-data-grid/cell-editing-start-stop/#editing-api

The key was to use the startEditingCell() API. That will trigger the editing for the cell which triggers the dropdown list to show.

this.iconChevron.onclick = () => { 
    const startEditingParams = {
        rowIndex: params.node.rowIndex,
        colKey: params.column.getId(),
    };
        
    params.api.startEditingCell(startEditingParams);

    // Optional. Added for ASP.NET to stop the form from being submitted.
    event.preventDefault();
}

Updated Fiddle:

https://jsfiddle/ptwonbro/uz4jr9sc/7/

Full example:

let gridApi

class ClassDropdown {
  init(params) {
    this.eGui = document.createElement("div")
    this.eGui.setAttribute("class", "my-cell-container")
    this.eGui.innerHTML =
      '<span class="my-cell-value">' +
      params.value +
      '</span><i class="my-cell-icon bi bi-caret-down-fill"></i>'
    this.iconChevron = this.eGui.querySelector(".my-cell-icon")

    //This is what shows the dropdown list.
    this.iconChevron.onclick = () => { 
        const startEditingParams = {
            rowIndex: params.node.rowIndex,
            colKey: params.column.getId(),
        };
        
        params.api.startEditingCell(startEditingParams);

        // Optional. added for ASP.NET to stop the form from being submitted.
        event.preventDefault();
    }
  }

  getGui() {
    return this.eGui
  }

  refresh() {
    return false
  }

  destroy() {}
}

const languages = [
  "English",
  "Spanish",
  "French",
  "Portuguese",
  "This has been added to see what happens when the text doesn't fit in the cell and needs to be wrapped",
]

const gridOptions = {
  defaultColDef: { width: 200, editable: true },
  columnDefs: [
    {
      field: "doubleclick",
      headerName: "Double Click",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: { values: languages },
    },
    {
      field: "singleclick",
      headerName: "Single Click",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: { values: languages },
      singleClickEdit: true,
    },
    {
      field: "custom",
      headerName: "Custom",
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: { values: languages },
      cellRenderer: ClassDropdown,
      cellClass: "my-cell"
    },
  ],
  rowData: [
    { doubleclick: "English", singleclick: "Spanish", custom: "French" },
    { doubleclick: "Spanish", singleclick: "French", custom: "Portuguese" },
    { doubleclick: "French", singleclick: "Portuguese", custom: "English" },
    {
      doubleclick: "Other",
      singleclick:
        "This has been added to see what happens when the text doesn't fit in the cell and needs to be wrapped",
      custom:
        "This has been added to see what happens when the text doesn't fit in the cell and needs to be wrapped",
    },
    { doubleclick: "Other", singleclick: "Other", custom: "Other" },
  ],
}

Extra note:

To add the dropdown icon and format it so that it stays to the far right AND accounts for long text characters, I used the following CSS. The classes used are applied in both the cell rendering script and the column definitions.

.my-grid .my-cell {
}

.my-grid .my-cell .my-cell-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.my-grid .my-cell .my-cell-container .my-cell-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-grid .my-cell .my-cell-container .my-cell-icon {
  cursor: pointer;
  padding: 0px 2px;
}