Textwrap some columns but not others on grid

[Jessica Goodrich]

Hello!

I want to pick and choose which columns can text wrap and which ones can't. Can you show me how to do that?

My grid looks like this:

<ejs-grid id="Grid"
                      dataSource="@ViewBag.DataSource"
                      childGrid="ChildGrid"
                      toolbar="@(new List<object> {"Print", "PdfExport", "ExcelExport", new { text = "<i class='fa fa-expand' aria-hidden='true'></i> Expand All", id = "expandAll" }, new { text = "<i class='fa fa-compress' aria-hidden='true'></i> Collapse All", id = "collapseAll" }, "Search", "ColumnChooser"})"
                      allowPaging="true"
                      allowFiltering="true"
                      allowExcelExport="true"
                      allowPdfExport="true"
                      allowSorting="true"
                      allowTextWrap="true"
                      toolbarClick="toolbarClick"
                      rowDataBound="rowDataBound"
                      queryCellInfo="queryCellInfo"
                      allowSelection="true"
                      allowResizing="false"
                      allowGrouping="true"
                      allowReordering="true"
                      rowSelected="rowSelected"
                      showColumnChooser="true">
                <e-grid-filterSettings type="Excel"
                                       columns="filterColumns" />
                <e-grid-columns>
                    <e-grid-column field="Objective.ObjectiveWorkflowStatusDescription" headerText="Approval Status" width="15" visible="@ViewBag.Area == AreaTypes.Environmental"></e-grid-column>
                    <e-grid-column field="Objective.FiscalYearDescription" headerText="FY" width="10"></e-grid-column>
                    <e-grid-column field="Objective.DivisionId" visible="false" showInColumnChooser="false" headerText="DivisionId"></e-grid-column>
                    <e-grid-column field="Objective.RequirementDescription" headerText="Requirement" headerTemplate="#requirementHeader" width="15" visible="@ViewBag.Area == AreaTypes.Environmental && @ViewBag.Scope == ScopeTypes.Corporate" showInColumnChooser="@ViewBag.Area == AreaTypes.Environmental && @ViewBag.Scope == ScopeTypes.Corporate"></e-grid-column>
                    <e-grid-column field="Objective.AspectDescription" headerText="Focus Area" headerTemplate="#focusAreaHeader" width="15"></e-grid-column>
                    <e-grid-column field="Objective.ObjectiveDescription" headerText="Objective" headerTemplate="#objectiveHeader" width="25"></e-grid-column>
                    <e-grid-column field="Objective.CurrentStatus" headerText="Current Status" width="15"></e-grid-column>
                    <e-grid-column field="Objective.CurrentStatusComment" headerText="Current Comment" width="25"></e-grid-column>
                    <e-grid-column field="Champions" headerText="Champion" visible="@ViewBag.Area == AreaTypes.Environmental" showInColumnChooser="@ViewBag.Area == AreaTypes.Environmental" width="10"></e-grid-column>
                    <e-grid-column field="Reporters" headerText="Reporter" width="10"></e-grid-column>
                    <e-grid-column field="Objective.DueDate" headerText="Due Date" customFormat="@(new { type = "date", format = "MM/dd/yyyy" })" type="date" width="10"></e-grid-column>
                </e-grid-columns>
            </ejs-grid>

[Manivel Sellamuthu]

Hi Jessica, 

Greetings from Syncfusion support. 

We can find the td (row cell) is wrapped or not using the comparison between each td  as “td.scrollWidth>td.offsetWidth”. But could you please explain more about your requirement. 

From your query we suspect that you want to apply the text wrap for particular columns only. So please confirm your requirement. 

If we misunderstood your query or this is not your exact requirement, please explain more about your requirement. 

Regards, 

Manivel 

[Jessica Goodrich]

Hi Manivel,

Yes, your understanding is correct. I want to apply the textwrap only to specific columns and not apply it to other columns. Is that possible?

Thanks!

Jessica

[Ajith Govarthan]

Hi Jessica, 

 

Thanks for the update. 

 

Query: Yes, your understanding is correct. I want to apply the textwrap only to specific columns and not apply it to other columns. Is that possible? 

 

Based on your query you want to apply textWrap for specific columns alone. So, we have prepared sample and in that sample we have enabled the textWrap for the grid component and used the customAttribute feature to remove the textWrap for particular columns. 

 

You can use the custom attribute class and the related CSS to remove the text wrap for unnecessary columns. For your convenience we have attached the sample so please refer them for your reference. 

 

Code Example: 

Index.cshtml 

 

<div> 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowTextWrap="true" width="500" allowPaging="true"> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="CustomerID" customAttributes=@(new { @class="e-removewrap" } ) headerText="CustomerID" width="80"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" format="N2" width="120"></e-grid-column> 

            <e-grid-column field="OrderDate" headerText="Order Date" type="date" format="yMd" width="120"></e-grid-column> 

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

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<style> 

    .e-grid .e-headercell.e-removewrap .e-headercelldiv, 

    .e-grid .e-rowcell.e-removewrap { 

        white-space: nowrap; 

        text-overflow: ellipsis; 

    } 

</style> 

 

 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/162280-textwrap_specific_columns2021842213.zip 

 

UG-Links: 

 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/cell/#custom-attributes 

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

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G. 

[NKhumiseni]

Hi Ajith,

do you have a sample on this using EJ1 ASP.NET MVC

[Farveen Sulthana Thameeztheen Basha]

Hi NKhumiseni,

Greetings from Syncfusion.

As per your request, we have prepared sample in EJ1 Grid with ASP.NET MVC

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_-_EJ1_MVC_(2)1292014175.zip

Refer to the documentation link:-

https://help.syncfusion.com/aspnet-core/grid/columns?cs-save-lang=1&cs-lang=css#customize-column

https://help.syncfusion.com/api/js/ejgrid#members:columns-customattributes

You can use either CssClass or CustomAttributes property for particular column in order to remove wrapping for that column. Please get back to us if you need any further assistance.

Regards,
Farveen sulthana T