Articles → Light Switch 2011 → Creating An Editable Grid Screen In Light Switch 2011

Creating An Editable Grid Screen In Light Switch 2011

In this tutorial I will explain how to add, edit and delete the information using the editable grid screen. Using this screen I will explain how to export data into excel.

Screen Creation

First of all create an editable grid screen. For that right click on the Screen folder in the Solution Explorer and click Add Screen. A pop up will come, select Editable Grid Screen option and click ok.

Picture showing a window for adding the Editable Grid Screen in lightswitch application

Click to Enlarge

A new screen is created in the screen. Now run the project. A screen will appear as shown in figure below

Picture showing different parts of the Editable Grid Screen

Click to Enlarge

Check the figure you will observe that you can do following operations with data

Add data
Edit data
Delete data
Export data to excel
Search data

Add Data

To add a new record click on the plus(+) button. A pop up window will appear

Click to Enlarge

Enter data and click Ok. Once you click ok a new row is added in the grid. But this record is not saved into the table. So if you close the application and re-run it you will not find this record in the grid. To save the record in the table you have to click the Save button which is located on the upper left hand side of the screen besides Refresh.

A play sign is prefixed to the record to indicate that record is not yet saved in the table or in other words this transaction is uncommitted. Please check the figure below.

Picture showing the play icon that shows that record is not saved yet in the database

Click to Enlarge

Edit Data

To edit data click on the edit button(button with pencil icon). Again a pop up come with the value to edit

Click to Enlarge

Change the information and click Ok. In case of edit an asterisk(*) is prefix before the record to indicate that information is not yet saved in the table.

Click to Enlarge

To save the information you have to click the Save button like what we have done while adding a new record.

Delete Data

To delete a record select a record and click on the delete icon. When you click on the button a cross with red color is prefixed before the record as shown in figure below

Picture showing the red cross with the record which means that record is marked for deletion

Click to Enlarge

To delete the record from the table click on Save button.

Export Data To Excel

To export data to excel click on the excel icon. An excel file will come in which records will be displayed

Picture showing the excel file with records when user exports the data in excel

Click to Enlarge

Search Data

To search data enter the data in the search textbox and click on the magnifier. Search result will be shown in the grid.

Picture showing the search functionality in the editable grid screen in lightswitch

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Wednesday, December 21, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**