Parent Child Relationship in LightSwitch Grids

While working with Grid controls, it is a common requirement to display the data in Parent-Child relation within two grids. LightSwitch generally detects the relation between two tables in DataSource and automatically establishes the same between the grids bound to the two tables. However, at times few developers often looks to manually control the relation. This blog uses ComponentOne C1FlexGrid for LightSwitch control to demonstrate the Parent Child implementation. Core concept behind the implementation logic is to pass a parameter value to the Child table which is the current Row Index of the Parent Grid. With change in the Selected row index, new parameter value is passed to the Table query and the data is fetched again for the Child Grid.

Step 1: Adding DataSource to the Project

You can refer to the given link to use the online DataService for Nwind database. http://services.odata.org/Northwind/Northwind.svc/ I assume that the readers for the post are already aware on how to connect a LightSwitch application to a datasource. For those who are not, you may refer to this MSDN Link. While you use the above data link, you can select the tables 'Orders' and 'Order Details'. If you open the datasource designer for 'Order Details', you would notice that a relation has already been established by default. Refer to the image below. If we bind the above two datasources to separate grid controls, then they would automatically implement the Parent Child implementation. However, our objective is to implement this manually. So we have to create a new query from the child table 'Order Details' so that it does not have the relationship with the Parent Table 'Orders'. Apart from this we would have to create a parameter in the query which would act as a filter for the query result. For more information on how to create a parametric query, you may refer to this MSDN Link.aspx). The query details screen look like this in our LightSwitch application.

Step 2: Adding DataSources to a LightSwitch Application

This is the simplest of the step. So I won't go into the details. We have to add the table 'Orders' and the query 'Order_Details_List' to the screen. We would use the ComponentOne C1FlexGrid to bind to the datasource. You can refer to the demo image below for reference.

Step 3: Create a Local Parameter for the Screen

Once we have the datasource, next step is to add a local Screen parameter which would be used to pass the value to the query table parameter. Again I won't be going into the details to add local screen parameter. You can refer to this link. Apart from this you also need to set the 'Is Paramter' property in the Properties Window for this local screen variable as shown in the image below.

Step 4: Binding Local Screen Parameter to Query Parameter

Till this section we are almost done with the designer settings. The last setting requires binding the Local Screen parameter to the Query processor, so that the change in the screen parameter is passed on to the query expression. To do this, select the query processor from the screen item list. From the View menu, click Properties Window. In the 'Parameter Binding' textbox, select the local screen parameter or type the name.

Final Step: Update Local Screen Parameter

This section shows the code implementation to pass value to the local screen parameter. With change in the selected row in Parent grid, details in child grid would be updated. In the SelectedItemChanged event of Parent grid, we retrieve the selected row and pass the Primary field value to the local screen parameter which is passed to the query and fresh data collection is fed into the child grid.

public partial class FlexibleOrdersGrid  
{  
   C1.Silverlight.FlexGrid.C1FlexGrid flex;  

   partial void FlexibleOrdersGrid_Created()  
   {  
     // Write your code here.  
     var _Flex = this.FindControl("C1FlexGrid");  
     \_Flex.ControlAvailable += \_Flex_ControlAvailable;  
   }  

   void \_Flex\_ControlAvailable(object sender, ControlAvailableEventArgs e)  
   {  
     flex = e.Control as C1.Silverlight.FlexGrid.C1FlexGrid;  
     flex.IsEnabled = true;  
     flex.SelectedItemChanged += flex_SelectedItemChanged;  
   }  

   void flex_SelectedItemChanged(object sender, EventArgs e)  
   {  
     if (((C1.Silverlight.FlexGrid.C1FlexGrid)(sender)).SelectedItem != null)  
     {  
        this.localParamOrderID = (((C1.Silverlight.FlexGrid.C1FlexGrid)(sender)).SelectedItem as LightSwitchApplication.Order).OrderID;  
        this.Order\_Details\_List.Load();  
     }  
   }  
}  

That's it!! We are done with the implementation. With most of the designer settings and minimal code implementation, LightSwitch makes it very easy for implementing the User requirements quickly. Lets see how the recipe has cooked up to the final dish. Simple and Crisp.. You can also taste the dish by downloading the attached sample. Download Sample