Header text not wrapping properly with overflow elipsis

[Sandip]

i have worked on Ej1 syncfusion grid where if header width is smaller then font then it will do ... elipsis.

but this new grid of EJ2 syncfusion its just doing this which is bit weird can i override this to make it eplisis. also can i have horizontal scrollbar in grid in top and bottom.

[Praveenkumar Gajendiran]

Hi Sandip, 

Thanks for contacting Syncfusion support. 

Query: i have worked on Ej1 syncfusion grid where if header width is smaller then font then it will do ... elipsis. 

but this new grid of EJ2 syncfusion its just doing this which is bit weird can i override this to make it eplisis.  

Based on your requirement, we understood that you want to show the ellipsis instead of auto wrap the text. 

In EJ2 Grid, the text will be displays with ellipsis when the cell content’s width exceeds the column’s width. Since this is the default behavior of EJ2 Grid. 

The text will be auto wrapped only when the allowTextwrap is enabled in the Grid. So, please ensure whether the allowTextWrap is disabled in your Grid to show ellipsis in the Grid. 

AllowTextWrap: https://ej2.syncfusion.com/javascript/documentation/api/grid/#allowtextwrap 

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

Code Example: 

 

// setting allowTextWrap as true wrap the text content  

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowTextWrap="false" allowPaging="true"> 

    ----- 

</ejs-grid> 

Screenshot:  

 

We prepared a sample based on this for your reference.

Sample: https://www.syncfusion.com/downloads/support/forum/163173/ze/defaultGrid_core8966487.zip

Still if you face any issue or this is not meet your requirement, please get back to us with the below details that will be helpful for us to proceed further.  

1)                 Share complete grid rendering code. 

2)                 Syncfusion package version and style script version used. 

3)                 Please let us know, do you have used any custom CSS in your sample? 

4)                 If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. 

5)                 Please explain/elaborate your exact requirement with more details. 

Regards,
Praveenkumar G 

[Sandip]

ok but this will show elipsis in the cell content as well correct? I want cell content to wrap and header to elipsis. also is there any way i can have horizontal and scrollbar and top and bottom of grid?

[Praveenkumar Gajendiran]

Hi Sandip,

Thanks for your update.

Query1: “ok but this will show elipsis in the cell content as well correct? I want cell content to wrap and header to elipsis.”

Based on your query, you want to enable the auto wrap only for the Grid content cell. For this we suggest you to set textwrapsettings.wrapMode property as ‘Content’ in the Grid as demonstrated in the below code example to achieve your requirement.

Code Example: 

 

// setting allowTextWrap as true wrap the text content  

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowTextWrap="true" allowPaging="true">
  <e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings> 

    ----- 

</ejs-grid> 

Refer the below document for Auto-wrap feature of Grid,

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

Query2: “also is there any way i can have horizontal and scrollbar and top and bottom of grid?” 

Based on your query we suspect that you want to render the horizontal scrollbar at  the top and bottom of the Grid. You can achieve your requirement using the custom CSS and onscroll event  as demonstrated in the below code snippet,

Code Example: 

 

<div id="scroll_wrapper1"> 

    <div id="scroll_div"></div> 

</div> 

<div id="scroll_wrapper2"> 

    <div id="grid_parent"> 

        <ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowTextWrap="true" height='100%' width='100%'> 

            <e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings> 

            <e-grid-columns> 

                <e-grid-column field="OrderID" headerText="Order ID  of the Item" isPrimaryKey="true" width="70"></e-grid-column> 

                <e-grid-column field="CustomerID" headerText="Customer Name" width="80"></e-grid-column> 

                <e-grid-column field="Freight" headerText="Freight" format="C2" width="140"></e-grid-column> 

                <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

                <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

                <e-grid-column field="ShipAddress" headerText="Ship Address to deliver" width="150"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

    </div> 

</div> 

 

<script> 

    var wrapper1 = document.getElementById("scroll_wrapper1"); 

    var wrapper2 = document.getElementById("scroll_wrapper2"); 

    wrapper1.onscroll = function () { 

        wrapper2.scrollLeft = wrapper1.scrollLeft; 

    }; 

    wrapper2.onscroll = function () { 

        wrapper1.scrollLeft = wrapper2.scrollLeft; 

    }; 

</script> 

<style> 

    #scroll_wrapper1, #scroll_wrapper2 { 

        width: 600px; 

        overflow-x: scroll; 

        overflow-y: hidden; 

    } 

 

    #scroll_wrapper1 { 

        height: 20px; 

    } 

 

    #scroll_wrapper2 { 

        height: 500px; 

    } 

 

    #scroll_div { 

        width: 800px; 

        height: 20px; 

    } 

 

    #grid_parent { 

        width: 800px; 

        height: 500px; 

        overflow: auto; 

    } 

</style> 

We have prepared a sample based on this for your reference,

Sample: https://www.syncfusion.com/downloads/support/forum/163173/ze/topbottomscrollable493933014.zip

Please get back to us if you need further assistance.

Regards,
Praveenkumar G