Creating Cascading Drop Down Lists in Visual Studio LightSwitch - Init

<body> <h1>Creating Cascading Drop Down Lists in Visual Studio LightSwitch</h1> <p>A common technique on data entry screens is using one “drop down list” (called an auto-complete box in LightSwitch) as a filter into the next. This limits the amount of choices that need to be brought down and guides the user into easily locating values. This technique is also useful if you have cascading filtered lists where the first selection filters data in the second, which filters data in the next, and so forth. LightSwitch makes this easy to do using parameterized queries and parameter binding. In this post let’s take a look a couple common scenarios. </p> <h3>Cascading Lists based on Multiple Tables</h3> <p>Let’s take an example where we have a table of States and a child table of Cities. Cities are then selected on Customers when entering them into the system. So we have one-to-many relationships between State and Cities and City and Customers. Our data model looks like this:</p> <p><a href="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-81-88-metablogapi/4744.image_5F00_2.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-81-88-metablogapi/6646.image_5F00_thumb.png" width="780" height="422" /></a></p> <p>When the user is entering new customers we don’t want to display thousands of cities in the dropdown to choose from. Although the users can use the auto-complete box feature to locate a city, bringing down all these records affects performance. It’s better to either use a Modal Window Picker search dialog (<a href="http://blogs.msdn.com/b/bethmassi/archive/2011/09/15/filtering-lookup-lists-with-large-amounts-of-data-on-data-entry-screens.aspx" target="_blank">like I showed in this article</a>) or present the list of States first and then filter the list of Cities down based on that selection. </p> <p>First we need to create a couple queries. The first will simply sort the list of States so that they show up in alphabetical order in the list. Right-click on the States table in the Solution Explorer and Add Query to open the Query Designer. Create a query called “SortedStates” that sorts on the state’s Name Ascending:</p> <p><a href="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-81-88-metablogapi/6330.image_5F00_6.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-81-88-metablogapi/5756.image_5F00_thumb_5F00_2.png" width="655" height="274" /></a></p> <p>Next create a query called “CitiesByState” by right-clicking on the Cities table in the Solution Explorer and selecting Add Query again. This time we will create a parameterized query: <strong>Where</strong> the <strong>State.Id</strong> property<strong> is equal to</strong> a <strong>new parameter</strong> called <strong>Id</strong>. The Query Designer should now look like this:</p> <p><a href="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-81-88-metablogapi/4274.image_5F00_8.png"><img style="background-image: none; border-bottom: 0px; border-left: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-81-88-metablogapi/7206.image_5F00_thumb_5F00_3.png" width="482" height="302" /></a></p> <p>Now create the Customer Detail Screen like no </p></body>