Stacked column headers are not displaying full text

[Jessica Goodrich]

Hi,

I have a stacked column thing going on and it doesn't show the full text. You can see the full text in the lower grid (minus the tonne CO2e). How can I get this to expand?

[Manivel Sellamuthu]

Hi Jessica, 

Greetings from Syncfusion support. 

We would like to inform you that by default in Grid, if the headerText was long, it will display the ellipsis when the content overflow, but the text will not be cropped. 

Before proceeding this requirement, we need the below details to validate the reported issue at our end. 

1. Share the complete grid code
2. If you have used any custom CSS, please share the details
3. Share the Syncfusion packages version

Regards, 

Manivel 

[Jessica Goodrich]

Thanks. I have the allowTextWrap set to true.

1. Grid code:

<div>
        <style type="text/css">
            #GridGhg .e-gridcontent {
                cursor: pointer;
            }
        </style>
        <div>
            <ejs-grid id="GridGhg"
                      actionBegin="actionBegin"
                      actionComplete="actionComplete"
                      allowPaging="true"
                      allowFiltering="true"
                      allowExcelExport="true"
                      allowPdfExport="true"
                      allowSorting="true"
                      allowSelection="true"
                      allowTextWrap="true"
                      created="created"
                      gridLines="Both"
                      showColumnChooser="true"
                      toolbar="@(new List<object> { "Add", "Delete", "PdfExport", "ExcelExport", "Search", "ColumnChooser"})">
                <e-grid-filterSettings type="Excel" />
                <e-grid-editSettings allowAdding="@Model.CanEdit" allowDeleting="@Model.CanEdit" allowEditing="@Model.CanEdit" mode="Dialog" showDeleteConfirmDialog="true" />
                <e-data-manager json="ViewBag.DataSource" adaptor="RemoteSaveAdaptor" crudUrl="/ObjectiveDataEntry/[email protected]&submitStatus=false"></e-data-manager>
                <e-grid-columns>
                    <e-grid-column field="GridId" headerText="GridId" isPrimaryKey="true" allowEditing="false" visible="false"></e-grid-column>
                    <e-grid-column field="ObjectiveId" headerText="ObjectiveId" allowEditing="false" visible="false" defaultValue="@Model.Objective.ObjectiveId"></e-grid-column>
                    <e-grid-column field="FiscalYear.Description" headerText="FY" editType="dropdownedit" defaultValue="@currentFiscalYear" edit="new {@params = fiscalYearDropDownList }"></e-grid-column>
                    <e-grid-column field="ReportingPeriod.Description" headerText="Quarter" editType="dropdownedit" defaultValue="@currentReportingPeriod" edit="new {@params = reportingPeriodDropDownList }"></e-grid-column>
                    <e-grid-column headerText="Scope 1" textAlign="Center" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>()
                    {
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope1NaturalGas.Tonne", HeaderText="Natural Gas", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope1OtherStationaryCombustion.Tonne", HeaderText="Other Stationary Combustion", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope1SulfurHexaflouride.Tonne", HeaderText="SF6", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope1OtherRefrigerantsProcessGreenHouseGases.Tonne", HeaderText="Other Refrigerants/ Process GHGs", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope1Fleet.Tonne", HeaderText="Fleet", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="TotalScope1", HeaderText="Scope 1 Total", AllowEditing=false, Format="N0" }
                    }
                    );">
                    </e-grid-column>
                    <e-grid-column headerText="Scope 2" textAlign="Center" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>()
                    {
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope2Electricity.Tonne", HeaderText="Electricity", EditType="numericedit", Format="N0" }
                    }
                    )">
                    </e-grid-column>
                    <e-grid-column field="TotalScope1And2" headerText="Scope 1 & 2 Total" allowEditing="false" defaultValue="0" , format="N"></e-grid-column>
                    <e-grid-column headerText="Scope 3" textAlign="Center" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>()
                    {
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope3TransmissionAndDistributionLosses.Tonne", HeaderText="T&D Losses", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope3BusinessTravel.Tonne", HeaderText="Business Travel", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope3ContractedWasteDisposal.Tonne", HeaderText="Contracted Waste Disposal", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope3ContractedWasteWaterTreatment.Tonne", HeaderText="Contracted Waste Water Treatment", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="Scope3EmployeeCommuting.Tonne", HeaderText="Employee Commuting", EditType="numericedit", Format="N0" },
                        new Syncfusion.EJ2.Grids.GridColumn { Field="TotalScope3", HeaderText="Scope 3 Total", AllowEditing=false, Format="N0" }
                    }
                    )">
                    </e-grid-column>
                    <e-grid-column field="Total" headerText="Total" allowEditing="false" defaultValue="0" format="N0"></e-grid-column>
                </e-grid-columns>
            </ejs-grid>
        </div>
    </div>

2. No custom css other than what is shown at the top of the grid code and stuff on the toolbar to make the buttons colorful.

3. Version: 18.3.0.40

Thanks!

[Manivel Sellamuthu]

Hi Jessica, 

Thanks for your update. 

We have validated the provided code example and found that you have not provided the width for the Grid columns is the cause of the issue.   

By default auto wrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the cell width. When a column width is not specified, then auto wrap of columns will be adjusted with respect to the grid’s width. So the reported issue occurs. 

We suggest you to provide the appropriate width for the columns to resolve the issue. Please refer the below documentation link for more information.  

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

Please let us know, if you need further assistance. 

Regards, 

Manivel