Group header not formatted properly

[Galen Giebler]

I have a groupable grid which I have included a <br> it some of the column titles.
The column title displays correctly, but when I drag the column to the group area, the '<br>' is displayed in the column name.  I have attached a screen capture of the issue. 
I would be OK if the <br> were replaced by a space, or if it wapped..  any suggestions?
Thanks!

Below is the razor / view code:

@model Maris.Presentation.Models.EventSummary.EventSummaryMasterViewModel
@{
    ViewBag.Title = "Event Summary";
}
@(Html.Kendo().Grid(Model.Data)
.Name("EventSummary")
.DataSource(dataSource => dataSource
        .Server()
        .PageSize(20)
)

.CellAction(cell =>
{
    if (cell.Column.Title.Equals("Name"))
    {
        cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
            cell.DataItem.VesselNameBackColor, cell.DataItem.VesselNameForeColor);
    }
    else if (cell.Column.Title.Equals("Type"))
    {
        cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
            cell.DataItem.VesselTypeBackColor, cell.DataItem.VesselTypeForeColor);
    }
    else if (cell.Column.Title.Equals("Arrival<br>Time"))
    {
        cell.HtmlAttributes["style"] = String.Format("color: {0}",
            cell.DataItem.ArrivalTimeForeColor);
    }
    else if (cell.Column.Title.Equals("Departure<br>Time"))
    {
        cell.HtmlAttributes["style"] = String.Format("color: {0}",
            cell.DataItem.ArrivalTimeForeColor);
    }
    else if (cell.Column.Title.Equals("Arrival<br>Date"))
    {
        cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
            cell.DataItem.ArrivalBackColor, cell.DataItem.ArrivalForeColor);
    }
    else if (cell.Column.Title.Equals("Departure<br>Date"))
    {
        cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
            cell.DataItem.DepartureBackColor, cell.DataItem.DepartureForeColor);
    }
    else if (cell.Column.Title.Equals("Current<br>Berth"))
    {
        cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
            cell.DataItem.CurrentBerthBackColor, cell.DataItem.CurrentBerthForeColor);
    }
    else if (cell.Column.Title.Equals("Current<br>Activity"))
    {
        cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
            cell.DataItem.CurrentActivityBackColor, cell.DataItem.CurrentActivityForeColor);
    }
})
.Columns(columns =>
    {
        columns.Bound(d => d.Status);
        columns.Bound(d => d.Updated);
        columns.Bound(d => d.Quarantine);
        columns.Bound(d => d.Name);
        columns.Bound(d => d.Num);
        columns.Bound(d => d.Agent);
        columns.Bound(d => d.Type);
        columns.Bound(d => d.Flag);
        columns.Bound(d => d.CallSign);
        columns.Bound(d => d.MMSI);
        columns.Bound(d => d.Announce);
        columns.Bound(d => d.ArrivalDate)
            .Format("{0:MM/dd/yyyy}")
            .Title("Arrival<br>Date");
        columns.Bound(d => d.ArrivalTime)
            .Format("{0:HH:mm}")
            .Title("Arrival<br>Time");
        columns.Bound(d => d.DepartureDate)
            .Format("{0:MM/dd/yyyy}")
            .Title("Departure<br>Date");
        columns.Bound(d => d.DepartureTime)
            .Format("{0:HH:mm}")
            .Title("Departure<br>Time");
        columns.Bound(d => d.CurrentBerth)
            .Title("Current<br>Berth");
        columns.Bound(d => d.CurrentActivity)
            .Title("Current<br>Activity");
    })
    .Pageable(paging => paging
        .Refresh(true)
        .PreviousNext(true)
        .PageSizes(new []{ 20, 40, 80, 100 })
        .Input(true)
    )
    .Groupable()
    .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.MultipleColumn))
    //.HtmlAttributes(new { style = "height:100%" })
    //.Scrollable()
    .Filterable()
    .ColumnMenu()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))

)

