Binding Data to RadFluidControl

2 posts, 1 answers
  1. vinay Theethira
    vinay Theethira avatar
    35 posts
    Member since:
    Mar 2010

    Posted 21 Apr 2011 Link to this post

    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)
                {
                }
            }
  2. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 26 Apr 2011 Link to this post

    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
  3. DevCraft banner
Back to Top