We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Space on left and right of Divider




1. I can see the default margin/padding applied to columnHeader's divider/cell. 
Is there a way i can remove that space from coulmnHeader.

2. Also can i set the columnHeader cell's width to wrap the content/text inside it.


3 Replies 1 reply marked as answer

RS Rajapandiyan Settu Syncfusion Team October 10, 2022 07:13 AM

Hi Neha,


Thanks for contacting Syncfusion support.


Query #1: I can see the default margin/padding applied to columnHeader's divider/cell. Is there a way i can remove that space from coulmnHeader.

By using the following CSS you can customize the padding and margin of header cells.

 

[index.css]

/* customize header cell's padding and margin */

.e-grid .e-gridheader tr th:first-child {

  padding-left: 0;

}

 

.e-grid .e-gridheader tr th:last-child {

  padding-right: 0;

}

.e-grid .e-headercell,

.e-grid .e-detailheadercell {

  padding: 0 0 0;

}

 

.e-grid .e-headercelldiv {

  margin: 0;

  padding: 0 0;

}

 

/* customize the padding of content cells */

.e-grid .e-rowcell {

  padding: 0 0;

}

 

.e-grid .e-rowcell:first-child,

.e-grid .e-summarycell:first-child {

  padding-left: 0;

}

 

.e-grid .e-rowcell:last-child,

.e-grid .e-summarycell:last-child {

  padding-right: 0;

}

 


Query #2: Also can i set the columnHeader cell's width to wrap the content/text inside it.

The auto-wrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words. To enable auto wrap, set the allowTextWrap property to true. Kindly refer to the following documentation for more information.

Text Wrap: https://ej2.syncfusion.com/react/documentation/grid/cell/auto-wrap/


[index.js]

function Default() {

  const textWrapSettings = { wrapMode: 'Header' };

  return (

        <GridComponent

          dataSource={orderDetails}

          gridLines="Both"

          allowTextWrap={true}

          textWrapSettings={textWrapSettings}

        >

        </GridComponent>

  );

}

 


Sample: https://stackblitz.com/edit/react-cw1twr?file=index.js,index.css

Please get back to us if you need further assistance.


Regards,

Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.



NS Neha Sevlani October 10, 2022 07:35 AM

Hi Rajapandiyan,
Thanks for your Reply.

However, removing padding is working for content of row. but not reflecting on header cells.

Also, textWrap settings using above solution is enlarging the row cells like below 



Thanks



RS Rajapandiyan Settu Syncfusion Team October 11, 2022 07:49 AM

Hi Neha,


Thanks for your update.

Query #1: However, removing padding is working for content of row. but not reflecting on header cells.
Also, textWrap settings using above solution is enlarging the row cells


By analyzing your query, we suspect that the width is not provided to all the columns in Grid. Kindly give a proper width to all the columns which may resolve this issue.


 

[index.js]

        <GridComponent

          dataSource={data}

          gridLines="Both"

          allowTextWrap={true}

          textWrapSettings={textWrapSettings}

          height="350"

          width={900}

        >

          <ColumnsDirective>

            <ColumnDirective

              field="OrderID"

              headerText="Order ID"

              width="120"

            ></ColumnDirective>

            <ColumnDirective

              field="CustomerName"

              headerText="Customer Name Information"

              width="120"

            ></ColumnDirective>

            <ColumnDirective

              field="OrderDate"

              headerText="Order Date"

              width="130"

              format="yMd"

            />

            <ColumnDirective

              field="Freight"

              headerText="Freight"

              width="120"

              format="C2"

            />

            <ColumnDirective

              field="ShipCountry"

              headerText="Ship Country"

              width="150"

            ></ColumnDirective>

          </ColumnsDirective>

        </GridComponent>

 


Sample:
https://stackblitz.com/edit/react-cw1twr?file=index.js,index.css

Still, if you face any issues kindly share the below details to validate further.


  1. Share the complete code you have used and the package.json file.
  2. Share the video demo of the reported problem.


Regards,

Rajapandiyan S


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon