[Solved] HTML in group header item causes paragraph tags

[Patrick Saunders]

Whenever I put HTML into the Group Header Item, as per Telerik instruction, eroneous "<p> </p>"
tags are being inserted above and below my content.
If I just have plain text (ie not HTML) then I don't get this behavour.
I need to use HTML to format my data/text.

This is my code, using literal but it didnt make any difference whether directly or via the literal.

protected void gridResults_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{

    if (e.Item is GridGroupHeaderItem)
    {
        StringBuilder sb = new StringBuilder();

        sb.Append("<div style=\"width:500px; overflow-x:auto; overflow-y:hidden; \">");
        sb.Append("  <div style=\"width:400px;\">");
        sb.Append("    <div style=\"width:100px; float:left;\">Name </div>");
        sb.Append("    <div style=\"width:100px; float:left;\">Year Level </div>");
        sb.Append("    <div style=\"width:100px; float:left;\">Classes </div>");
        sb.Append("  </div>"); // row.
        sb.Append("</div>"); // table.

        GridGroupHeaderItem groupHeaderItem = (GridGroupHeaderItem)e.Item;
        Literal literal = new Literal();
        literal.Text = sb.ToString();
        groupHeaderItem.DataCell.Controls.Add(literal);
    }
}

[Marin]

Hello,

I agree that the <p> tags are not needed in this case however it appears this behavior is provided by the design of the GridGroupHeaerItem of the control. Unfortunately there is no suitable server-side workaround at the moment. We will try to address this issue in future releases of the control.
Currently one option is to remove the unnecessary tags on the client-side after the grid is loaded.

Kind regards,
Marin
the Telerik team

[PatrickS]

Hi Marin,
Can you explain further why the control would do that?
I find it very hard to believe that:
a)It actually does that on purpose.
b)This issue has only now been identified.
c)There is no server side work around.
I'm depending on this feature for a solution for a customer - surely there is something I can do?
What about override the render of the groupHeaderItem or something like that?

Thank you,

Patrick.

[Marin]

Hi Patrick,

 Another option is to use a GroupHeaderTemplate as shown in this demo. This will let you define the content of the GridGroupHeaderItem in the markup and no additional HTML will be rendered there.
I cannot tell for sure why these <p> tags were added. It is inside an internal class used to format the content and apply different styles to the elements in the group header item.

Let me know how the template approach works in your case and if you have any other questions.

Greetings,
Marin
the Telerik team

[PatrickS]

Hi Marin,
I did get it to work using GroupHeaderTemplate.
For anyone else this is how I got it to work OK:

<GroupHeaderTemplate>
    <asp:Literal ><%# GetGroupHeaderHTML(Container.DataItem) %></asp:Literal>
</GroupHeaderTemplate>

And this code:

public string GetGroupHeaderHTML(Object oDataRowView)
{
    // Cast to datarowview.
    DataRowView row = (DataRowView)oDataRowView;

    // Get student ID;
    int studentId = Convert.ToInt32(row[0]);

    StringBuilder sb = new StringBuilder();
    sb.Append("<div style=\"width:700px; overflow-x:auto; overflow-y:hidden; \">");
    sb.Append("  <div style=\"width:600px;\">");
    sb.Append(string.Format("    <div style=\"width:100px; float:left;\">ID: {0}</div>", studentId));
    sb.Append("    <div style=\"width:200px; float:left;\">Name: Name here </div>");
    sb.Append("    <div style=\"width:100px; float:left;\">Year Level </div>");
    sb.Append("    <div style=\"width:100px; float:left;\">Classes </div>");
    sb.Append("  </div>"); // row.
    sb.Append("</div>"); // table.

    return sb.ToString();
}

Thanks,

Patrick.