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

Show the 5th Item at Top in DataBoundListBox

6 Answers 26 Views
DataBoundListBox
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Tanvir
Top achievements
Rank 1
Tanvir asked on 08 Jan 2015, 10:58 AM
Hello,

I am currently stuck at this problem. Suppose I have 10 Items in a DataBoundListBox. But I want to show the 5th Item at Top when the ListBox is loaded. Rest of the Items will also be available on Top. If anyone Scrolls up, the person will also be able to see the first 4 elements.

But when the ListBox will be loaded, the 5th Item will be the one at the top.

How can I do it from C#? Any help will be highly appreciated. :)

Thanks a lot.

Regards,
Tanvir Hassan Sourov.

6 Answers, 1 is accepted

Sort by
0
Tanvir
Top achievements
Rank 1
answered on 08 Jan 2015, 12:11 PM
Hello,

I have also followed this.

// Suppose my ListBox name is myListBox

// And I have List Collection which is named as items. There are 10 items in the List named items.

myListBox.BringIntoView(items[5]);

Logically, it should bring in the 5th element at the top of the ListBox. But I am facing problem in here. The Second or Third element is coming to top depending on Page Variations.

How can I solve that? Thanks.

Regards.
0
Tanvir
Top achievements
Rank 1
answered on 08 Jan 2015, 03:10 PM
This is the Code that I have written in the XAML part of my App:

<telerikPrimitives:RadDataBoundListBox Grid.Row="1" x:Name="myListBox" Margin="12,24,12,12" IsAsyncBalanceEnabled="True"
                   >
    <telerikPrimitives:RadDataBoundListBox.ItemTemplate >
        <DataTemplate >
            <telerikPrimitives:RadExpanderControl IsExpanded="True" ExpandableContent="{Binding}" Content="{Binding}">
                <telerikPrimitives:RadExpanderControl.ContentTemplate>
                    <DataTemplate>
                        <Grid Margin="0, 6, 0, 12" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Width="50" Height="50" Source="{Binding ImageSource}"/>
                            <TextBlock Foreground="White" Grid.Column="1" Margin="12,6,12,6" Text="{Binding Text1}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="Segoe WP SemiLight"/>
                        </Grid>
                    </DataTemplate>
                </telerikPrimitives:RadExpanderControl.ContentTemplate>
                <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
                    <DataTemplate>
                        <StackPanel >
                            <Grid Margin="0,0,0,17">
                                <StackPanel Margin="6">
                                    <TextBlock Foreground="White"  Text="{Binding Text2}" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="{StaticResource PhoneFontSizeNormal}"/>
                                    <TextBlock Foreground="White"  Text="{Binding Text3}" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="{StaticResource PhoneFontSizeNormal}"/>
                                    <TextBlock Foreground="White"  Text="{Binding Text4}" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="{StaticResource PhoneFontSizeNormal}"/>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Foreground="White"  Text="More Text:"/>
                                        <TextBlock Foreground="White"  FontWeight="Bold" Text="{Binding Text5}"/>
                                        <TextBlock Foreground="White"  FontWeight="Bold" Text="{Binding Text6}"/>
                                    </StackPanel>
                                </StackPanel>
                            </Grid>
                            <Border Margin="0,6,0,17" BorderThickness="0,0,0,12" BorderBrush="#55555555" RenderTransformOrigin="0.5,0.5">
                            </Border>
                            <Border Margin="0,-44,0,17" BorderThickness="0,0,0,8" BorderBrush="{Binding ColorCode}" RenderTransformOrigin="0.5,0.5">
                                <Border.RenderTransform>
                                    <CompositeTransform SkewX="-40" />
                                </Border.RenderTransform>
                            </Border>
 
                        </StackPanel>
                    </DataTemplate>
                </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
            </telerikPrimitives:RadExpanderControl>
        </DataTemplate>
    </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox>


And this is the Code that I have in C#:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
  
    base.OnNavigatedTo(e);
 
    List<XMLItem> aux = new List<XMLItem>();
    PropertyItem props;
 
    for (int i = 0; i < 10; i++ )
    {
        props = new PropertyItem();
 
        props.Text1 = "Item = 1, Value = " + (i + 1).ToString();
        props.Text2 = "Item = 2, Value = " + (i + 1).ToString();
        props.Text3 = "Item = 3, Value = " + (i + 1).ToString();
        props.Text4 = "Item = 4, Value = " + (i + 1).ToString();
        props.Text5 = "Item = 5, Value = " + (i + 1).ToString();
        props.Text6 = "Item = 6, Value = " + (i + 1).ToString();
        props.ColorCode = "#a2af2a";
        props.ImageSource = "/Assets/ApplicationIcon.png";
 
        aux.Add(props);
 
    }
 
    myListBox.ItemsSource = aux;
    myListBox.BringIntoView(aux[4]);
}

The Code in my C# should normally Bring into view the 11th Item from the List. But normally, it brings the 2nd or 3rd Item at top when the Page is loaded. Is there any solution to solve the problem.

Normally, the 5th Item is supposed to be on top when the page is loaded. How to solve this problem? Thanks a lot.

Regards,
Tanvir
0
Ivaylo Gergov
Telerik team
answered on 12 Jan 2015, 04:50 PM
Hi Tanvir,

It seems that when the code that brings into view the fifth item is executed, the RadExapnder controls have not been expanded yet, and the databoundlistbox does not take into account their expanded size. I will try to workaround this and I will get back to you with more information.


Regards,
Ivaylo Gergov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tanvir
Top achievements
Rank 1
answered on 12 Jan 2015, 05:23 PM
Hello Ivaylo,

Thanks for your reply. I will very much be looking forward to hear from you about how to solve this problem. I am stuck at this for the past few days. So, a little early respond from you will be really helpful.

Thanks a lot.

Regards,
Tanvir Sourov.
0
Ivaylo Gergov
Telerik team
answered on 14 Jan 2015, 01:22 PM
Hello Tanvir,

Unfortunately, currently the DataBoundListBox does not expose a suitable end point to plug in and achieve the desired result. We will think of a way to improve the current API. However, if this is a showstopper for your application, I can suggest a possible workaround which I would not recommend and which in my opinion is against all application design patterns.
In ItemTemplate the RadExpanderControl can listen to its SizeChanged event. Then, when the RadExpander starts to fire the updated values(taking into account the expanded state) you can bring into view the desired item and also detach from the SizeChanged event handler.
I have prepared a sample project using the provided code snippet to demonstrate this. Please, see the attached file. 

Please, let me know if this helps.  

Regards,
Ivaylo Gergov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tanvir
Top achievements
Rank 1
answered on 14 Jan 2015, 07:28 PM
Hello Ivaylo,

Thanks a lot for your kind solution! Using the SizeChanged Event worked like a charm in my scenario. The problem that I have been facing is solved. Thanks a lot for your kind help. You are awesome! :-)

Regards,
Tanvir Sourov.
Tags
DataBoundListBox
Asked by
Tanvir
Top achievements
Rank 1
Answers by
Tanvir
Top achievements
Rank 1
Ivaylo Gergov
Telerik team
Share this question
or