Data Grid's Column Header Text Wrapping

[Wei Cheng]

Hello, Syncfusion:

I am displaying a rather large load of data with many columns, the problem I am facing is that the data inside column is not long but the column header could be 2-4 words long, our users preferred not having a scroll bar instead, they are fine with wrapping the headers into 2-3 lines, could this be done? any example out there?

Thanks

[Rajapandiyan Settu]

Hi Wei, 

 

Thanks for contacting Syncfusion support. 

 

In EJ2 Grid, we have the support to autowrap the text in header and content of table. To enable auto wrap, set the allowTextWrap property to true. You can configure the auto wrap mode by setting the textWrapSettings.wrapMode property. 

 

Kindly refer to the below documentation for detailed information. 

 

Auto-Wrap: https://ej2.syncfusion.com/vue/documentation/grid/cell/#auto-wrap 

 

Find the below code example and sample for your reference. 

 

 

[App.vue] 

 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      :allowPaging="true" 

      :allowTextWrap="true" 

      :textWrapSettings="wrapSettings"> 

      ---- 

    </ejs-grid> 

  </div> 

</template> 

<script> 

--- 

 

export default { 

  data() { 

    return { 

      data: gridData, 

      wrapSettings: { wrapMode: "Header" }, // set the wrap mode 

    }; 

  }, 

}; 

</script> 

 

 

 

Sample: https://codesandbox.io/s/vue-template-forked-sw9ji?file=/src/App.vue 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Wei Cheng]

Thanks for the quick reply and code example! hmm, 

But with number of columns we got the column headers all went vertically, maybe we will try a different design. thanks still.

[Rajapandiyan Settu]

Hi Wei, 

 

Thanks for your update. 

 

Query: But with number of columns we got the column headers all went vertically, maybe we will try a different design 

 

Based on this query, we suspect that you did not provide the width to the Grid column. This might be the cause of reported behavior. We suggest you to provide the width to all the columns.    

 

Find the below code example 

 

 

[App.vue] 

 

 

   <e-column 

    field="OrderID" 

    headerText="Order ID is should be large text" 

    textAlign="Right" 

    width="100" 

   ></e-column> 

 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rajapandiyan S 

[Michael]

I found this helped...

[enableColumnVirtualization]="true"

[Rajapandi Ravi]

Michael,

We are happy to hear that you have found the solution at your end and achieve your requirement.

Please get back us if you need any further assistance