Nested AutoCompleteBox in LightSwitch 2012 - Part 2

In my previous article I described how to create a table and establish relationships among the tables (see http://www.c-sharpcorner.com/UploadFile/18ddf7/nested-autocomplete-box-in-lightswitch-2012-part-1/).

There I added a new screen.

Now here we are going to add an AutoCompleteBox.

In my previous article I added the screen on the basis of the customer table.

app desi.jpg

Step 1

In the Menu bar click on the "Add Data Item" button.

Add data Item.jpg

Step 2

The "Add Data Item" dialog box will appear on screen.
Select the query radio button and add the "Countries - Countries(All)" query and provide a name and click the "OK" button.

add data item dialog.jpg

As we click OK the Screen Designer will look as in the following:

countries designer.jpg 

 
Step 3

Once again we will click on the "Add Data Item" button and
select the "Local Property" radio button and provide a name to the local property and click "OK". Under the Type select "Country(entity)".

local property.jpg

Step 4

The Screen designer will appear as in the following:

app desi 1.jpg

Drag the propertySelectedCountry node onto the screen designer above the City node from the left side and put it onto the screen to create an AutoCompleteBox.

src desi2.jpg

Step 5

Go to the PropertySelectedCountry property window and set the "Choices" property to "Countries".

choices countries.jpg

Step 6

Once again click on "Add Data Item" and
select the "Query" radio button and add the CityByCountry query and provide a name and click the "OK" button.

city by country.jpg

The screen designer will appear as in the following:

app.jpg

Click on the City field in the Screen Designer and go to the property window and set the Choices property to "CityByCountry".

citybycountry choices.jpg

Step 7

Now click on the "CountryId" parameter of the "CityByCountry" query. 

citybycountryappdesi.jpg

Go to the property window and enter "propertySelectedCounty.ID" for the "Parameter Binding".

parameter binding.jpg

 Step 8

Press F5 to run the application.

output.jpg

Here I have not provided any kind of data so it will be empty.