HtmlViewDefinition Equivalent in Silverlight

[Christian]

Hello all. I'm fairly new to Silverlight and the Telerik controls ... so I apologize if my question isn't precise enough. I'm working on an application with a particular design in mind for a RadGridView. The existing Telerik control seems to support virtually everything we need to implement the design (in Silverlight). One critical feature seems to only exist within the WinForms grid view control, HtmlViewDefinition.

The requirement was believed to be fairly straight forward. Much as with the standard demo here, we wanted to display several pieces of data stacked vertically within a single cell of the grid. However, unlike the demo which uses a custom row layout, we want our columns to remain connected to our row layout. In other words, in that demo, imagine that the image appears aligned beneath a column header labeled Thumbnail. Then, imagine that the next three columns (the ones actually seen in the demo ... First Name, Last Name, and City ... all appeared under a group header named "Basic Details". The data which displays the first name, last name, title, and city would be aligned in a "merged" column beneath the group header of "Basic Details". So the header labels for First Name, Last Name, and City would all appear across the space allocated to the group header ... and the data contents of each row's cell would essentially be column spanned across those three actual headers. It would have an appearance similar to this example of HtmlViewDefinition here.

For completeness, the final stack of content might appear under a single header column of "Additional Details" ... or it might have 2 or more detail columns like Hire Date and Phone which were then under a group header functioning like the previous merged content described above.

I believe that I could accomplish this with the HtmlViewDefinition functionality ... if it were available in the Silverlight control. As one possible alternative, I'm trying to create a custom row template which simply mirrors the layout of the column headers. This requires me to disable user resizing of the columns which is unfortunate but definitely NOT a deal breaker. In my case, I have a slightly more complicated layout, but the crux of it is that I have 4 groups of column headers with 3 or 4 individual columns under each group name. I then setup the final column in each group to expand it's width to "1*". This allows each group to have a pre-defined minimum width while growing evenly as the window is resized. What I have been unable to accomplish is a custom row layout which achieves the same scaling as the window is resized ... and I can't figure out where I've gone wrong.

I would love to have a cleaner solution, as the HtmlViewDefinition feels like it would have provided. That would allow me to have real columns (allowing features like sorting, filtering, and grouping to be made available for the data within the vertical stack of details) for each key piece of data without requiring each piece of data be listed in a distinct horizontal column (and taking up much more space) and also provide the layout and constraints of the columns visually without requiring me to lay them out manually within the custom row layout.

Any thoughts to help out? I can provide screen shots of what I wind up with if that's useful.

Here is a rough sample of the code I'm using to layout the custom row template (just placeholder stuff) and the column configuration:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="267" Width="267*" />
        <ColumnDefinition MinWidth="200" Width="200*" />
        <ColumnDefinition MinWidth="200" Width="200*" />
        <ColumnDefinition MinWidth="150" Width="150*" />
    </Grid.ColumnDefinitions>
    <TextBlock Text="Group A: " Grid.Column="0" Padding="5,0,0,0" FontWeight="Bold"                        HorizontalAlignment="Stretch" VerticalAlignment="Center" />
    <Border    Width="1"        Grid.Column="1" Padding="0,10"    Background="{StaticResource BasicBrush}" HorizontalAlignment="Left"    VerticalAlignment="Stretch" />
    <TextBlock Text="Group B: " Grid.Column="1" Padding="6,0,0,0" FontWeight="Bold"                        HorizontalAlignment="Stretch" VerticalAlignment="Center"  />
    <Border    Width="1"        Grid.Column="2" Padding="0,10"    Background="{StaticResource BasicBrush}" HorizontalAlignment="Left"    VerticalAlignment="Stretch" />
    <TextBlock Text="Group C: " Grid.Column="2" Padding="6,0,0,0" FontWeight="Bold"                        HorizontalAlignment="Stretch" VerticalAlignment="Center"  />
    <Border    Width="1"        Grid.Column="3" Padding="0,10"    Background="{StaticResource BasicBrush}" HorizontalAlignment="Left"    VerticalAlignment="Stretch" />
    <TextBlock Text="Group D: " Grid.Column="3" Padding="6,0,0,0" FontWeight="Bold"                        HorizontalAlignment="Stretch" VerticalAlignment="Center"  />
</Grid>

            <telerik:RadGridView.ColumnGroups>
                <telerik:GridViewColumnGroup  Name="GroupA" Header="Group A" />
                <telerik:GridViewColumnGroup  Name="GroupB" Header="Group B" />
                <telerik:GridViewColumnGroup  Name="GroupC" Header="Group C" />
                <telerik:GridViewColumnGroup  Name="GroupD" Header="Group D" />
            </telerik:RadGridView.ColumnGroups>
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn MinWidth="76" MaxWidth="76" ColumnGroupName="GroupA"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field A 1</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="56" MaxWidth="56" ColumnGroupName="GroupA"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field A 2</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="65" MaxWidth="65" ColumnGroupName="GroupA"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field A 3</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="70" Width="1*"    ColumnGroupName="GroupA"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field A 4</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="50" MaxWidth="50" ColumnGroupName="GroupB"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field B 1</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="70" MaxWidth="70" ColumnGroupName="GroupB"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field B 2</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="80" Width="1*"    ColumnGroupName="GroupB"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field B 3</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="50" MaxWidth="50" ColumnGroupName="GroupC"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field C 1</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="70" MaxWidth="70" ColumnGroupName="GroupC"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field C 2</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="80" Width="1*"    ColumnGroupName="GroupC"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field C 3</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="50" MaxWidth="50" ColumnGroupName="GroupD"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field D 1</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="50" MaxWidth="50" ColumnGroupName="GroupD"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field D 2</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn MinWidth="50" Width="1*"    ColumnGroupName="GroupD"><telerik:GridViewDataColumn.Header><TextBlock TextWrapping="Wrap">Field D 3</TextBlock></telerik:GridViewDataColumn.Header></telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>

[Pavel Pavlov]

Hi Christian,

I am not sure the feature you request is available in RadGridView for Silverlight. However we may give this a try using some hacks as retemplating cells/rows  or alternatives - such as row details.

Can you please share a picture (maybe an Excel mock-up) that resembles the expected layout. Having the picture I can tell you exactly how far we can push the limitations of RadGridView for Silverlight without breaking something .

Regards,
Pavel Pavlov
the Telerik team

[Christian]

OK ... with the implementation as posted earlier (more or less) I can get the fake grouped columns in the custom row template to line up (almost exactly) with the actual group headers in the normal column headers. That's the first attached image (GroupsAligned-ish.png). Notice that I have the window narrow enough that it's forced into scrolling ... so everything is at the min width.

As you grow the window and the scalable parts start to scale wider, the alignment between the custom row layout and the column headers gradually drifts off. If I contort things to work while scaled out at a particular size, it again doesn't work right if I scale narrower (or wider) than that size. This can be seen in the second attached picture (StretchedDifferent.png).

Finally, you can see an Excel mockup of a similar layout we had designed for another part of our application that we haven't gotten to yet.The intent here is the same as we've been discussing. The first column is a "normal" column with a single (non-grouped) header and single data bound value in the cell. Next comes 4 columns in a single group named "Item Details". The entire space beneath the group is intended to be grouped into a single cell. Within that cell, there is a 2x2 grid at the top with the 4 data bound values connected to the columns in the header for that group. Beneath that grid of values is another, fairly wide piece of text content. We do not need to sort, group, or otherwise manipulate this value ... thus we planned to not have a column header for it. But we do want it displayed. In order to avoid a wide column in the display for this longer text value, we designed it to appear below the 2x2 grid of values in this merged cell.

Next are three columns in a group with the data displayed in a vertical stack within a merged cell. Same concept that we've been discussing. If I skip the next column, the last column is a normal single value single cell single header. That skipped column, "Data Value" shows a more complex arrangement. Here we do not need sorting or filtering or anything for the contents of the cell, so there would likely be no value data bound to the column. But, inside that cell, we would have a grid with labels on the left, data bound values in the middle, and more data bound values on the right. We envision allowing the bottom 2 values in that grid to be editable, but the rest is read only.

Please let me know your thoughts on all of this. Thanks for any / all help!

[Pavel Pavlov]

Hi Christian,

Thanks for sending the screenshots!  I am currently preparing a small sample app for you to try find out how far we can push the limits of the RadGridView visual tree . I am not sure we can get 100 % of the desired layout but we can get pretty close.

I am leaving the thread open and will attach the sample as soon as it is ready .

Regards,
Pavel Pavlov
the Telerik team

[Pavel Pavlov]

Hello Christian ,

Please excuse me for the delay. We are a bit short of resources these summer days.

I am attaching the sample promised.

Regards,
Pavel Pavlov
the Telerik team

[Christian]

Unfortunately, that example only shows a custom header and cell template.The cell template allows the user to resize the space used by all 4 grouped columns, but we would still lose the ability to sort on the individual values, filter on the individual values, and group by the individual values (since they have a shared column header and not individual headers for each data point).

Other than doing a normal "thin" row of data, the only workable option that we have come up with to support merged cells within the rows is to use a row template:

ROW TEMPLATE
----------------------
Use a row template, but somehow get our XAML to layout the contents of the row with the same scaling behavior that the header has. If we hard code each column within the group to a specific size (same min and max width) except for the last column in each group ... and we have 4 groups in our grid ... then we'd expect each group to take up roughly 1/4 of the width of the grid. Since only the last column in each group can grow larger ... as the browser is made wider than the minimum widths ... the last column in each of the 4 groups will grow larger ... roughly keeping each group to 1/4 of the total grid width.

The problem is that we haven't been able to design any XAML that will allow our contents of the row template to replicate the same scaling behavior. As shown in the previous screen shots, we can get them to line up at the minimum widths. But once you start growing wider, the size of the 4 sections of our row template do not scale the same as the 4 groups in the column headers. Perhaps you all would have better luck creating such a XAML structure?

    PROS: All data points can have an individual column header ... column headers do NOT have to be the same width as the data contained in that column ... since all data points have separate column headers, they can all be sorted, filtered, and grouped as the user desires.
    CONS: We have to lock down all user resizing of the columns since we have to carefully keep the row template XAML structured to match the appearance and behavior of the column headers. Similarly we can not allow the user to re-order the columns since we would have no idea of where they moved and how to comparably adjust our row template structure (without a lot of additional code and effort).


We would be content with the row template option if we could resolve the alignment of the row template contents with the scalable column sizes. Failing that, we may try to investigate something with row details to help achieve the desired visual design. In other words, we don't think we can give up on column sorting, filtering, and grouping for our grid. Thus, we must continue to investigate other options. Any help you can still provide would be much appreciated. Thanks!

To that end, would it be useful for us to put in place our idea of 4 groups that scale with the row template into the solution you provided and upload that back?

[Dimitrina]

Hi,

Thank you for the detailed use case you have described.

Unfortunately the GridView is not designed to work in such scenarios. It covers many cases but we can’t claim to fully support all possible use cases. 
The customization we can suggest is what my colleague has shown in the sample project. In regard to the requirements you have, you could conciser your own control created and designed for your particular needs. 

Regards,
Didie
the Telerik team