This is the fourth part of the 11 series LightSwitch tutorial. In this part we will learn about what how to work with the Editable Grid Screen for adding, updating and deleting the records .
Table of Content
- Introduction
- Aim of the article
- Steps to create Editable Grid Screen
- Functionalities of the Editable Grid Screen
- Add a new record
- Edit an existing record
- Delete an existing record
- Conclusion
Rapid business application development is a need of today’s business and keeping that in focus software stewards wants to build the 3 tire applications at a lightning speed where there will be less code, less time will be spent on designing the UI screens , the BAL layer and DAL layer. By keeping all these into focus, on 26th July, 2011, Microsoft has released their new product – LightSwitch.
It is the simplest way for developers of all skill levels to develop business applications for the desktop as well as for cloud. This is the fourth part of the series of 12 LightSwitch tutorials.In this part we will look into how to work with Editable Grid screen.
You can read the other parts of the LightSwitch tutorial as under
- Part 1: Introduction to Light Switch
- Part 2: Rapport with New Data Screen
- Part 3: Rapport with Search Data Screen
- Part 4: Rapport with Editable Grid Screen
- Part 5: Rapport with List and Details Screen
- Part 6: Rapport with Details Screen
- Part 7: Rapport with External Data Source – Database
- Part 8: Rapport with External Data Source – WCF RIA Service
- Part 9:Using a custom control in LightSwitch
- Part 10: Publish LightSwitch Application as Desktop application and host in local system
- Part 11: Publish LightSwitch Application as Web application
The article assumes that, we have LightSwitch 2011 installed in our system
From the Screen Template, choose the "Editable Grid Screen". Enter a proper Screen Name and choose tblEmployee from the Screen Data.

Run the application.Initially it will appear as under

In this screen we have the option to add a new record, edit an existing record , delete an existing record as shown in the below figure

This screen provides a lot of functionalities which are listed as under
- Add a new record
- Edit an existing record
- Delete an existing record
- Search a record
- Sorting the records for a particular field in the grid
- Navigating among the records using the inbuilt pagination
- Export the records to Excel
Out of these various functionalities, we have covered #4 to #7 in the Search Data Screen illustration and henceforth will not be repeated here
Adding a new record through the screen is very simple.Click on the Add Button ('+') and we will be prompted as under

Since validations are already in place, so let us fill the values properly

Click OK button and the record has been added

N.B.~ We can also add record by clicking on the last row of the grid twice.
For doing editing, let us first choose the record in the grid and click on the Edit Button Icon.

The Edit pop up appears where we can edit the record. Click OK and the result is as under

N.B.~This can also be achieved by editing in the row and then clicking on the Refresh button follwed by clicking on the Save button.
Like Adding and Editing records, deleting a record is also simple.Choose the record from the grid and click the delete icon to delete the record

At this point the record will not be deleted but will be marked for deletion

Then click on the refresh button and click on Save.

The records will be deleted permanently

N.B.~Clicking on Discard button will not perform the deletion for the current transaction and Cancel button cancel the operation all together
So in this part we have seen how to work with the Editable Grid Screen for adding, updating and deleting the records. We have also figure out the other functionalities that this screen is providing us.In the next article we will look into the List and Details Screen.
Thanks for reading the article.Happy lightning with LightSwitch.