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:
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.
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);
}
}
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);
}
}
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"; }, },