We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Newline character in ejGrid HeaderText

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

5 Replies

BM Balaji Marimuthu Syncfusion Team November 16, 2015 07:27 AM UTC

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



JA James November 21, 2015 04:30 AM UTC

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


BM Balaji Marimuthu Syncfusion Team November 23, 2015 09:10 AM UTC

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


JA James November 23, 2015 04:19 PM UTC

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


BM Balaji Marimuthu Syncfusion Team November 24, 2015 06:08 AM UTC

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



Loader.
Live Chat Icon For mobile
Up arrow icon