[Dimo]

Hello Galen,

The label, which appears in the grouping indicator is the value of the data-title attribute of the respective header cell, which in turn comes from the column's title. HTML attributes cannot contain tags, so the <br> is transformed into plain text.

I suggest you to modify the data-title attribute after initializing the Grid:

$("#grid").find("th").each(function(idx, element) {
    var titleAttr = kendo.attr("title"),
        element = $(element),
        attrValue = element.attr(titleAttr);
    if (attrValue) {
        element.attr(titleAttr, attrValue.replace("<br>", " "));
    }
});

Regards,
Dimo
the Telerik team

[Galen Giebler]

Well - that really didn't help much :^)
Now when I drag the column header, it looks fine (previously it was broken into two lines by the <br>), but nothing else has changed.

I added the script to the bottom of the view file, and added a try catch because it generated an error on a refresh of the grid (e.g. when I tried the grouping - after dropping the header, I would get an error - on debugging it complained about the 'data-title' attribute not existing).

Here is the script with the try catch added:

$("#EventSummary").find("th").each(function (idx, element) {
        var titleAttr = kendo.attr("title"),
            element = $(element);
        try{
            element.attr(titleAttr, element.attr(titleAttr).replace("<br>", " "));
        }
        catch(e){}
    });

Attached is a screen print that shows nothing has really changed.  You can see from the debug window that the data-title text was modified as expected from the code above.  

Thanks again for your help!

P.S. I am unable to use IE 10 to log into the support site - Login button does nothing...  If I hit the Enter key it thinks I am trying to register instead.  I used Chrome and was able to login without issue.

[Dimo]

Hello Galen,

Please compare your implementation with the following example

http://jsfiddle.net/dimodi/Gxu6T/

With regard to the logging issue, I was not able to reproduce it on this page with IE10.

https://www.telerik.com/login.aspx?returnurl=%2faccount

Here is what I did - focused the username field, typed, then tabbed to the password field, typed, then hit Enter and I successfully logged in.

Greetings,
Dimo
the Telerik team

[Galen Giebler]

Well, shucks..

Maybe my ASP.NET MVC Wrapper version is doing something different?
I have attached another graphic - the first circled item shows the issue that worked in your example, but does not seem to work in my code.  The second circled item is the same as in your example - the <br> still exists in both our versions.  The third item shows the added '<th>'  that does not have the 'data-title' attribute which I had to add the try / catch for.  

1) Why would I have the extra <th> that doesn't exist in your example (or at least doesn't cause an error because the script is executed at a different time?)  
2) Is there a way to get the row headers (the second circled item) to not wrap like the group header shouldn't be?

Thanks again
Below is the entire code from my View

@model Maris.Presentation.Models.EventSummary.EventSummaryMasterViewModel
@{
    ViewBag.Title = "Event Summary";
}
@(Html.Kendo().Grid(Model.Data)
.Name("EventSummary")
.DataSource(dataSource => dataSource
        .Server()
        .PageSize(20)

)

.CellAction(cell =>
    {
        if (cell.Column.Title.Equals("Name"))
        {
            cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
                cell.DataItem.VesselNameBackColor, cell.DataItem.VesselNameForeColor);
        }
        else if (cell.Column.Title.Equals("Type"))
        {
            cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
                cell.DataItem.VesselTypeBackColor, cell.DataItem.VesselTypeForeColor);
        }
        else if (cell.Column.Title.Equals("Arrival<br>Time"))
        {
            cell.HtmlAttributes["style"] = String.Format("color: {0}",
                cell.DataItem.ArrivalTimeForeColor);
        }
        else if (cell.Column.Title.Equals("Departure<br>Time"))
        {
            cell.HtmlAttributes["style"] = String.Format("color: {0}",
                cell.DataItem.ArrivalTimeForeColor);
        }
        else if (cell.Column.Title.Equals("Arrival<br>Date"))
        {
            cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
                cell.DataItem.ArrivalBackColor, cell.DataItem.ArrivalForeColor);
        }
        else if (cell.Column.Title.Equals("Departure<br>Date"))
        {
            cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
                cell.DataItem.DepartureBackColor, cell.DataItem.DepartureForeColor);
        }
        else if (cell.Column.Title.Equals("Current<br>Berth"))
        {
            cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
                cell.DataItem.CurrentBerthBackColor, cell.DataItem.CurrentBerthForeColor);
        }
        else if (cell.Column.Title.Equals("Current<br>Activity"))
        {
            cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",
                cell.DataItem.CurrentActivityBackColor, cell.DataItem.CurrentActivityForeColor);
        }
    })
