[Solved] Row Style capabilities

[christina noel]

It's a requirement in my current project that we be able to present our data in two ways. The first way is in a standard gridview. The second way needs to look like tileview, with thumbnails that will display the data in columns and rows. We would like to be able to show the thumbnail display while keeping the gridview-like filtering and sorting.

It looks to me that just changing the row template of the gridview will not acheive this because they are still "rows" not "tiles" when they are rendered. Is that correct?

Is there some other out-of-the-box method for displaying something like tileview while keeping filtering, sorting and grouping?

--Christina

[Vlad]

Hi Christina,

 You can modify the grid template similar to my blog post to achieve your goal. 

All the best,
Vlad
the Telerik team

[christina noel]

If I remove the GridViewScrollViewer as you suggest, it removes the header and footer rows. In addition to the fact that I want my header and footer rows to still show, I get runtime errors because they're lacking.

Can you show me more snippets of your control template than are visible in the blog post so that I can see where to put the header and footer rows?

Also, I'm having problems getting the tileview to produce scrollbars. I need scrollbars either from the grid (that's what GridViewScrollViewer was doing, right?) or from the tileview.

--Christina

[christina noel]

Nevermind... there was a StackPanel in my usercontrol that was preventing the scrolling from working properly. I feel like an idiot for not noticing it earlier.

Anyway, I've done a variation on your method so that I can get at my tileView without having to completely copy the default style. It feels kind of "hacky", because it involves using the gridView's ItemContainerStyle. But since nothing else seems to be using that field, it looks like this is working. If you can come up with a reason why doing this is a bad idea, please let me know.

First, I left the GridViewScrollViewer in place.

The default template (in Office_Blue) has the following as the GridViewScrollViewer's content:

<grid:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"   />

I changed that so that it looked like this:

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <grid:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"  Visibility="{Binding Visibility, ElementName=otherContent, Converter={StaticResource InvertVisibilityConverter}}" />
    <ContentPresenter x:Name="otherContent" Style="{TemplateBinding ItemContainerStyle}"/>
</Grid>

I then created a ContentPresenter Style that just hides the presenter:

<Style x:Key="noOtherContentStyle" TargetType="ContentPresenter">
    <Setter Property="Visibility" Value="Collapsed"/>
</Style>

And attached that style to ItemContainerStyle in the default style for the RadGridView.

I copied "noOtherContentStyle" into my own app and then created a new content presenter style like this:

<Style x:Key="smallTilePanel" TargetType="ContentPresenter">
     <Setter Property="ContentTemplate" Value="{StaticResource smallThumbnailTemplate}"/>
 </Style>

I created my tileView in the smallThumbnailTemplate.

I can now switch the gridView's ItemContainerStyle back and forth between "noOtherContentStyle" and "smallTilePanel" in order to switch between my gridView and tileView. If I bind the tileView itemsource directly to the gridView itemsource and make the gridView itemsource a QueryableCollectionView, they will stay in sync no matter how I sort or filter on the grid header.

Thank you for pointing me in the right direction on this. It's now behaving exactly the way we want it to, except that it fails when trying to group. I might go back later and see if I can do something similar to the GridGroupRow template, but for right now, we're just switching back to grid view if the user tries to group while in tile view.

--Christina

Edit: I also had to set the "otherContent" ContentPresenter  Width="{Binding ViewportWidth, ElementName=PART_ItemsScrollViewer}". If I didn't, the tileView would always show with three columns, no matter how I set ColumnsCount. That restricts me to no horizontal scrolling through the GridViewScrollViewer, but I don't really care about that in this case.