How to Create and Use the Editable Grid Screen in LightSwitch Beta 2

Prologue:

In my previous article, we saw how to create and use the Details Screen. In this article we shall discuss how to create and use an Editable Grid Screen in a LightSwitch application.

Preparing the Solution:

Create a LightSwitch Desktop application with the name "DesigningScreensInLSBeta2" as shown in the following figure.


Follow the [No: #] to create the Solution.

The Entity Designer:

Let us create a table.


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

After clicking on the "Create new table" option the following Entity Designer will be displayed.


To change the table name simply click on the header of the Entity Designer and give the new name. In our sample application we have given the name Student.

When you are creating a table [Entity], the field Id is the default one. At run time sometimes we don't need the Id to be displayed.

To make the visibility of the Id false, select the Id and select the properties for the Id field.


Just uncheck the option "Display by Default". It will hide the Id from the running screen.

Creating the Search Data Screen:

There are two ways to create a screen. One is by selecting the Screen... button on the Entity Designer screen top.


Another way is right-click on the Screens section in the Solution Explorer.



Adding Details Screen:

In this article we will mainly focus on the Details Data Screen.


To create the Editable Grid Screen, select Editable Grid Screen from the screen template in the left side panel [No: 1].

Give a suitable name for the screen we are creating. In this application we have given the name EditableStudentGrid [No: 2].

Quick Note:

• The name should start with alphabetics and contain only numbers and underscore.

Select the Entity which will be displayed in the Details Screen. For our application we have selected the Students as having only one Entity [No: 3].

Where & When to use Search Data Screen:

If you don't have the New Data Screen to add new data, at this time you can use the Editable grid screen. Using this screen you can add and edit the records.

If you need to edit a particular record then double-click on the particular cell you will be having the cell in editable mode.

Changing the Appearance of Search Data Screen


We can change the control type selecting from the control type combo box.

If you don't need the Export option displaying the Editable Grid Screen then you can disable it by selecting the Disable Export to Excel option [No: 1].

And also you can make the Add button invisible [No: 2].

Application in Action:


You can say that this Editable Grid Screen is an All-in-one screen. Because this editable grid screen has all the features of other screens like search option [No: 2], add new record button and edit option [No: 1].

The last row has a start like symbol which means to create a new record [No: 3].

Editable Grid Screen as Search Data Screen:


Here you can see the Editable grid screen as Search data screen. We can search the record using search box in this editable grid screen.

Editable Grid Screen as New Data Screen:


The editable grid screen can also be used as a new data screen as this screen has the add new record button.

We can make the add new record button invisible if we need to by using the appearance property.

Summary:

In this article, we have seen how to create and use the Editable Grid Screen in a 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.

Please rate this Article.

Thanks.