How to Use Editable Grid Screen in Light Switch Using Visual Studio 2012

How to use Editable Grid Screen in Light Switch using Visual Studio 2012

In this article I describe how to perform operations using an Editable Grid Screen using LightSwitch in Visual Studio 2012.

Procedure for publishing a Desktop Application

Step 1

  • Open the Visual Studio 2012.
  • Go to "File" => "New" => "Project..."
  • In "New Project" => "Installed" => "Template"
  • In "Template" => "LightSwitch"
  • Select "LightSwitch Application (Visual C#)".
  • Enter the Name and choose the location.
  • Click "OK".

nw pro.jpg

Step 2

Go to the Solution Explorer, right-click on the Data Source and select "Add Table".

add table.jpg

Step 3

Insert the data in the following table and rename it.

table.jpg

Step 4

Go to the Solution Explorer and right-click on the Screens and select "Add Screen".

add screen.jpg

Step 5

The Screen Designer appears.

ad screen.jpg

Step 6

Select the Editable Grid Screen Template and provide the screen information and click the "OK" button.

add screens.jpg

Step 7

The Application Designer appears.

app designer.jpg

Step 8

Now start debugging the following application. It will appear as shown.

editable src.jpg

Step 9

In the Screen we have the add (+) option order to add a new record.


plus.jpg

Step 10

When we click on the add (+) option the Add New Emp Table dialog box appears.

add new table.jpg

Step 11

Now we insert the value in the following box and click on the OK button.

insert value.jpg

Step 12

We will notice that the data will be added in the Editable Emp Tables Grid.

after inserting.jpg

Step 13

In the same manner we will click on the Edit option in order to do the editing in the data.

edit option.jpg

Step 14

The Edit Emp Table appears. After editing we will click on the OK button.

edit emp table.jpg

Step 15

After editing we will notice that the data is edited in the Editable Emp Tables Grid.

after editing.jpg

Step 16

Similarily the delete (-) option is also in the Editable Emp Tables Grid to delete the data.

delete option.jpg

Step 17

When we click on the delete option the data will be deleted


after deleting.jpg