Skip to main content

​
How to add Velt attributes to AG Grid cells?

Some Velt features like live selection require adding Velt specific attributes to the cell elements. Here’s how you can do it:
  1. In your AG Grid column definitions, use the cell renderer property to customize the cell rendering.
  2. Within the cell renderer, add the necessary Velt attributes to the cell element.
Here’s a code sample that shows how to add the data-velt-live-selection-enabled attribute and other required attributes to AG Grid cell div tags: 
colDefs: ColDef[] = [
  {
    field: "FIELD_NAME",
    cellRenderer: (params: any) => {
      // Let AG Grid render the default cell, then modify the outer div
      setTimeout(() => {
        const cellElement = params.eGridCell;
        // Add Velt attributes to the parent cell div
        cellElement.setAttribute('data-velt-live-selection-enabled', 'true');
        // Add other Velt attributes as required
      }, 0);  // Timeout to wait for the DOM to be ready
      return params.value;  // Use the default renderer, which is the text value
    },
    editable: true, // Set to true if the column is editable
  },
];