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

Binding Data to RadFluidControl

1 Answer 60 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Vinay
Top achievements
Rank 1
Vinay asked on 21 Apr 2011, 08:07 AM
Hi,
I have a TileView control with RadFluid Content control,But when i Bind the Data from RIA Service to the Control, It only displays 4 panels,No Data is loaded as i intended.....
<Grid x:Name="LayoutRoot">
        <telerik:RadTileView Name="TileVIew1" TileStateChanged="RadTileView_TileStateChanged">
            <telerik:RadTileViewItem Header="{Binding FirstName}">
                <telerik:RadFluidContentControl ContentChangeMode="Manual">
                    <telerik:RadFluidContentControl.SmallContent>
                        <Grid Width="200" Height="200">
                            <TextBlock Text="{Binding FirstName}" ></TextBlock>
                        </Grid>
                    </telerik:RadFluidContentControl.SmallContent>
                    <telerik:RadFluidContentControl.Content>
                        <Grid Width="400" Height="400">
                            <TextBlock Text="{Binding FirstName}" ></TextBlock>
                        </Grid>
                    </telerik:RadFluidContentControl.Content>
                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
 
 
                            <!--<Image Source="../Images/TileView/Flags/map.png" Grid.ColumnSpan="2" Grid.RowSpan="2" />-->
                            <!--<Image Source="{Binding LargeFlag}" Grid.Column="1" Margin="10" />-->
                            <telerik:RadWrapPanel Margin="20">
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="First Name:" />
                                    <TextBlock Text="{Binding FirstName}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Last Name:" />
                                    <TextBlock Text="{Binding LastName}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Company Name:" />
                                    <TextBlock Text="{Binding CompanyName}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Email ID:" />
                                    <TextBlock Text="{Binding EmailAddress}"  />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="10">
                                    <TextBlock Text="Phone:" />
                                    <TextBlock Text="{Binding Phone}"  />
                                </StackPanel>
                            </telerik:RadWrapPanel>
                            <TextBlock FontSize="11" TextWrapping="Wrap" Text="{Binding EmailAddress}" Grid.Row="1"
                                Grid.ColumnSpan="2" Margin="20" />
                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </telerik:RadTileViewItem>
        </telerik:RadTileView>       
    </Grid>
And  i am trying to Bind the Data got from the RIA Service like,
AdventureWorksDomainContext _DomainContxt = new AdventureWorksDomainContext();
        public TileView()
        {
            InitializeComponent();
 
            Loaded += new RoutedEventHandler(TileView_Loaded);
        }
 
        void TileView_Loaded(object sender, RoutedEventArgs e)
        {
            try
            {
                AdventureWorksDomainContext ctx = new AdventureWorksDomainContext();
               // List<Customer> customers = new List<Customer>();
               // var loadOperation = _DomainContxt.Load(_DomainContxt.GetCustomerQuery());
               //loadOperation.Completed += new EventHandler(loadOperation_Completed);
                //dataGrid1.ItemsSource = ctx.Customers;
                TileVIew1.Items.Clear();
                TileVIew1.ItemsSource = ctx.Customers;
                ctx.Load(ctx.GetCustomerQuery());              
                 
            }
            catch (Exception ex)
            {
            }
        }

1 Answer, 1 is accepted

Sort by
0
Accepted
Zarko
Telerik team
answered on 26 Apr 2011, 05:14 PM
Hello vinay uthappa,

 When you bind the RadTileView you should set ContentTemplate and ItemTemplate to it, not an RadTileViewItem:

<Grid x:Name="LayoutRoot">
    <telerik:RadTileView Name="TileVIew1" TileStateChanged="TileVIew1_TileStateChanged">
        <telerik:RadTileView.ContentTemplate>
            <DataTemplate>
                <telerik:RadFluidContentControl ContentChangeMode="Manual">
                    <telerik:RadFluidContentControl.SmallContent>
                        <Grid Width="200" Height="200">
                            <TextBlock Text="{Binding FirstName}" />
                        </Grid>
                    </telerik:RadFluidContentControl.SmallContent>
                    <telerik:RadFluidContentControl.Content>
                        <Grid Width="400" Height="400">
                            <TextBlock Text="{Binding FirstName}" />
                        </Grid>
                    </telerik:RadFluidContentControl.Content>
                    <telerik:RadFluidContentControl.LargeContent>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
 
                            <!--  <Image Source="../Images/TileView/Flags/map.png" Grid.ColumnSpan="2" Grid.RowSpan="2" />  -->
                            <!--  <Image Source="{Binding LargeFlag}" Grid.Column="1" Margin="10" />  -->
                            <telerik:RadWrapPanel Margin="20">
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="First Name:" />
                                    <TextBlock Text="{Binding FirstName}" />
                                </StackPanel>
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="Last Name:" />
                                    <TextBlock Text="{Binding LastName}" />
                                </StackPanel>
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="Company Name:" />
                                    <TextBlock Text="{Binding CompanyName}" />
                                </StackPanel>
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="Email ID:" />
                                    <TextBlock Text="{Binding EmailAddress}" />
                                </StackPanel>
                                <StackPanel Margin="10" Orientation="Horizontal">
                                    <TextBlock Text="Phone:" />
                                    <TextBlock Text="{Binding Phone}" />
                                </StackPanel>
                            </telerik:RadWrapPanel>
                            <TextBlock Grid.Row="1"
                                           Grid.ColumnSpan="2"
                                           Margin="20"
                                           FontSize="11"
                                           Text="{Binding EmailAddress}"
                                           TextWrapping="Wrap" />
                        </Grid>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </DataTemplate>
        </telerik:RadTileView.ContentTemplate>
        <telerik:RadTileView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding FirstName}" />
            </DataTemplate>
        </telerik:RadTileView.ItemTemplate>
    </telerik:RadTileView>
</Grid>
and in the handler for the TileStateChanged event you can change the content like this:
private void TileVIew1_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    RadTileViewItem container = e.OriginalSource as RadTileViewItem;
    if (container != null)
    {
        RadFluidContentControl fluidControl = container.ChildrenOfType<RadFluidContentControl>().FirstOrDefault();
        if (fluidControl != null)
        {
            switch (container.TileState)
            {
                case TileViewItemState.Maximized:
                    fluidControl.State = FluidContentControlState.Large;
                    break;
                case TileViewItemState.Minimized:
                    fluidControl.State = FluidContentControlState.Small;
                    break;
                case TileViewItemState.Restored:
                    fluidControl.State = FluidContentControlState.Normal;
                    break;
            }
        }
    }
}
If you have further questions feel free to ask.

All the best,
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
Tags
TileView
Asked by
Vinay
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Share this question
or