[Solved] GridView that has child records binded to DataForm GridView

[Ravindranath Wickramanayake]

What i wanted to do is there is Master Record called Customers and each customer has Buildings. When you select a Customer from the gridview  you could see the data in the dataform including buildings child records inside dataform gridview. I saw two problems can't see some records attached in the master gridview and can't get the dataform gridview records.

BusinessEntities

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.ComponentModel;

namespace RAM.Raters.BE
{
    public class Building : INotifyPropertyChanged,IEditableObject
    {
        private string _id;
        private string _name;
        private string _location;

        private Building BuildingBeforeEdit;

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, e);
        }

        public string ID
        {
            get
            {
                return _id;
            }
            set
            {
                _id = value;
                OnPropertyChanged(new PropertyChangedEventArgs("ID"));
            }
        }

        public string Name
        {
            get
            {
                return _name;
            }
            set
            {
                _name = value;
                OnPropertyChanged(new PropertyChangedEventArgs("Name"));
            }
        }


        public string Location
        {
            get
            {
                return _location;
            }
            set
            {
                _location = value;
                OnPropertyChanged(new PropertyChangedEventArgs("Location"));
            }
        }

        #region IEditableObject Members

        public void BeginEdit()
        {
            BuildingBeforeEdit.ID = this.ID;
            BuildingBeforeEdit.Location = this.Location;
            BuildingBeforeEdit.Name = this.Name;
        }

        public void CancelEdit()
        {
            this.ID = BuildingBeforeEdit.ID;
            this.Location = BuildingBeforeEdit.Location;
            this.Name = BuildingBeforeEdit.Name;
            BuildingBeforeEdit = null;
        }

        public void EndEdit()
        {
            BuildingBeforeEdit = null;
        }

        #endregion
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.ComponentModel;


namespace RAM.Raters.BE
{

    public class Customer:INotifyPropertyChanged,IEditableObject
    {
        private string firstName;
        private string lastName;
        private string details;

        private Customer CustomerBeforeEdit;

        private List<Building> buildings = new List<Building>();

        public event PropertyChangedEventHandler PropertyChanged;

        public void BeginEdit()
        {
            CustomerBeforeEdit = new Customer();
            CustomerBeforeEdit.FirstName = this.firstName;
            CustomerBeforeEdit.LastName = this.lastName;
            CustomerBeforeEdit.Details = this.details;
        }

        public void CancelEdit()
        {
            this.FirstName = CustomerBeforeEdit.FirstName;
            this.LastName = CustomerBeforeEdit.LastName;
            this.Details = CustomerBeforeEdit.Details;
            CustomerBeforeEdit = null;
        }

        public void EndEdit()
        {
            CustomerBeforeEdit = null;
        }

        public void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, e);
        }

        public string FirstName
        {
            get { return firstName; }
            set
            {
                firstName = value;
                OnPropertyChanged(new PropertyChangedEventArgs("FirstName"));

            }

        }

        public string LastName
        {
            get { return lastName; }
            set
            {
                lastName = value;
                OnPropertyChanged(new PropertyChangedEventArgs("LastName"));
            }
        }

        public string Details
        {
            get { return details; }
            set
            {
                details = value;
                OnPropertyChanged(new PropertyChangedEventArgs("Details"));
            }

        }
        public List<Building> Buildings
        {
            get { return buildings; }
            set
            {
                buildings = value;
                OnPropertyChanged(new PropertyChangedEventArgs("Buildings"));
            }

        }
    }
}

BAL Side

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using RAM.Raters.BE;
using RAM.Raters.DAL;

namespace RAM.Raters.BAL
{
    public class CustomerBAL
    {
        public static Customer GetCustomer()
        {
            return CustomerDAL.GetCustomer();
        }
        public static List<Customer> GetCustomers()
        {
            return CustomerDAL.GetCustomers();
        }
    }
}

DAL Side

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using RAM.Raters.BE;

