Cascading DropDownList in LightSwitch 2011

This article explains how to create and use a cascading DropDownList in a LightSwitch application.


As you know Visual Studio LightSwitch is a Microsoft tool used for build business applications.

In this article I will explain how to create and use a DropDownList in a LightSwitch application. Basically a DropDownList is a special list which shows items in the form of a list. In which we can select any item which already exists in the database.

In this article you will see, when you select a state, then a DropDownList will automatically show the cities that exist in that state.

Step 1 : First of all open Visual Studio LightSwitch->Click on create new table.

last.png

Step 2 : Create three tables like customer, State, City. Which are shown below.

image1.png

image2.png

image3.png

Step 3 : Now we will establish a relationship among these table.

Click on add relationship->Select state->Ok.

image4.png

Step 4 : In the same manner as above, now process select customer then ok.

image5.png

Step 5 : Right click on states table->Add query.

image6.png

Step 6 : Change the query name (SortedState)->Click on sort by->Select name.

image7.png

Step 7 : Now right-click on cities table->Add query.

image8.png

Step 8 : Change query name (CityByState)->Click on filter->Select StateId->Click on sort->Select name.

image9.png

Step 9 : Now we will add screens. Right-click on screens->Add screen.

image10.png

Step 10 : Select Editable Grid Screen->Select screen data (Customers)->Ok.

image11.png

Step 11 : Again add a new screen. Select new data screen->Select screen data (City)->Ok.

In the same manner, we will select the state screen data in the next step.

image12.png

Step 12 : Click on Add DataItem->Click on local property->Select State(Entity)->Ok.

image13.png

Step 13 : Now move SortedState to rows layout like as in the following image.

image14.png

Step 14 : Again Add data item->Click on Query->Select SortedState->Ok.

image15.png

Step 15 : Go to properties of SelectedState->Click on choice->Select SortedState.

image16.png

Step 16 : Again add data item->Cluck on Query->Select CityByState->Ok.

image17.png

Step 17 :  Go to cities properties->Click on choice->Select CityByState.

image18.png

Step 18 : Now click on Id properties->Write the parameter binding (SelectedState.Id).

image19.png

Step 19 : Run the application (Press F5). Click on create new state to add the state in the table. In the following image you will see we enter the name of state is Bihar. In the same manner you can add more states to your table.

In the same manner you will click on Create new city to add the cities related to states.

image20.png

Step 20 : When you click on editable grid screen then you can fill data like as in the following image.

image21.png

Conclusion

So in this article you saw how to use and create a cascading DropDownList in LightSwitch 2011.

Some Helpful Resources