Databind Header of a Tileview

[Rick Mueller]

Hello,
I'm pretty new to this so bare with me.

I'm able to databind my XML source to the tileview inside a grid. I can populate the contentTemplate with the right binding. The header populates the whole string..It works in a Listbox,Expanders, and treeviews etc,but I can't get this work.  Any thoughts?

<Grid Height="376" Canvas.Left="60.637" Canvas.Top="119" Width="248" DataContext="{Binding Source={StaticResource Contact}}">
    <telerikNavigation:RadTileView ItemsSource="{Binding}" MinimizedColumnWidth="100"  Margin="0,-38,-543.363,-132.5" HorizontalAlignment="Right" Width="622.363">
        <telerikNavigation:RadTileView.ContentTemplate>

            <DataTemplate x:Name="TileDAta">
                <TextBlock x:Name="reText2" FontSize="18" Foreground="Black" Text="{Binding XPath=ContactName}"/>
            </DataTemplate>
        </telerikNavigation:RadTileView.ContentTemplate>

    </telerikNavigation:RadTileView>
</Grid>

[Viktor Tsvetkov]

Hi Rick Mueller,

If you want to edit the header, you have to add custom template to the ItemTemplate property of the RadTileView, because RadTileViewItem is a HeaderedContentControl.

Regards,
Viktor Tsvetkov
the Telerik team

[Rick Mueller]

THank you ,

That took 3 minutes to figure out. I'm Still hitting a little bump though. If its pulling its data from a CollectionView Source and the Source that is binded to the headers are in a PropertyGroupDescription .The panel headers should populate by group? Instead it is poplulating all items instead of grouping.  I hope that makes since. I'm using the same XmlDataProvider and CollectionViewSource for Listboxes and it works good 

Ay Thoughts

Regards,
RIck Mueller

[Viktor Tsvetkov]

Hi Rick Mueller,

Could you please send me your whole sample project, so I will be able to better assist you?

Best wishes,
Viktor Tsvetkov
the Telerik team

[Rick Mueller]

XML Data File

<NewDataSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 
  <Table>
   <CompanyName>Digital Kitchen1</CompanyName>
   <Location>Eden Prairie1</Location>
   <ContactName>Rick Mueller</ContactName>
   <ContactTitle>PrepCook</ContactTitle>
   <EmpImage>male.jpg</EmpImage>
   <StDate>15664</StDate>
   <EmpId>156</EmpId>
  </Table>
  <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>Eden Prairie</Location>
   <ContactName>Willie The Dog</ContactName>
   <ContactTitle>LineCook</ContactTitle>
   <EmpImage>male.jpg</EmpImage>
   <StDate>40535</StDate>
   <EmpId>156</EmpId>
  </Table>
 <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>Eden Prairie</Location>
   <ContactName>Jose Sosa</ContactName>
   <ContactTitle>Dishwasher</ContactTitle>
   <EmpImage>male.jpg</EmpImage>
   <StDate>40535</StDate>
   <EmpId>156</EmpId>
  </Table>
  <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>Eden Prairie</Location>
   <ContactName>Maria Anders</ContactName>
   <ContactTitle>BroilerCook</ContactTitle>
   <EmpImage>female.jpg</EmpImage>
   <StDate>40535</StDate>
   <EmpId>156</EmpId>
  </Table>
 <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>Eden Prairie</Location>
   <ContactName>JHimmy</ContactName>
   <ContactTitle>SauteCook</ContactTitle>
   <EmpImage>female.jpg</EmpImage>
   <StDate>40535</StDate>
   <EmpId>156</EmpId>
 </Table>
 <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>Eden Prairie</Location>
   <ContactName>JHimmy</ContactName>
   <ContactTitle>Prep3</ContactTitle>
   <EmpImage>female.jpg</EmpImage>
   <StDate>40535</StDate>
   <EmpId>156</EmpId>
  </Table>
 <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>St.Cloud</Location>
   <ContactName>Sue Whatido</ContactName>
   <ContactTitle>Manager</ContactTitle>
   <EmpImage>female.jpg</EmpImage>
   <StDate>40535</StDate>
  </Table>
  <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>Eden Prairie</Location>
   <ContactName>Jose Sosa</ContactName>
   <ContactTitle>Manager</ContactTitle>
   <EmpImage>male.jpg</EmpImage>
   <StDate>40535</StDate>
   <EmpId>156</EmpId>
  </Table>
  <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>Eden Prairie</Location>
   <ContactName>JHimm</ContactName>
   <ContactTitle>Fry Cook</ContactTitle>
   <EmpImage>aome.jpg</EmpImage>
   <StDate>40535</StDate>
   <EmpId>156</EmpId>
  </Table>
  <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>Eden Prairie</Location>
   <ContactName>JHimmy</ContactName>
   <ContactTitle>SousChef</ContactTitle>
   <EmpImage>female.jpg</EmpImage>
   <StDate>40535</StDate>
   <EmpId>156</EmpId>
  </Table>
  <Table>
   <CompanyName>Digital Kitchen</CompanyName>
   <Location>Eden Prairie</Location>
   <ContactName>JHimmy</ContactName>
   <ContactTitle>Chef</ContactTitle>
   <EmpImage>female.jpg</EmpImage>
   <StDate>40535</StDate>
   <EmpId>156</EmpId>
  </Table>
