Telerik blogs

Displaying Hierarchy in RadGridView for WPF

January 22, 2009 Desktop, WPF 0 Comments


Building on my previous post where I talked about how to bind data to the RadGridView, today I want to show how you can display hierarchical data in the grid.  I will follow the same concept of building an application for a car repair shop to manage vehicles in for repair.  I will leverage two classes to display the data.  The original Car class which was used previously and a new CustomerComplaint class.  The Complaint property of the Car object was initially a string, but we need to allow for several issues to be reported so we will use the CustomerComplaint class to extend that capability.  The Complaint property has been changed to type List<CustomerComplaint> and renamed to Complaints in this scenario.

image

 

 

public class Car  
{  
    public string Make { get; set; }  
    public string Model {get; set; }  
    public DateTime ModelYear { get; set; }  
    public int Doors { get; set; }  
    public bool AllWheelDrive { get; set; }  
    public List<CustomerComplaint> Complaints { get; set; }  
    public string VehicleOwner { get; set; }  
}  
 
public class CustomerComplaint  
{  
    public DateTime DateOfComplaint { get; set; }  
    public string Complaint { get; set; }  
    public bool Resolved { get; set; }  
}  
 

So in my previous example we created a routine called GetCarsInTheShop which returned a list of Car objects. In this example, I have modified that same routine to create some CustomerComplaints and attach them to the Car. Other than that the routine is unchanged.

public List<Car> GetCarsInTheShop()  
{  
    var complaint1 = new CustomerComplaint()  
    {  
        DateOfComplaint = DateTime.Now.AddDays(-1),  
        Complaint = "Won't start",  
        Resolved = false 
    };  
 
    var complaint2 = new CustomerComplaint()  
    {  
        DateOfComplaint = DateTime.Now.AddDays(-1),  
        Complaint = "Out of gas",  
        Resolved = true 
    };  
 
    var complaint3 = new CustomerComplaint()  
    {  
        DateOfComplaint = DateTime.Now,  
        Complaint = "Flat tire",  
        Resolved = false 
    };  
 
    var car1 = new Car()  
    {  
        AllWheelDrive = false,  
        Doors = 4,  
        Make = "Ford",  
        Model = "Taurus",  
        ModelYear = new DateTime(2004, 01, 01),  
        Complaints = new List<CustomerComplaint>()  
        {  
            complaint1,  
            complaint2  
        },  
        VehicleOwner = "Dudley Dooright" 
    };  
 
    var car2 = new Car()  
    {  
        AllWheelDrive = true,  
        Doors = 2,  
        Make = "Honda",  
        Model = "Accord",  
        ModelYear = new DateTime(2006, 01, 01),  
        Complaints = new List<CustomerComplaint>()  
        {  
            complaint3  
        },  
        VehicleOwner = "Mary Smith" 
    };  
 
    var cars = new List<Car>()  
    {  
        car1,  
        car2  
    };  
 
    return cars;  
}  
 
 

I then use the same code to bind the data to the RadGridView when the Window initializes.

 

 

public Window1()  
{  
    InitializeComponent();  
 
    //bind the list of cars with customers to the grid  
    radGridView1.ItemsSource = GetCarsInTheShop();  
 
}  
 

After running the code you will see that we do not get our Complaint data displayed, but rather we see "(Collection)" displayed.  We need to let the RadGridView know that a hierarchy exists in the data. 

image

You will need to setup the PropertyRelationship for the Complaints property to identify what the hierarchy is based on.

 

 

public Window1()  
{  
    InitializeComponent();  
 
    //create the relationship  
    var detailDefinition = new Telerik.Windows.Controls.GridViewTableDefinition();  
    detailDefinition.Relation = new Telerik.Windows.Data.PropertyRelation("Complaints");  
    radGridView1.TableDefinition.ChildTableDefinitions.Add(detailDefinition);  
 
    //bind the list of cars with customers to the grid  
    radGridView1.ItemsSource = GetCarsInTheShop();  
}  
 

Once we run the code, there are now plus symbols at the head of each row. When you click the plus it will expand the row to show the hierarchy information.

image

Grid, Telerik UI for WPF, XAML

Related Posts

Web React

Getting Started with the KendoReact PivotGrid

Comments

Comments are disabled in preview mode.