namespace RAM.Raters.DAL
{
    public class CustomerDAL
    {
        public static Customer GetCustomer()
        {
            Customer Customer = new Customer();
            Customer.FirstName = "Bla";
            Customer.LastName = "Bla LastName";
            Customer.Details = "Bla Details";

            Building building1 = new Building();
            building1.Name = "Building1";
            building1.ID = "Building1ID";
            building1.Location = "Buiilding1Location";

            Building building2 = new Building();
            building2.Name = "Building2";
            building2.ID = "Building2ID";
            building2.Location = "Buiilding2Location";

            Customer.Buildings.Add(building1); Customer.Buildings.Add(building2);

            return Customer;
        }

        public static List<Customer> GetCustomers()
        {
            Customer Customer = GetCustomer();

            List<Customer> Customers = new List<Customer>();

            Customer customer1 = new Customer();
            customer1.FirstName = "User FirstName";
            customer1.LastName = "User LastName";
            customer1.Details = "User Details";

            Customers.Add(Customer);
            Customers.Add(customer1);

            return Customers;
        }
    }
}

TestSilverlight Side
----XAML

<UserControl xmlns:dataFormToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit"
             xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" xmlns:Telerik_Windows_Controls_GridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="TestSilverlight.MainPage"
    Width="800" Height="800" mc:Ignorable="d">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="181"/>
            <RowDefinition Height="0.237*"/>
            <RowDefinition Height="0.372*"/>
            <RowDefinition Height="0.391*"/>
        </Grid.RowDefinitions>

        <telerikGridView:RadGridView x:Name="CustomersRadGridView" AutoGenerateColumns="False" SelectionChanged="CustomersRadGridView_SelectionChanged" Margin="0,0,396,0" Grid.Column="0" Grid.Row="0">
        <telerikGridView:RadGridView.Columns>
            <telerikGridView:GridViewDataColumn UniqueName="FirstName" Header="First Name"/>
            <telerikGridView:GridViewColumn UniqueName="LastName" Header="Last Name"/>
            <telerikGridView:GridViewColumn UniqueName="Details" Header="Details"/>
        </telerikGridView:RadGridView.Columns>
        </telerikGridView:RadGridView>

        <dataFormToolkit:DataForm x:Name="CustomerDataForm" Grid.Column="0" AutoGenerateFields="False" AutoCommit="False" AutoEdit="False"
            CancelButtonContent="Cancel" CommitButtonContent="Save"  Header="Customer Details" CommandButtonsVisibility="COMMIT,CANCEL,EDIT,DELETE,ADD" Height="320" VerticalAlignment="Top" HorizontalAlignment="Right" Width="392"
                                  d:LayoutOverrides="HorizontalAlignment" Grid.RowSpan="2"
                                  >

            <dataFormToolkit:DataForm.ReadOnlyTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="First Name : "/>
                            <TextBlock Text="{Binding FirstName}"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Last Name : "/>
                            <TextBlock Text="{Binding LastName}"/>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Details : "/>
                            <TextBlock Text="{Binding Details}"/>
                        </StackPanel>

                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="Buildings : "/>
                            <telerikGridView:RadGridView Margin="0" DataContext="{Binding Path=Buildings.Building}" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </dataFormToolkit:DataForm.ReadOnlyTemplate>
            <dataFormToolkit:DataForm.EditTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="First Name : "/>
                            <TextBox Text="{Binding FirstName, Mode=TwoWay}"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Last Name : "/>
                            <TextBox Text="{Binding LastName, Mode=TwoWay}"/>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Details : "/>
                            <TextBox Text="{Binding Details, Mode=TwoWay}"/>
                        </StackPanel>


                        <StackPanel Orientation="Horizontal" DataContext="{Binding Buildings}">
                            <StackPanel Orientation="Vertical">
                            <TextBlock Text="Buildings : "/>
                            <telerikGridView:RadGridView Margin="0" ItemsSource="{Binding Building}" />
                        </StackPanel>
                            <Button Content="Add/Edit" Click="Button_Click"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </dataFormToolkit:DataForm.EditTemplate>

            <dataFormToolkit:DataForm.NewItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="First Name : "/>
                            <TextBox Text="{Binding FirstName}"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Last Name : "/>
                            <TextBox Text="{Binding LastName}"/>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Details : "/>
                            <TextBox Text="{Binding Details}"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="Buildings : "/>
                                <telerikGridView:RadGridView Margin="0" DataContext="{Binding Path=Buildings.Building}" />
                                <Button Content="Add/Edit" Click="Button_Click"/>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>

                    </DataTemplate>
            </dataFormToolkit:DataForm.NewItemTemplate>
        </dataFormToolkit:DataForm>
    </Grid>
