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

Create Cascading Dropdowns In Lightswitch 2011






Software Requirement




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

Prerequisite Knowledge




  1. What is lightswitch?
  2. What are screens and entities in lightswitch?
  3. How to create an entity in lightswitch?
  4. How to create a screen in lightswitch?
  5. How to add relationship between the entities?

Scenario For Cascading Dropdown





Creation Of Tables




Picture showing the sample tables used for creating the cascading dropdown

Click to Enlarge


Add Relationship Between Tables




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


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

Click to Enlarge



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

Click to Enlarge


Add Data Into The Tables




Picture showing adding the data in the tables

Click to Enlarge


Add Queries On Tables




  1. Right click on States table and click on Add Query.
  2. Designer window opens up. Change the name of the query by clicking on it
  3. Click on the button + Add Parameters.
  4. Enter the parameter name and its data type.
  5. 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



Picture showing adding the query for city

Click to Enlarge



Picture showing adding the query for country

Click to Enlarge


Add Screen For Cascading Dropdown




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

Click to Enlarge



Picture showing the designer screen for adding the cascading dropdown

Click to Enlarge


Add Queries And Entities On The Screen


  1. Click on Add Data Item…
  2. A popup window will appear
  3. Select the query GetStates.
  4. Click Ok
  5. Picture showing the Add Data Item… button for adding a new item in the screen

    Click to Enlarge

  6. Again click on Add Data Item…
  7. This time select GetCities
  8. In the similar way select GetCountry queries.
  9. Once the queries are added, it is the time to add entities for country, state and city.
  10. To add an entity click on Add Data Item….
  11. A popup window will appear.
  12. Click on Local Property radio button.
  13. Select Country entity.
  14. Picture showing creating the data item for the country entity

    Click to Enlarge

  15. Similarly add State and City entity.


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

Click to Enlarge


Bind Query Parameters




  1. Click on Query Parameters CountryID in GetStates query and press F4.
  2. In the Parameter Binding field add the name of the parameter as shown in figure below
  3. Picture showing passing parameters to the GetStates query

    Click to Enlarge

  4. Similarly enter Parameter Binding field for StateID in GetCities query.
  5. Picture showing passing parameters to the GetCities query

    Click to Enlarge

Adding Country, State And City Data Item




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

Click to Enlarge


Change Choicelist


  1. Click on State drop down and press F4.
  2. In the property window select GetStates option from Choices.
  3. Picture showing setting the data source of the state drop down to GetStates

    Click to Enlarge

  4. Similarly for Cities select GetCities option.
  5. Picture showing setting the data source of the city drop down to GetCities

    Click to Enlarge

  6. And for country select GetCountry option
  7. Picture showing setting the data source of the Country drop down to GetCountry

    Click to Enlarge

Output


Picture showing the output of the cascading dropdown in lightswitch

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Thursday, May 17, 2012

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250