</NewDataSet>


XAML:


<Window

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase" 

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    x:Class="TileViewSample.MainWindow"

    x:Name="Window"

    Title="MainWindow"

    Width="640" Height="480">

  

<Window.Resources>

    <XmlDataProvider x:Key="Contact"

            Source="Database/Employee.xml"

            XPath="NewDataSet/Table"/>

        <CollectionViewSource x:Key="Employees"

            Source="{StaticResource Contact}">

            <CollectionViewSource.SortDescriptions>

                    <scm:SortDescription PropertyName="ContactTitle" Direction="Ascending"/>

            </CollectionViewSource.SortDescriptions>

            <CollectionViewSource.GroupDescriptions>

                    <PropertyGroupDescription PropertyName="ContactTitle"/>

            </CollectionViewSource.GroupDescriptions>

        </CollectionViewSource>

    <Style x:Key="RadTileViewStyle1" TargetType="{x:Type telerik:RadTileView}">

            <Setter Property="Background" Value="Transparent"/>

            <Setter Property="ScrollBarVisibility" Value="Auto"/>

            <Setter Property="IsAnimationOptimized" Value="False"/>

            <Setter Property="Padding" Value="7"/>

            <Setter Property="ItemsPanel">

                <Setter.Value>

                    <ItemsPanelTemplate>

                          

                        <Canvas Background="Transparent" IsItemsHost="True"/>

                    </ItemsPanelTemplate>

                </Setter.Value>

            </Setter>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type telerik:RadTileView}">

                        <Grid>

                            <Border Background="{TemplateBinding Background}">

                                <Grid>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto"/>

                                        <ColumnDefinition Width="*"/>

                                        <ColumnDefinition Width="Auto"/>

                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="Auto"/>

                                        <RowDefinition Height="*"/>

                                        <RowDefinition Height="Auto"/>

                                    </Grid.RowDefinitions>

                                    <ItemsPresenter x:Name="ItemsPresenter" Grid.Column="1" Grid.Row="1"/>

                                    <ScrollBar x:Name="LeftScrollBar" Grid.Column="0" Maximum="0" Margin="0,7" Orientation="Vertical" Grid.Row="0" Grid.RowSpan="3" Visibility="Collapsed">

                                        <telerik:StyleManager.Theme>

                                            <telerik:Office_BlackTheme/>

                                        </telerik:StyleManager.Theme>

                                    </ScrollBar>

                                    <ScrollBar x:Name="TopScrollBar" Grid.ColumnSpan="3" Grid.Column="0" Maximum="0" Margin="7,0" Orientation="Horizontal" Grid.Row="0" Visibility="Collapsed">

                                        <telerik:StyleManager.Theme>

                                            <telerik:Office_BlackTheme/>

                                        </telerik:StyleManager.Theme>

                                    </ScrollBar>

                                    <ScrollBar x:Name="RightScrollBar" Grid.Column="2" Maximum="0" Margin="0,7" Orientation="Vertical" Grid.Row="0" Grid.RowSpan="3" Visibility="Collapsed">

                                        <telerik:StyleManager.Theme>

                                            <telerik:Office_BlackTheme/>

                                        </telerik:StyleManager.Theme>

                                    </ScrollBar>

                                    <ScrollBar x:Name="BottomScrollBar" Grid.ColumnSpan="3" Grid.Column="0" Maximum="0" Margin="7,0" Orientation="Horizontal" Grid.Row="2" Visibility="Collapsed">

                                        <telerik:StyleManager.Theme>

                                            <telerik:Office_BlackTheme/>

                                        </telerik:StyleManager.Theme>

                                    </ScrollBar>

                                </Grid>

                            </Border>

                            <Rectangle x:Name="DisabledVisual" Fill="#99FFFFFF" Visibility="Collapsed"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    <DataTemplate x:Key="DataTemplate1">

            <Grid>

                <TextBlock x:Name="TileContent_Data" FontSize="18" Foreground="Black" Text="{Binding XPath=ContactTitle}"/>

            </Grid>

              

        </DataTemplate>

      

