This is a migrated thread and some comments may be shown as answers.

Html detail row layout help

5 Answers 66 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 15 Feb 2016, 04:39 PM

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

 

5 Answers, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 15 Feb 2016, 04:40 PM
Think I forgot the file.
0
Mark
Top achievements
Rank 1
answered on 16 Feb 2016, 09:48 AM

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.

0
Hristo
Telerik team
answered on 16 Feb 2016, 01:43 PM
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
0
Mark
Top achievements
Rank 1
answered on 17 Feb 2016, 11:16 AM

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,

0
Hristo
Telerik team
answered on 17 Feb 2016, 02:49 PM
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 -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 -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
Tags
GridView
Asked by
Mark
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Hristo
Telerik team
Share this question
or