Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to create Placeholder in AG-Grid Text field

I have an editable ag-grid. How can I add placeholders to empty cells (they should disappear when cells are edited)?

cellEditor: 'agTextCellEditor',
    cellEditorParams: (params) => {
        debugger;
    const { filterOptionKey, placeholder } = params;
    return `Enter the Athelte`;
  },
  filter: 'agNumberColumnFilter',
        filterParams: {
            filterPlaceholder: 'Enter the Athelte '
        }

},
we try the above code but its not working

Tags:

2

Answers


  1. 0

    We can use valueFormatter to do this like so!

    {
  headerName: 'Text Editor',
  field: 'color1',
  valueFormatter: (params) => params.value || 'Click to edit!',
  cellEditor: 'agTextCellEditor',
  cellEditorParams: {
    maxLength: 20,
  },
},

    plunkr

    Login or Signup to reply.
  2. 0 
    const columnDefs = [
  {
    headerName: 'Athlete',
    field: 'athlete',
    editable: true,
    cellEditor: 'agTextCellEditor',
    valueFormatter: function (params) {
      const isEditing = params.node.gridOptions.api.getEditingCells().length > 0;
      return isEditing ? params.value : 'Enter the Athlete';
    },
  },
  // Other columns...
];

const gridOptions = {
  // other options...
};

// Create the grid
new agGrid.Grid(gridDiv, gridOptions);

// Set the data
gridOptions.api.setRowData(yourRowData);

    In this example, the valueFormatter checks whether any cell is being edited using params.node.gridOptions.api.getEditingCells().length > 0. If a cell is being edited, it displays the actual value; otherwise, it displays the placeholder text. Note that this approach might not be as visually clean as using custom cell renderers, but it’s a simpler solution using the available options in ag-Grid.
    Here showing data ...

    • Here, showing data only…

    here where is nothing at there showing Click to edit! and you can edit...

    • Here, where is nothing at there showing Click to edit! and you can edit…
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search