control how long webgrid column headers break

Question

User379720387 posted

https://1drv.ms/u/s!Ap6uenbtw3z50jDXcoKKiLCrxsuL?e=RvRAsQ

My responsive webgrid has a combination of long and short column headers. The header consists of a description then in between parenthesis it shows the units.

At the moment I have no control where the headers break, in the picture from the link the first column breaks how it want it to break, 

The second column is not breaking at all.

And the last colums breaks as desired (by accident).

How can I force to always have two rows in the header?

Answer 1

User-1330468790 posted

Hi wavemaster,

 

Since the header text will be rendered as the inner text of an anchor element in html page, you might be interested in CSS white-space Property. 

The white-space property specifies how white-space inside an element is handled. 

 

You could specify the header text with "\r\n" separator and assign "white-space: pre-line;"  to the target anchor element to get your desired layout.

 

More details, you could refer to below codes.

WebGridView.cshtml:

@using MVCDemo.Models
@model IEnumerable<Student>

<style>
    a {
        white-space: pre-line;
        text-align:center;
        display:inline-block;
    }
</style>

@{
    ViewBag.Title = "WebGridView";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var grid = new WebGrid(Model);

}

<h2>WebGridView</h2>

@grid.GetHtml(
columns: grid.Columns(
grid.Column("Name"),
grid.Column("Awards"),
grid.Column(columnName: "Grade", header: "Grade \r\n (Last year)".ToString(), format: @<text> @item.Grade </text>)));

Controller Action:

 public ActionResult WebGridView()
        {
            List<Student> lstStudent = new List<Student>()
            {
                new Student{ Name = "Name1", Awards="Award1", Grade=100, StudentId=1 },
                new Student{ Name = "Name2", Awards="Award2", Grade=90, StudentId=2 },
                new Student{ Name = "Name3", Awards="Award3", Grade=80, StudentId=3 }
            };

            return View(lstStudent);
        }

Result:

 

Hope helps.

Best regards,

Sean