Edit column style in syncfusion Grid in angularjs

Question

I am trying to make the syncfusion grid breathe a little by adding more margin or padding to the data that is being shown in the grid but completely unable to do it. I have tried many things like cssClass and then adding a div inside the e-column but nothing is working for me.

I am really stuck at this for a day now. Can you please help me figure this out.

The code is as follows :

<div style="color:black;" ej-grid e-datasource="FarmersModal" e-gridlines="vertical" 
e-allowfiltering="true" e-allowpaging="true" e-allowsorting="true" e-enableColumnResizing="true" 
e-allowselection="true" e-filtersettings-filterType="excel">

      <div e-columns>
         <e-column e-type="string" e-field="FarmerId" e-headertext="vis" e-width="10" margin="30px"></e-column>
         <div e-column e-type="string" e-field="FarmerId" e-headertext="Farmer Id" e-width="10" ></div>
         <div e-column e-type="string" e-field="FarmerName" e-headertext="Farmer Name" e-width="20"></div>
         <div e-column e-type="string" e-field="RegistrationId" e-headertext="Registration ID" e-width="20"></div>
         <div e-column e-type="string" e-field="RegistrationDate" e-headertext="Registration Date" e-width="30"></div>



      </div>
</div>

I was trying different ways to make it work so I was using different tags and trying to know how can I do the stuff. I just want to add margin to the table cells so that the table data doesn't looks cramped.

Thanks in advance and let me know where I am doing the mistake.

Answer 1

So based on your requirement we have prepared a sample and achieved your requirement by using external CSS. Please refer the below code example and sample for more information.

<style>
    .e-grid .e-gridcontent .e-rowcell {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
</style>