LightSwitch

How to Get SelectedItem From ListView in LightSwitch Beta 2



Prologue:

My previous article was about how to create and use the Composed and Scalar Queries in LightSwitch Beta 2. Today we shall discuss how to get the SelectedItem from ListView in LightSwitch Screens.

ListView Layout:

Previously we discussed Screen Layouts available in LightSwitch Beta 2. At that time I mistakenly did not discuss the ListView layout.
ListView layout is something like a GridView or Table layout in which only the first string value field will be displayed.

Let us create an application to demonstrate how to get the selected item from a ListView in LightSwitch.

Preparing the Solution:

Fireup the VS 2010; create a LightSwitch desktop application with the name "WorkingWithListViewInLSBeta2" as shown in the figure.
ListViewLS1.gif

Follow the No: # to create the Project.

The Entity Designer:

Let us create a table.
ListViewLS2.gif

This new screen of Beta 2 is not available in Beta 1. Select the rounded option to create a new table.

After clicking on the "Create new table" option, the Entity Designer will be displayed to create the Entity required.
ListViewLS3.gif

To change the table name simply click on the Header of the Entity Designer and give the name. In our sample application we have given the name as Vehicle.

Designing Screens:

For this demo application, we need to create three screens. We can add a screen to the Application two ways. Here we are creating the screen from the Solution Explorer.
ListViewLS4.gif

Here,

  1. Right-Click on the Screens.
  2. Choose the "Add Screen..." from the listed menu.

After selecting to add the screen, we will have a window for choosing the Screen Template.
ListViewLS5.gif

As shown in the figure:
  1. Select the "List and Details Screen" template from the Template panel.
  2. Name the screen as "VehiclesListDetails"
  3. Select the "Vehicle" entity as the Screen data.
  4. Deselect the "Vehicle Details" option as we are going to work with only ListView.

Preparing the Layout:

After adding the screen we need to adjust the layout to get the screen as we expected.
ListViewLS6.gif

Here in this above figure, delete the "Edit" and "Delete" buttons which are highlighted as we are going to add two new Buttons.
ListViewLS7.gif

From this figure,
  1. Select the "Command Bar" and click on "Add" dropdownlist.
  2. Choose "New Button..." to create a new Button.

After clicking on "New Button..." we will have a dialog box which asks for the method name for the button.
ListViewLS8.gif

Give it the method name "GetSelectedVehicleType" and click OK to proceed.

Now we have to write a bit of code to display the Vehicle type on click of the "Get Selected Vehicle Type".
ListViewLS9.gif

To edit the method:
  1. Right-Click on the "Get Selected Vehicle Type" method.
  2. From the menu, Select "Edit Execute Code"

Now you will be transferred to the method.

Getting the Selected Item:

As we are using ListView, we need to get the selected item to display the type of the Vehicle selected.
ListViewLS10.gif

Here, we are having the SelectedItem property in the Vehicles which is of type Vehicle entity which is bound with the ListView. From the selected item we can get the properties and also a method called "Delete".
ListViewLS11.gif

The above code snippet will display the Vehicle type of the selected vehicle.

Programmatically delete the selected item:
ListViewLS12.gif

Add another new button to the ListView with the name "DeleteSelectedItem" as shown in the figure to delete the selected item.

To delete the selected item from the ListView, edit the "DeleteSelectedItem" method as we did for the "GetSelectedVehicleType" button.
ListViewLS13.gif

In the DeleteSelectedItem_Execute method add the code snippet as shown in the figure.

Here, we are getting the Confirmation from the user to delete the selected item as it will be removed from database itself.

To use the MessageBoxResult class to determine the option selected by the user, we need to add a reference for System.Windows.dll.
ListViewLS14.gif

To add the namespace into our application, type "MessageBoxResult" and Press "Ctrl + dot [.]". It will show you the intelligence to select namespace to add. Just select the namespace, it will be added automatically.

Now are done.

Press F5 to see the application in action.

Application in Action:
ListViewLS15.gif

Here:
  1. Add button to add the Vehicles details.
  2. "Get Selected Vehicle Type" is a button to get the selected vehicle type.
  3. "Delete Selected Item" is to delete the selected item permanently.

Now add some vehicle details to database.
ListViewLS16.gif

When you select a Vehicle from the ListView and press the "Get Selected Vehicle Type" button, the result will be as shown in the following figure.
ListViewLS17.gif

See the following figure which asks the user to delete the selected item permanently.

Summary:

In this article, we have seen how to get the SelectedItem item and how to process the selected item in LightSwitch application.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enable me to give a better article the next time.

Thanks.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found