Newline character in ejGrid HeaderText

[James]

Hey,

I'm trying to change my column header in code behind to include a newline character. I tried inserting a <br> in the string but that didn't work. I also tried it with the disableHtmlEncode property of the column set to "true".

Does anyone know how to get the newline character into the column headerText?

Any help is appreciated.

James

[Balaji Marimuthu]

Hi James, 

? 

We have checked the column HeaderText with new line character <br> tag by enabled the disableHtmlEncode property in code behind and it works fine. Please refer to the following sample and code example,

Sample: Sample

protected void Page_Load(object sender, EventArgs e)

        {

            GridProperties gridmodel = new GridProperties();

            List<Column> colList = new List<Column>();

            Grid.Columns.Add(new Column() { Field = "OrderID", HeaderText = "Order ID", Width = "80" });

            Grid.Columns.Add(new Column() { Field = "CustomerID", HeaderText = "Customer Id<br>break lines in a text<br>", disableHtmlEncode=true, TextAlign = Syncfusion.JavaScript.TextAlign.Right, Width = "140" });

            Grid.Columns.Add(new Column() { Field = "EmployeeID", HeaderText = "<br>", disableHtmlEncode=true, TextAlign = Syncfusion.JavaScript.TextAlign.Right, Width = "110" });

            Grid.Columns.Add(new Column() { Field = "Freight", HeaderText = "Freight", Format = "{0:D}", Width = "100" });

            Grid.Columns.Add(new Column() { Field = "ShipCity", HeaderText = "Ship City", Width = "80" });

            Grid.AllowPaging = true;

          

            Grid.DataSource = BindDataSource();

            Grid.DataBind();

        }

? 

Screenshot:

? 

Could you please share the following details to find the cause?of this issue and to provide an appropriate solution at the earliest? 

? 

1.        Essential Studio version and Browser version details.

2.        Full code example of default page and controller.

3.        Modified the provided sample as issue reproducible.

? 

Regards,? 
Balaji Marimuthu

[James]

Hi Balaji,

I ran the sample you provided and it's not what I was looking for.

As an example. I need my header to be like this:

Ship

City

Not

Ship<br>City

I'm running with Syncfusion version 13.2451.0.29 if that helps.

Please respond. Thanks.

James

[Balaji Marimuthu]

Hi James,

To achieve your requirement, we suggest you to use the “AllowTextWrap” property in Grid and set false to the “disableHtmlEncode” property. Refer to the Sample and code example as below.
Sample-newline

protected void Page_Load(object sender, EventArgs e)

        {

            GridProperties gridmodel = new GridProperties();

            List<Column> colList = new List<Column>();

            Grid.Columns.Add(new Column() { Field = "OrderID", HeaderText = "Order ID", Width = "80" });

            Grid.Columns.Add(new Column() { Field = "CustomerID", HeaderText = "Customer ID", TextAlign = Syncfusion.JavaScript.TextAlign.Right, Width = "140" });

            Grid.Columns.Add(new Column() { Field = "EmployeeID", HeaderText = "Employee ID", TextAlign = Syncfusion.JavaScript.TextAlign.Right, Width = "110" });

            Grid.Columns.Add(new Column() { Field = "Freight", HeaderText = "Freight", Format = "{0:D}", Width = "100" });

            Grid.Columns.Add(new Column() { Field = "ShipCity", HeaderText = "Ship<br>City", Width = "80" });

            Grid.AllowPaging = true;

            Grid.AllowTextWrap = true;

            Grid.DataSource = BindDataSource();

            Grid.DataBind();

        }

Note: The disableHtmlEncode property is used to render the grid content and header with an html elements.

Output screenshot.




Regards,
Balaji Marimuthu

[James]

Thank you for your response Balaji. It does solve the problem but creates a new one. I don't want the grid data to wrap, just the headers. Because I've set AllowTextWrap to True, all the records in my grid have increased height limiting the data that can be viewed by the user without scrolling.

All of this wrapping text is in 2 columns only so if there was a way to disable wrapping for the 2 columns but keep wrapping in the headers of OTHER columns then that would be great but unfortunately there is no AllowTextWrap property tied to the column itself.

Please let me know if you have a way around this.

I really appreciate your help.

James

[Balaji Marimuthu]

Hi James,

Your requirement is achieved by using the custom CSS properties in Grid column header. Refer to the Sample and code example as below.
Sample: Sample_(3)

[Default.aspx]

<style>

        .e-grid .e-columnheader .e-headercelldiv {

            height: Auto;

            line-height: 18px;

        }

        .e-grid .e-columnheader .e-headercelldiv {

            margin-bottom: 2px;

            margin-top: 0;

        }
    </style>

Note: Set false to the AllowTextWrap property.

Query: All of this wrapping text is in 2 columns only so if there was a way to disable wrapping for the 2 columns but keep wrapping in the headers of OTHER columns then that would be great but unfortunately there is no AllowTextWrap property tied to the column itself.

If we use the br tag in column header, the height of the Column headercell is changed and to display the column header we need to override the CSS property. So we suggest you to use the CssClass property in Grid to apply the CSS to individual column header.

Refer to the code example as below.

[WebForm1.aspx]

<style>

        .e-grid .e-columnheader .wrap .e-headercelldiv {

            height: Auto;

            line-height: 18px;

        }

        .e-grid .e-columnheader .wrap .e-headercelldiv {

            margin-bottom: 2px;

            margin-top: 0;

        }
    </style>

[Controller]

FlatGrid.Columns.Add(new Column() { Field = "OrderID", HeaderText = "Order ID", Width = "80" });

            FlatGrid.Columns.Add(new Column() { Field = "CustomerID", HeaderText = "Customer ID", TextAlign = Syncfusion.JavaScript.TextAlign.Right, Width = "140" });

            FlatGrid.Columns.Add(new Column() { Field = "EmployeeID", HeaderText = "Employee ID",  TextAlign = Syncfusion.JavaScript.TextAlign.Right, Width = "110" });

            FlatGrid.Columns.Add(new Column() { Field = "Freight", HeaderText = "Freight", Format = "{0:D}", Width = "100" });

            FlatGrid.Columns.Add(new Column() { Field = "ShipCity", HeaderText = "Ship<br>City", CssClass = "wrap", Width = "80" });

            FlatGrid.AllowPaging = true;

           

 

Regards,
Balaji Marimuthu