how to set up cell padding manually in data grid?

[CZ]

Hi,

In our project, the columns in data grid is more than 100, the default padding in the cell of data grid is too long, see below image how can we set up this value manually, such as '2px'.

Thanks,

[Balaji Sekar]

Hi Zhao, 

 

Greetings from the Syncfusion support. 

 

In dataBound event we reduced the cell spacing in the Grid row cell using the Grid's autoFitColumns method.  In the example below, we defined the autofit property to Grid column , that will render the column width based on the content of the grid column cell, and we changed the default cell spacing (padding in left and right of cell) used by the CSS style property. For more details please refer to the example and sample code below. 

[App.Vue] 

methods: { 

    dataBound() { 

      var gridInstance = document.getElementsByClassName("e-grid")[0] 

        .ej2_instances[0]; 

      gridInstance.gridLines = "Both"; 

      gridInstance.autoFitColumns([ 

        "OrderID", 

        "CustomerID", 

        "ShipCity", 

        "ShipCountry", 

        "Freight" 

      ]); 

    } 

  }, 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

 

.e-grid .e-rowcell, 

.e-grid .e-headercell { 

  padding-left: 2px !important; 

  padding-right: 2px !important; 

} 

</style> 

 

Sample link: https://codesandbox.io/s/281713-requirements-0l7yr 

Help Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#autofitcolumns 

https://ej2.syncfusion.com/vue/documentation/api/grid/#databound 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar 

[CZ]

Hi Balaji Sekar, 

It works, 

Thank you

zhao

[Balaji Sekar]

Hi Zhao, 

 

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

 

Regards, 

Balaji Sekar