javascriptasp.netasp.net-mvcag-grid

I need few features in AG Grid


I have been working on AG Grid in ASP.net MVC. I was able to load grid and its columns too. One feature I wanted to implement was to make a cell editable, provide a drop down list and I was able to do it. But, I wanted to add more features to the drop down list:

  1. I want the cell to render drop down list when I click on it once. Now, I have to double click, then appears the drop down.

  2. I want to set a default placeholder like "select value" or something like that so that the user can understand what to do.

I tried the following:

var options = [{
    key: "0",
    value: "select value"
  }, //added this to make the default value but didn't work as expected.
  {
    key: "1",
    value: "option 1"
  },
  {
    key: "2",
    value: "option 2"
  }
]
var columnsDefs = [{
    headerName: "Id",
    field = "Id"
  },
  {
    headerName: "column 1",
    field = "column1"
  },
  {
    headerName: "select column",
    field: "selectcolumn",
    editable: true,
    cellEditor: "agSelectCellEditor",
    cellEditorParams: {
      values: options.map(option => option.value)
    }
  }
]
var gridOptions = {
  defaultColDef: {
    //default values
  },
  columnDefs: columnDefs,
  rowSelection: 'multiple',
  // the below piece of code helped me with clicking the cell once and the drop down appears. But, still, when i single click, a drop down pops up but again i have to click the drop down to display the list of values.
  onCellClicked: function(params) {
    if (params.column.colId === "selectcolumn") {
      params.api.startEditingCell({
        rowIndex: params.rowIndex,
        colKey: "selectcolumn"
      })
    }
  }
  onGridReady: function(params) {
    params.api.setRowData(rowData);
  }
}

Solution

  • 1.The default for editing a table is double click, which can be set to a single click event:

    var gridOptions = {
     singleClickEdit: true,  // single click event
      defaultColDef: {
        //default values
      },
      columnDefs: columnDefs,
      rowSelection: 'multiple',
      // the below piece of code helped me with clicking the cell once and the drop down appears. But, still, when i single click, a drop down pops up but again i have to click the drop down to display the list of values.
      onCellClicked: function(params) {
        if (params.column.colId === "selectcolumn") {
          params.api.startEditingCell({
            rowIndex: params.rowIndex,
            colKey: "selectcolumn"
          })
        }
      }
      onGridReady: function(params) {
        params.api.setRowData(rowData);
      }
    }
    
    1. As for the default location available, you can try valueFormatter. If params.newValue is null, it means to render 'please slect':

      { headerName: "select column", field: "selectcolumn", editable: true, cellEditor: "agSelectCellEditor", cellEditorParams: { values: options.map((option) => option.value), }, cellRenderer: (params) => { //use this api const { value } = params; return value ?? "please select"; }, },