Html detail row layout help

6 posts, 0 answers
  1. Mark
    Mark avatar
    32 posts
    Member since:
    Jan 2012

    Posted 15 Feb Link to this post

    I am implementing a detail child row in a grid as per the example at in ..\QuickStart\GridView\Hierarchy\TabbedChildViews

    I have a simplified view with a single row and two columns, row height 100 and column 1 width 350, column 2 width 600 (excluding the image)

    I am looking for some pointers on how to get the height of the row/cell to scroll when the height of the contained content exceeds the row height. Also how to get the cell to correctly wrap the text?

    Currently I am getting the row rendered as in the image, which is incorrect. It is not wrapping the text correctly as the characters are vanishing off the right edge of the first cell. Also, the content loaded into the cell is a lot higher than the cell/row height ( in the provided image the cell field has 15+ lines of text) , but the scroll bar does not allow scrolling for the entire content. How could this be achieved?

     The Cells are added to the view as :

    viewDef.RowTemplate.Rows(0).Cells.Add(New CellDefinition(column.FieldName, 0, 1, 1))

    And the CellFormatting code for the cell is :

    e.CellElement.Text = ("<html>" + e.CellElement.RowInfo.Cells(columnSpec.FieldName).Value.ToString().Replace(" ", "&nbsp;") + "</html>")
    e.CellElement.TextAlignment = ContentAlignment.TopLeft
    e.CellElement.Padding = New Padding(3)
    e.CellElement.TextWrap = True
    e.CellElement.AutoSizeMode = RadAutoSizeMode.Auto
    e.CellElement.AutoSize = True

     

    The e.CellElement directives have been added via trial and error.

    Thanks,

     Mark

     

  2. Mark
    Mark avatar
    32 posts
    Member since:
    Jan 2012

    Posted 15 Feb in reply to Mark Link to this post

    Think I forgot the file.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Mark
    Mark avatar
    32 posts
    Member since:
    Jan 2012

    Posted 16 Feb Link to this post

    To try to get this working, I've tried :

    When adding columns to the GridViewTemplate 

    template.Columns(column.FieldName).Width = 500
    template.Columns(column.FieldName).DisableHTMLRendering = False
    template.Columns(column.FieldName).WrapText = True

    And in CellFormatting :

     e.CellElement.TextWrap = True
    e.CellElement.ColumnInfo.WrapText = True
    e.CellElement.ColumnInfo.Width = 500
    If e.CellElement.TableElement.CurrentCell IsNot Nothing Then

        e.CellElement.TableElement.TextWrap = True
        
    e.CellElement.TableElement.CurrentCell.TextWrap = True

     End If

    Also in the HTML content for e.CellElement.Text:

    <span style='word-wrap: break-word;'>1234567890123456789012345678901234567890</span>

    but nothing I try seems to make any difference.

    Any help would be greatly appreciated!

     Thanks.

  5. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    712 posts

    Posted 16 Feb Link to this post

    Hello Mark,

    Thank you for writing.

    You would also need to set a greater height to the row having the higher text in your view definition. Scrollbars will not appear unless the height of the child row when your view gets expanded than the height of the view definition.

    Please check the following documentation article: HTML View Definition. I am also sending you a sample project which I believe can get you going. 

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo Merdjanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Mark
    Mark avatar
    32 posts
    Member since:
    Jan 2012

    Posted 17 Feb Link to this post

    The child row size update works great. I have a couple of questions.

     Is it possible to autosize the height to the content? I totally understand if this is not possible.

    When I click the cell, it jumps to the bottom. Is there a way to prevent this.

     I am still having trouble with the text wrapping which appears to be ignored. If you add a large volume of text to your fields does this work OK for you?

     Thanks,

  7. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    712 posts

    Posted 17 Feb Link to this post

    Hi Mark,

    Thank you for writing back.

    I am glad that setting the row size works for your scenario. Autosizing the view definition is not going to be an easy task because all rows in the child template use the same view definition which is defined only once. It would be possible to add a custom logic to change the height when a particular row gets expanded, this operation, however, will also affect all other expanded rows and will result in an unwanted behavior.

    Regarding your other question, the TextWrap property when set to an element with an html-like formatted text, works more or less like a word wrap. This is a known functionality limitation and in order to workaround it, you can either add spaces or <br> tags within your text so that it breaks and starts on a new row. As an alternative option, for the cells with a very long text, you can set the text without html-like formatting. 

    I hope this information is useful. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo Merdjanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WinForms is Visual Studio 2017 Ready