Articles → LIGHT SWITCH 2011 → Create Cascading Dropdowns In Lightswitch 2011

Create Cascading Dropdowns In Lightswitch 2011

In this tutorial I will explain how to create cascading dropdowns in Lightswitch.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2010 is installed on your machine.
Visual Studio 2010 service pack 1 is installed on your machine.
Microsoft Visual Studio Light switch 2011 is installed on your machine.

Prerequisite Knowledge

Before you go ahead, it is required that you should know

What is lightswitch?
What are screens and entities in lightswitch?
How to create an entity in lightswitch?
How to create a screen in lightswitch?
How to add relationship between the entities?

Scenario For Cascading Dropdown

For this tutorial I will create three dropdowns one for country, one for State and one for City. On the basis of country, States dropdown will be populated and on the basis of State, City dropdown will be populated.

Creation Of Tables

For this tutorial I have created three tables Country, State and City.

Picture showing the sample tables used for creating the cascading dropdown

Click to Enlarge

Add Relationship Between Tables

I assume that you are aware about how to add relationship between the tables, but in this section I will tell you what type of relationships should be there between the tables.

One country can have more than one states
One state can have more than one cities.

So there should be one to many relationship between the tables as shown in the figure below.

Picture showing adding a relationship between the tables in the lightswitch application

Click to Enlarge

Once you add a relationship the table schema is changed to

Picture showing the changes in the table once the relationship is added between the tables

Click to Enlarge

Add Data Into The Tables

I have added data in all the three tables.

Picture showing adding the data in the tables

Click to Enlarge

Add Queries On Tables

We will add queries for 3 tables i.e. Country, State and City. First of all I will add a query for State, the query for City and Country can be added in the same way.

Right click on States table and click on Add Query.
Designer window opens up. Change the name of the query by clicking on it
Click on the button + Add Parameters.
Enter the parameter name and its data type.
Click on + Add Filters and add where condition.

Picture showing the Add Query option for adding the query in the lightswitch table

Click to Enlarge

In the similar way add a query for Cities and countries.

Picture showing adding the query for city

Click to Enlarge

In case of country we are not going to add any parameter.

Picture showing adding the query for country

Click to Enlarge

Add Screen For Cascading Dropdown

Add a screen of type New Data Screen and don’t select option for Screen Data.

Picture showing a screen for adding a new data screen in the lightswitch project

Click to Enlarge

Once you click ok a screen is added for cascading drop down as shown in figure below.

Picture showing the designer screen for adding the cascading dropdown

Click to Enlarge

Add Queries And Entities On The Screen

Click on Add Data Item…
A popup window will appear
Select the query GetStates.
Click Ok

Picture showing the Add Data Item… button for adding a new item in the screen

Click to Enlarge

Again click on Add Data Item…
This time select GetCities
In the similar way select GetCountry queries.
Once the queries are added, it is the time to add entities for country, state and city.
To add an entity click on Add Data Item….
A popup window will appear.
Click on Local Property radio button.
Select Country entity.

Picture showing creating the data item for the country entity

Click to Enlarge

Similarly add State and City entity.

Once you have added it the left section of designer screen will become.

Picture showing the data objects for country, state and city are added in the designer

Click to Enlarge

Bind Query Parameters

To bind the query parameters

Click on Query Parameters CountryID in GetStates query and press F4.
In the Parameter Binding field add the name of the parameter as shown in figure below

Picture showing passing parameters to the GetStates query

Click to Enlarge

Similarly enter Parameter Binding field for StateID in GetCities query.

Picture showing passing parameters to the GetCities query

Click to Enlarge

Adding Country, State And City Data Item

Drag Country (Entity), State (Entity) and City (Entity) onto the screen. Once you have added it the designer will become as shown in figure below.

Picture showing adding the country, state and city dropdowns in the designer screen

Click to Enlarge

Change Choicelist

Click on State drop down and press F4.
In the property window select GetStates option from Choices.

Picture showing setting the data source of the state drop down to GetStates

Click to Enlarge

Similarly for Cities select GetCities option.

Picture showing setting the data source of the city drop down to GetCities

Click to Enlarge

And for country select GetCountry option

Picture showing setting the data source of the Country drop down to GetCountry

Click to Enlarge

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Thursday, May 17, 2012

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**