How to Design Screen by Using Editable Grid Screen in LightSwitch Visual Studio 2012

How to Design Screen by using an Editable Grid Screen in LightSwitch Visual Studio 2012

In this article I describe how to design a screen using an Editable Grid Screen in Light Switch Visual Studio 2012.

In my previous article I described how to perform operations using an Editable Grid Screen using Light Switch in Visual Studio 2012 (http://www.c-sharpcorner.com/UploadFile/18ddf7/how-to-use-editable-grid-screen-in-light-switch-using-visual/).

procedure For using Design Screen using Light Switch

Step 1

As we run the previous application we have:

Step 2

Now we click on the Design Screen button.

design screen.jpg

Step 3

Customization Mode: the EditableEmpTablesGrid Screen Designer appears.

editable Emp Grid.jpg

The Screen Designer consistsof Editable Emp Tables Grid, Properties and Emp Tables along with Add ,Edit, Delete, Save and Cancel button.

Step 4

In this article I have selected the Name field from the Editable Emp Tables Grid.

emp tab name.jpg

Step 5

The Emp Tables appear in such a manner for the Name field.

Step 6

The property window for the name field appears in such a manner.

Step 7

In the property window by default the IsVisible Checkbox property is true.

check name visible.jpg

Step 8

Mark the IsVisible chechbox as unchecked and in the Editable Emp Tables Grid the Name column appears as not visible. Since we mark it as unchecked the Name column is also not visible in the Emp Table.

not visible.jpg

name not visible in grid.jpg

name remove table.jpg

Step 9

In the property window the Label Position is None.

In this article I have taken Label Position as left aligned.

label position left.jpg

Now the Emp Table appears in such a manner:

emp table left aligned.jpg

Step 10

By default in the property window the Text Alignment is left, however I have aligned the text as centered.

text alignment.jpg

name center appear.jpg

Step 11

Under the Property Window in the Sizing field by default the width is set Auto Size. Under the width option I have selected Character and provided the value as "1".