Search code examples
c#silverlightgridviewdataformdatapager

"Element is already a child of another element" error when adding to collection


I've got a Datagrid/Dataform setup with a Datapager as well. My DataPager.PageSize is set declaratively to 10. My ItemsSource for all three controls are set to a QueryableCollectionView. If my collection has less than 10 records, I have no problem adding a new item to the collection. I click the + sign in my DataForm (new item), fill out the forms, capture the edit_ended event on the DP, and save to my SQL DB with no issues.

However, when I have 10+ items, and I click the + sign (new item), the app throws a "Element is already the child of another element" error. I'm not sure which of the two controls (Gridview or DataPager) is causing this problem, and I'm also not sure how to fix it!

Code (Xaml):

<toolkit:DataForm x:Name="dataForm" 
    Width="{Binding Width, ElementName=GV1}" 
    CurrentItem="{Binding SelectedWOEquipment}" 
    ItemsSource="{Binding WOEquipmentItems}"
    AutoEdit="False" 
    Tag="Equipment"
Header="Add/Update Equipment"
    AutoCommit="False" 
    Margin="0,0,0,10" >
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="EditEnded">
            <cmd:EventToCommand Command="{Binding SaveEquipmentCommand}" PassEventArgsToCommand="True"/>
        </i:EventTrigger>
        <i:EventTrigger EventName="DeletingItem">
            <cmd:EventToCommand Command="{Binding DeleteCommand}"
                CommandParameter="{Binding Tag, ElementName=dataForm}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <toolkit:DataForm.ReadOnlyTemplate>
        <DataTemplate>
            <StackPanel>
                <toolkit:DataField>
                    <TextBox Text="{Binding EquipmentCode}" />
                </toolkit:DataField>
                <toolkit:DataField Label="Equipment Description">
                    <TextBox Text="{Binding EquipmentDescription}" />
                </toolkit:DataField>
                <toolkit:DataField Label="Hours">
                    <TextBox IsEnabled="False" Text="{Binding Hours}" />
                </toolkit:DataField>
            </StackPanel>
        </DataTemplate>
    </toolkit:DataForm.ReadOnlyTemplate>
    <toolkit:DataForm.EditTemplate>
        <DataTemplate>
            <StackPanel>
                <toolkit:DataField Label="Equipment Codes">
                    <TextBox Text="{Binding EquipmentCode}" />
                </toolkit:DataField>
                <toolkit:DataField Label="Equipment Description">
                    <TextBox IsEnabled="False"
             Text="{Binding EquipmentDescription}" />
                </toolkit:DataField>
                <toolkit:DataField Label="Hours">
                    <TextBox Text="{Binding Hours, Mode=TwoWay}" />
                </toolkit:DataField>
            </StackPanel>
        </DataTemplate>
    </toolkit:DataForm.EditTemplate>
    <toolkit:DataForm.NewItemTemplate>
        <DataTemplate>
            <StackPanel>
                <toolkit:DataField Label="Equipment Codes">
                    <telerik:RadComboBox x:Name="cboEquipment"
            ItemsSource="{Binding DataSource.EquipmentList, Source={StaticResource DataContextProxy}}"  
                        SelectedValue="{Binding EquipmentCode, Mode=TwoWay}"
                        Margin="0 0 20 0">                                    
                        <telerik:RadComboBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel/>
                            </ItemsPanelTemplate>
                        </telerik:RadComboBox.ItemsPanel>
                    </telerik:RadComboBox>
                </toolkit:DataField>
                <toolkit:DataField Visibility="Collapsed">
                    <TextBox Text="{Binding EquipmentDescription,Mode=TwoWay}" />
                </toolkit:DataField>
                <toolkit:DataField Label="Hours">
                    <TextBox Text="{Binding Hours,Mode=TwoWay}" />
                </toolkit:DataField>
            </StackPanel>
        </DataTemplate>
    </toolkit:DataForm.NewItemTemplate>
 </toolkit:DataForm>
 <Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="*" />
     </Grid.RowDefinitions>
     <telerik:RadGridView ItemsSource="{Binding WOEquipmentItems}"
         x:Name="GV1"
         ShowGroupPanel="False"
         DataLoadMode="Asynchronous"
         HorizontalAlignment="Left"
         HeaderRowStyle="{StaticResource CSAgvHeaderRowStyle}"
         SelectedItem="{Binding SelectedWOEquipment, Mode=TwoWay}"
         AutoGenerateColumns="False" 
         IsReadOnly="True">
             <telerik:RadGridView.Columns>
                 <telerik:GridViewDataColumn DataMemberBinding="{Binding EquipmentCode}" HeaderCellStyle="{StaticResource CSAgvHeaderCellStyle}" Header="Equipment ID" Width="100"/>
                 <telerik:GridViewDataColumn DataMemberBinding="{Binding EquipmentDescription}" HeaderCellStyle="{StaticResource CSAgvHeaderCellStyle}" Header="Description" Width="300"/>
                 <telerik:GridViewDataColumn DataMemberBinding="{Binding Hours}" HeaderCellStyle="{StaticResource CSAgvHeaderCellStyle}" Header="Hours" Width="75"/>
             </telerik:RadGridView.Columns>
             <i:Interaction.Triggers>
                 <i:EventTrigger EventName="SelectedCellsChanged">
                     <cmd:EventToCommand Command="{Binding EditEquipmentCommand}"/>
                 </i:EventTrigger>
              </i:Interaction.Triggers>
          </telerik:RadGridView>
          <sdk:DataPager Grid.Row="1" Source="{Binding WOEquipmentItems}"  PageSize="10" />

Code (Viewmodel) - WOEquipmentItems properly populated via Web Service:

private QueryableCollectionView _WOEquipmentItems;
private TSMVVM.Model.WOEquipment _selectedWOEquipment = new TSMVVM.Model.WOEquipment();
public QueryableCollectionView WOEquipmentItems
    {
        get { return _WOEquipmentItems; }
        set
        {
            _WOEquipmentItems = value;
            RaisePropertyChanged("WOEquipmentItems");
        }
    }
public TSMVVM.Model.WOEquipment SelectedWOEquipment
    {
        get 
        {
            if (_selectedWOEquipment != null)
            {
                if (_selectedWOEquipment.EquipmentDescription == null && _selectedWOEquipment.EquipmentCode != null)
                {
                    _selectedWOEquipment.EquipmentDescription = "";
                    _selectedWOEquipment.EquipmentDescription = EquipmentDescriptionList[EquipmentList.IndexOf(_selectedWOEquipment.EquipmentCode)];
                }
            }
            return _selectedWOEquipment; 
        }
        set
        {
            _selectedWOEquipment = value;
            RaisePropertyChanged("SelectedWOEquipment");
        }
    }

Solution

  • Solution turned out to be ridiculously simple. I added this: In my ViewModel, I registered this command, firing off a "AddingNewItem" function that simply executed MyQuerableCollection.MoveToLastPage(). This forced my grid & pager to move to the last page, which meant my selected item was visible & not throwing errors.

    Edit to add - when my collection was exactly at 10, it was throwing an error as well. So I included a check to see if ItemCount % 10 == 0. If so, I removed the first item in the list (Equipment.RemoveAt[0]). Since, after setting the new item, I run my LoadData() function, this wasn't an issue.