</Window.Resources>

  

    <Grid x:Name="LayoutRoot" DataContext="{Binding Mode=OneWay, Source={StaticResource Employees}}">

            <telerik:RadTileView 

                        ItemsSource="{Binding}" 

                        MinimizedItemsPosition="Bottom" 

                        MaxColumns="3" MaxRows="2" 

                        TileStateChangeTrigger="SingleClick" 

                        MinimizedColumnWidth="100"  Margin="0,8,8,8" 

                        ItemTemplate="{DynamicResource DataTemplate1}"  >

                  

                 <telerik:RadTileView.ContentTemplate>

                    <DataTemplate x:Name="TileData">

                                    <ListBox x:Name="TileContent_Data" FontSize="18" Foreground="Black" ItemsSource="{Binding XPath=ContactName}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>

                    </DataTemplate>

                </telerik:RadTileView.ContentTemplate>

            </telerik:RadTileView>

    </Grid>

</Window>

Thank you for your time on reviewing my issues.
I wasn't able to attach a zip file??? So I hope this is what you want.

Regards,
RIck Mueller

[Rick Mueller]

Anythought?

Thanks

[Viktor Tsvetkov]

Hello Rick Mueller,

I reproduced your project, but I am not sure what your problem is. Could you please explain me how your desired output should looks like: what do you want to have as a header of the RadTileViewItems and what as a content?

Kind regards,
Viktor Tsvetkov
the Telerik team

[Rick Mueller]

Viktor,
I'm trying to have each panel have a Header of the "Department". IE; Manager, Chef Etc. Then the ContentPanel will populate all the staff under that title. Right now Manager panel shows up twice with one item in the content panel. I'm trying to only have one Manager panel with 2 names populating the contentpanel.. Does that make sence?

Regards,
Rick

[Viktor Tsvetkov]

Hello Rick Mueller,

Could you please examine the attached project and tell me if it works for you?

Sincerely yours,
Viktor Tsvetkov
the Telerik team

[Rick Mueller]

Victor,

Perfect.  I know Databind 101, but I'm still around 80. I know what I was doing wrong. Thank you for pushing me in the right direction

Regards,
Rick Mueller

[Ayushi]

Hi ,
This is Ayushi Rastogi,I have a Problem That I use RadTileView in my WPF application its working fine.
I made Tiles at runtime through code behind and the problem is I want to store ID column value in header part and hide the header.
Means I don't want to show the header.If any one get answer let me know asap.



With Regards,
Ayushi

[Zarko]

Hello Rick Mueller,

 Do you want to hide the whole header part or you just what text from the header not to be visible? If it's the fist case you'll have to edit the default template of the RadTileViewItem and remove the header for the second case you just need to set an ItemContainerStyle like this:

<telerik:RadTileView x:Name="myTileView">
    <telerik:RadTileView.ItemContainerStyle>
        <Style TargetType="telerik:RadTileViewItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate />
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:RadTileView.ItemContainerStyle>
        .....
</telerik:RadTileView>

For further informations please examine the attached project.

Greetings,
Zarko
the Telerik team