Removing the Delete button from Edit Grid using custom CSS

This tutorial demonstrates how to use custom CSS to remove the delete button from an Edit Grid component.

1. In the same form where you added the Edit Grid, add an HTML Element component input the below CSS snippet:

   <p></p>
   <style>
   .my-edit-grid .removeRow {
       display: none;
   }
   </style>

   This code snippet makes items with the class removeRow (representing delete buttons) invisible on the webpage. It does this by using the class my-edit-grid on their containing elements and setting the display property to none.

2. Hover over the Edit Grid and select Edit JSON.

3. In the Component JSON add a customClass parameter that references the my-edit-grid custom CSS class.

   Insert this parameter before the components parameter.

   "customClass": "my-edit-grid",

   

4. Save the component and the form.