.Columns(columns =>
    {
        columns.Bound(d => d.Status);
        columns.Bound(d => d.Updated);
        columns.Bound(d => d.Quarantine);
        columns.Bound(d => d.Name);
        columns.Bound(d => d.Num);
        columns.Bound(d => d.Agent);
        columns.Bound(d => d.Type);
        columns.Bound(d => d.Flag);
        columns.Bound(d => d.CallSign);
        columns.Bound(d => d.MMSI);
        columns.Bound(d => d.Announce);
        columns.Bound(d => d.ArrivalDate)
            .Format("{0:MM/dd/yyyy}")
            .Title("Arrival<br>Date");
        columns.Bound(d => d.ArrivalTime)
            .Format("{0:HH:mm}")
            .Title("Arrival<br>Time");
        columns.Bound(d => d.DepartureDate)
            .Format("{0:MM/dd/yyyy}")
            .Title("Departure<br>Date");
        columns.Bound(d => d.DepartureTime)
            .Format("{0:HH:mm}")
            .Title("Departure<br>Time");
        columns.Bound(d => d.CurrentBerth)
            .Title("Current<br>Berth");
        columns.Bound(d => d.CurrentActivity)
            .Title("Current<br>Activity");
    })
    .Pageable(paging => paging
        .Refresh(true)
        .PreviousNext(true)
        .PageSizes(new []{ 20, 40, 80, 100 })
        .Input(true)
    )
    .Groupable()
    .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.MultipleColumn))
    //.HtmlAttributes(new { style = "height:100%" })
    //.Scrollable()
    .Filterable()
    .ColumnMenu()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))

)


<script >
    $("#EventSummary").find("th").each(function (idx, element) {
            var titleAttr = kendo.attr("title"),
                element = $(element);
            try{
                element.attr(titleAttr, element.attr(titleAttr).replace("<br>", " "));
            }
            catch(e){}
        });
</script>

[Dimo]

Hi Galen,

Now I see - server binding is what makes the difference. The following approach should work for both client and server binding. You can remove the script block that is not needed. The CSS rule is needed for both cases. Note the space before the <br> tag in the Title().

@model IEnumerable<Kendo.Mvc.Examples.Models.Product>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(p => p.ProductID).Groupable(false);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Title("Unit <br>Price");
        columns.Bound(p => p.UnitsInStock);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Groupable()
)

<script>

$("#Grid").find("th").each(function(idx, element) {
    var titleAttr = kendo.attr("title"),
        element = $(element),
        attrValue = element.attr(titleAttr);
    if (attrValue) {
        element.attr(titleAttr, attrValue.replace("<br>", " ").replace("<br/>", " "));
    }
});

$("#Grid").find(".k-group-indicator .k-link").each(function(idx, element) {
    var element = $(element),
        text = element.text();
    element.text(text.replace("<br>", " ").replace("<br/>", " "));
});

</script>

<style>

.k-grouping-row br
{
    display: none;
}

</style>

Regards,
Dimo
the Telerik team

[Galen Giebler]

Thanks so much!
I ended up using the scripts also to get all the different values to hide the <br/>...  
Works great!