</UserControl>

XAML CS Side

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Collections.ObjectModel;

using RAM.Raters.BE;
using TestSilverlight.ServiceReference1;

namespace TestSilverlight
{
    public partial class MainPage  : UserControl
    {
        public MainPage ()
        {
            InitializeComponent();
            GetCustomers();
        }


        ObservableCollection<Customer> Customers;

        private void GetCustomers()
        {
            PersonServiceClient proxy = new PersonServiceClient();
            proxy.GetCustomerinfoCompleted += new EventHandler<GetCustomerinfoCompletedEventArgs>(proxy_GetCustomerinfoCompleted);

            proxy.GetCustomerinfoAsync();
        }

        void proxy_GetCustomerinfoCompleted(object sender, GetCustomerinfoCompletedEventArgs e)
        {
            try
            {
                ObservableCollection<int> numCollection = new ObservableCollection<int>();
                numCollection.Add(5);
                numCollection.Add(6);
                numCollection.Add(7);
                numCollection.Add(8);

                Customers = (ObservableCollection<Customer>)e.Result;

                CustomersRadGridView.ItemsSource = Customers;
               // CustomersRadGridView2.ItemsSource = numCollection;
            }
            catch
            {
                Customers = new ObservableCollection<Customer>();
            }
        }

        private void CustomersRadGridView_SelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangeEventArgs e)
        {

            //this.Content = new ExpandableGrid();
            //DataForms

            CustomerDataForm.ItemsSource = (ObservableCollection<Customer>)CustomersRadGridView.ItemsSource;
            CustomerDataForm.CurrentIndex = this.CustomersRadGridView.Items.IndexOf(this.CustomersRadGridView.CurrentItem);

            //For Horizontal GridView
            //this.Content = new CustomerSlide(CustomersRadGridView.ItemsSource);
        }

        private void CustomersRadGridView_SelectionChanged2(object sender, Telerik.Windows.Controls.SelectionChangeEventArgs e)
        {
            //TESTForm.CurrentItem = (int)CustomersRadGridView2.SelectedItem;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //ObservableCollection<Customer> cus = (ObservableCollection<Customer>)(((Button)sender).DataContext);
            this.Content = new CustomerSlide(((Button)sender).DataContext);
        }
    }
}

WEB Side
  Default aspx page to host the silverlight app

I have also attached what i could see when i run my project. LastName FirstName isn't present in the master record and in data form can't see the building records in the gridview. Please Help

Thanks in advance
Ravi

[Tsvyatko]

Hello Ravindranath Wickramanayake,

I have checked the code snippet and created sample project from it. The problems you are experiencing are caused by the following:
 - Using GridviewColumn instead GridviewDataColumn will not bind the the properties using UniqueName property. I also recommend to use DataMemberBinding property of the GridViewDataColumn, which will provide more flexibility when binding. E.g.

<telerikGridView:GridViewDataColumn Header="First Name" DataMemberBinding="{Binding FirstName}"/>

 - The building grid in the details section is empty because the data is not assign or bound to ItemsSource Property. ItemsSource accepts objects that implement IEnumerable and using expression like {Binding Path=Buildings.Building} if Building is not IEnumerable.

In your scenario I can also suggest you to get full advantage of our RadGridView by using its Hierarchy relations, row details, Adding, editing and deleting items. You can check these demos for more information - http://demos.telerik.com/silverlight/#GridView/FirstLook.

I hope this will help you.

Kind regards,

Tsvyatko

the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ravindranath Wickramanayake]

Thanks :)