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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Newline character in ejGrid HeaderText

Thread ID:

Created:

Updated:

Platform:

Replies:

121149 Nov 14,2015 03:13 AM UTC Nov 24,2015 06:08 AM UTC ASP.NET Web Forms 5
loading
Tags: Grid
James
Asked On November 14, 2015 03:13 AM UTC

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 [Syncfusion]
Replied On 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


James
Replied On 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

Balaji Marimuthu [Syncfusion]
Replied On 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

James
Replied On 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

Balaji Marimuthu [Syncfusion]
Replied On 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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;