Group header not formatted properly

7 posts, 1 answers
  1. Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 09 Apr 2013 Link to this post

    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))
         
    )
  2. Dimo
    Admin
    Dimo avatar
    8446 posts

    Posted 10 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 10 Apr 2013 Link to this post

    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.
  4. Dimo
    Admin
    Dimo avatar
    8446 posts

    Posted 11 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 11 Apr 2013 Link to this post

    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>
  6. Answer
    Dimo
    Admin
    Dimo avatar
    8446 posts

    Posted 12 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Galen Giebler
    Galen Giebler avatar
    13 posts
    Member since:
    Nov 2004

    Posted 12 Apr 2013 Link to this post

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