Databind Header of a Tileview

12 posts, 0 answers
  1. Rick Mueller
    Rick Mueller avatar
    103 posts
    Member since:
    Feb 2010

    Posted 23 Aug 2010 Link to this post

    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>
  2. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 24 Aug 2010 Link to this post

    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
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Rick Mueller
    Rick Mueller avatar
    103 posts
    Member since:
    Feb 2010

    Posted 24 Aug 2010 Link to this post

    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
  5. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 24 Aug 2010 Link to this post

    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
    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 Public Issue Tracking system and vote to affect the priority of the items
  6. Rick Mueller
    Rick Mueller avatar
    103 posts
    Member since:
    Feb 2010

    Posted 24 Aug 2010 Link to this post

    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:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase" 
        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


  7. Rick Mueller
    Rick Mueller avatar
    103 posts
    Member since:
    Feb 2010

    Posted 25 Aug 2010 Link to this post

    Anythought?

    Thanks
  8. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 25 Aug 2010 Link to this post

    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
    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 Public Issue Tracking system and vote to affect the priority of the items
  9. Rick Mueller
    Rick Mueller avatar
    103 posts
    Member since:
    Feb 2010

    Posted 25 Aug 2010 Link to this post

    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
  10. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 25 Aug 2010 Link to this post

    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
    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 Public Issue Tracking system and vote to affect the priority of the items
  11. Rick Mueller
    Rick Mueller avatar
    103 posts
    Member since:
    Feb 2010

    Posted 25 Aug 2010 Link to this post

    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
  12. Ayushi
    Ayushi avatar
    1 posts
    Member since:
    Apr 2011

    Posted 09 Apr 2011 Link to this post

    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
  13. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 13 Apr 2011 Link to this post

    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
    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 Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready