Use of ComboBox in LightSwitch 2012

Here we will see how to select an item using a ComboBox in a LightSwitch Application (Visual C#) in Visual Studio 2012.

The following is the procedure for selecting an item using a ComboBox.

Step 1

Open the Solution Explorer.

sol exp.jpg

Step 2

In the Solution Explorer, right-click on the server and choose "Add Table".

add table.jpg

Step 3

In this way we will add two tables (one is a Student table and another one is a College table). The table appears.

Student Table

College Table

Step 4

Go to the menu bar, click the "Add Relationship" button.

The "Add New Relationship" dialog box appears on the screen. In that establish a one to many relationship between the two tables.

add new relationship.jpg

Step 5

In the Solution Explorer, right-click on the Screens and choose "Add Screen".

add src.jpg

Step 6

The Add New Screen dialog box appears. Select the "Editable Grid Screen" from the Screen Template, under screen information, choose "Colleges" under screen data and provide a name for the Screen and click the "OK" button.

editable data grid.jpg

Step 7

Once again add a "New Data Screen" and from the Screen Template, under screen information, choose "Student" under the screen data and provide a name for the Screen and click the "OK" button.

new data src.jpg

Step 8

The Screen Designer appears.

src desi.jpg

Step 9

For the college table change the DataGrid Control to Custom Control.

Go to the property window, and click on the change link next to the Custom Control. The "Add Custom Control" dialog box appears on the screen.

custom control.jpg

From the "System.Windows.Controls" namespace, select the ComboBox control.

Step 10

From the screen designer, now click on the Add Data Item button in the menu bar.

Add Data item.jpg

Step 11

The Add Data Item dialog box appears. Choose the "Queries" radio button and select "Colleges-Colleges(All)" from the grid, provide some name and click the "OK" button.

add data item dialog.jpg

Step 12

Click on the write code button and select the "_Activated event".

write code.jpg

The code editor appears.

using System;

using System.Linq;

using System.IO;

using System.IO.IsolatedStorage;

using System.Collections.Generic;

using Microsoft.LightSwitch;

using Microsoft.LightSwitch.Framework.Client;

using Microsoft.LightSwitch.Presentation;

using Microsoft.LightSwitch.Presentation.Extensions;

namespace LightSwitchApplication

{

public partial class CreateNewStudent

{

partial void CreateNewStudent_InitializeDataWorkspace(global::System.Collections.Generic.List<global::Microsoft.LightSwitch.IDataService> saveChangesTo)

{

// Write your code here.

this.StudentProperty = new Student();

}

partial void CreateNewStudent_Saved()

{

// Write your code here.

this.Close(false);

Application.Current.ShowDefaultScreen(this.StudentProperty);

}

partial void CreateNewStudent_Activated()

{

// Write your code here.

IContentItemProxy combo = this.FindControl("Colleges");

combo.SetBinding(System.Windows.Controls.ComboBox.ItemsSourceProperty, "Screen.Colleges2", System.Windows.Data.BindingMode.TwoWay);

combo.SetBinding(System.Windows.Controls.ComboBox.SelectedItemProperty, "Screen.StudentProperty.College", System.Windows.Data.BindingMode.TwoWay);

}

Step 13

Press F5 to run the application. Open the "New Student Screen" screen.

output 1.jpg

Click on the "Add" button to add information and click "OK".