selected item's index

[Wolfshund]

Hi,

I'm using a RadListpicker control for a expense app, which is bound to a category table  through Items source property (ObservableCollection). Everthing is well and the items are listed properly in the Listpicker (Popup).
Now, after I selected an item and also enter the rest of the expense record and hitting save button, the item saved within the record is actually the selected item -1 (previous one), for example, these Listpicker items:

1. Books
2. Magazines
3. Newspapers
4. Food
5. Pet
......

if I select 3. Newspapers from the above list, then the saved item is 2. Magazines. Looks like I'm something missing here.
Here is my code:
XAML

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0">
        <telerikInput:RadListPicker x:Name="CategoryList"
                                    Header="Category"
                                    ItemsSource="{Binding AllCategoryItems}"
                                    SelectedItem="{Binding AllCategoryItems}"
                                    Margin="6,6,18,0"
                                    PopupHeader="Select Category"
                                    DisplayMemberPath="Description">
            <telerikInput:RadListPicker.PopupItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="0, 27, 0, 24">
                        <Rectangle Fill="Violet" Width="43" Height="43"/>
                        <TextBlock Text="{Binding Description}" Margin="16 -8 0 0"/>
                    </StackPanel>
                </DataTemplate>
            </telerikInput:RadListPicker.PopupItemTemplate>
        </telerikInput:RadListPicker>
       <telerikPrimitives:RadTextBox Height="110" Header="Description" HorizontalAlignment="Left" Margin="-6,95,0,0" x:Name="txtExpense" Text="" Watermark="enter some text"  VerticalAlignment="Top" Width="456" />
        <telerikPrimitives:RadToggleSwitch x:Name="tglBalanceType" Margin="0,213,253,0" Header="Transaction Type" FontSize="22" HorizontalAlignment="Right" Content="Withdraw" IsChecked="{Binding Deposit, Mode=TwoWay}" />
        <telerikPrimitives:RadTextBox Height="110" Header="Amount" HorizontalAlignment="Left" Margin="216,196,0,0" x:Name="txtValue" Text="" Watermark="enter value" VerticalAlignment="Top" Width="234" />
        <telerikPrimitives:RadTextBox Height="166" Header="Notes" HorizontalAlignment="Left" Margin="-6,302,0,0" x:Name="txtNote" Text="" Watermark="enter note" VerticalAlignment="Top" Width="456" />
    </Grid>
</Grid>

C# Code

namespace Expense
{
    public partial class AddExpense : PhoneApplicationPage
    {
        public AddExpense()
        {
            InitializeComponent();
            tglBalanceType.Checked += new EventHandler<RoutedEventArgs>(tglBalanceType_Checked);
            tglBalanceType.Unchecked += new EventHandler<RoutedEventArgs>(tglBalanceType_Unchecked);

            this.DataContext = this;
            Loaded += new RoutedEventHandler(AddExpense_Loaded);
        }

        void AddExpense_Loaded(object sender, RoutedEventArgs e)
        {

            // all Daily transactions sum query --------------------------
            var CategoryItemsList = from c in App.Context.CategoryItems
                                    select c;

            allCategoryItems = new ObservableCollection<Category>(CategoryItemsList);
            this.CategoryList.ItemsSource = allCategoryItems;
        }

        // all monthly trancactions sum --------------------------
        private ObservableCollection<Category> All_CategoryItems;
        public ObservableCollection<Category> allCategoryItems
        {
            get { return All_CategoryItems; }
            set
            {
                if (value != All_CategoryItems)
                {
                    All_CategoryItems = value;
                }
            }
        }

        private void SaveButton_Click(object sender, EventArgs e)
        {
             // Confirm there is some text in the text box.
            if (txtExpense.Text.Length > 0)
                {
               // Create a Expense item.
                Transactions newTransactionsItem = new Transactions

                {
                    Description = txtExpense.Text,
                    Amount=Convert.ToDecimal(txtValue.Text),
                    Note = txtNote.Text,
                    Date = DateTime.Now,
                    CategorieID = CategoryList.SelectedIndex
                };
                // Add the item to the ViewModel.
                App.Context.TransactionsItems.InsertOnSubmit(newTransactionsItem);
                App.Context.SubmitChanges();

                // Return to the main page.
                if (NavigationService.CanGoBack)
                {
                    NavigationService.GoBack();
                }
            }

        }

If I select the first item 1. Books, nothing is saved at all and application closes itself.
Any hint on what might be wrong is appreciated.
Kind regards,
Joerg

[Kiril Stanoev]

Hello Joerg,

RadListPicker is zero based. Therefore you will have to increase the SelectedIndex by 1 when creating the Transactions object.

Transactions newTransactionsItem = new Transactions

                {
                    Description = txtExpense.Text,
                    Amount=Convert.ToDecimal(txtValue.Text),
                    Note = txtNote.Text,
                    Date = DateTime.Now,
                    CategorieID = CategoryList.SelectedIndex + 1
                };

Let me know if this answers your questions. I'd be glad to further assist you.

Kind regards,
Kiril Stanoev
the Telerik team

[Wolfshund]

Hello Kiril,



thank you very much for your help. It's working perfect. By the way, in the above XAML code, the Listpicker's popup template doesn't

seems to work correctly. The screenshot shows the result. Any thoughts?

Kind regards, Joerg

[Kiril Stanoev]

Hello Joerg,

To achieve the desired outcome, you will have to remove the DisplayMemberPath property and set an ItemTemplate.

<telerikInput:RadListPicker x:Name="CategoryList" Header="Category" PopupHeader="Select Category">
    <telerikInput:RadListPicker.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding Description}" />
            </Grid>
        </DataTemplate>
    </telerikInput:RadListPicker.ItemTemplate>
    <telerikInput:RadListPicker.PopupItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="0, 27, 0, 24">
                <Rectangle Fill="Violet" Width="43" Height="43" />
                <TextBlock Text="{Binding Description}" Margin="16 -8 0 0" />
            </StackPanel>
        </DataTemplate>
    </telerikInput:RadListPicker.PopupItemTemplate>
</telerikInput:RadListPicker>

 
Give it a try and let me know how it works. 
All the best,
Kiril Stanoev
the Telerik team

[Wolfshund]

Hello Kiril,

got it to work! Thank you for your help!
Joerg