Hi Prince Aadil Khan Panwar ,

To hide the numbers, burger bar, and header in a DataGrid component in OutSystems, you can make use of the built-in properties and styles of the DataGrid. Here's how you can achieve this:

1. Open your module in Service Studio and navigate to the screen where the DataGrid is placed.

2. Select the DataGrid component on the screen.

3. In the Properties pane on the right side, locate the "Show Numbers" property. Set it to "No" to hide the numbers column in the DataGrid.

4. Similarly, find the "Show Burger Bar" property in the Properties pane and set it to "No" to hide the burger bar.

5. To hide the header, you can use CSS styles. In Service Studio, click on the "Theme" tab at the bottom of the screen.

6. In the Theme tab, locate the "Extended Properties" section and click on the "+" icon to add a new extended property.

7. Set the "Name" of the extended property to "DataGridClass" (without quotes).

8. In the "Value" field, enter the following CSS class:

   CSS :

   .datagrid th,

   .datagrid .grid-column-header {

     display: none;

   }

   This CSS class targets the header elements of the DataGrid and sets their display to none, effectively hiding them.

9. Save your changes and preview the screen. The numbers column, burger bar, and header of the DataGrid should now be hidden.

By following these steps, you can customize the appearance of the DataGrid in OutSystems and hide the numbers column, burger bar, and header according to your requirements.

there is no such column as you asked to change

Another solution to hide the numbers, burger bar, and header in a DataGrid component in OutSystems is by using custom CSS styles. Here's an alternative approach:

1 Open your module in Service Studio and navigate to the screen containing the DataGrid.

2 Select the DataGrid component on the screen.

3 In the Properties pane on the right side, locate the "CSS Classes" property and click on the ellipsis button (...) to open the CSS Classes Editor.

4 In the CSS Classes Editor, click on the "+" button to add a new CSS class.

5 Enter a class name of your choice, for example, "hide-datagrid-header".

6 Click on the "OK" button to save the CSS class.

7  the Theme tab at the bottom of Service Studio, click on the "+" icon in the "Extended Properties" section to add a new extended property.

8 Set the "Name" of the extended property to "DataGridExtendedClass" (without quotes).

In the "Value" field, enter the following CSS rule:

css

Copy code

.hide-datagrid-header .datagrid th,

.hide-datagrid-header .datagrid .grid-column-header {

  display: none;

}

This CSS rule targets the header elements of the DataGrid when the "hide-datagrid-header" class is applied, and it sets their display to none, effectively hiding them.

Save your changes and preview the screen. Apply the "hide-datagrid-header" class to the DataGrid component either by using a conditional expression or directly in the CSS Classes property.

i can not find the css classes pane also... unfortunately

without display:none can we not do it?

Hi Prince,

For your requirements make the below mentioned DataGrid config changes.

1. Hide the numbers: Set the DataGrid block RowHeader property value as Entities.RowHeader.Empty.
2. Hide header (GroupPanel): Set the DataGrid block HasGroupPanel property value as False.
    
3. Hide column picker (burger bar): Inside the Grid Block OnInitialize event handler, run the below mentioned JS to set the Grid HeadersVisibility property value to 1 using JavaScript node.

JS Snippet:

OutSystems.GridAPI.GridManager.GetGridById($parameters.GridId).provider.headersVisibility = 1;

Demo Screen: DG_GridConfig_Task

I hope this helps you!

Kind regards,

Benjith Sam