Data Screens in LightSwitch 2011: Part 3

In the last article I discussed how to use and create search data screens in LightSwitch applications. In this article I'm going to explain how to use and create EditableGrid Screens in LightSwitch applications.

An EditableGrid screen is like a new data screen but there are some differences in an EditableGrid Screen. Using an EditableGrid Screen you can add, edit, delete and data export to Excel format.

EditableGrid Screen

An Editable Grid Screen is used to edit and add data to a table. Using this screen you can edit data at run time and you can also add new data into the table. Using an EditableGrid Screen you can also delete and export data to Excel format.

How to use the EditableGrid Screen

Step 1 : Open Visual Studio LightSwitch->Click on create new table.

Step 2 : Create table like as person.

Step 3 : Now we will add a screen. Right-click on screens->Add screen.

Step 4 : Select EditableGrid screen->Select screen data (People)->Ok.

Step 5 : Run application (Press F5). If you want to add a record in the screen then you will click on the + sign. Which is shown in the image below.

Step 6 : Now you will see a small window with an add new person name. Fill data->Ok->Save.

Step 7 : If you want to add data in the screen without click on + sign then you can do that. For this purpose you will click on any column to add or edit data in the screen like as in the following image.

Step 8 : If you want to edit record in the screen, you can do that. For this purpose you will click on the edit icon, which is shown in the image below.

Step 9 : Now you can edit record with in small window then ok, like as in the image below.

Step 10 : If you want to delete any record from the screen then you can do that. For this purpose you will click on the delete icon, like as in the image below.

Step 11 : Save->Refresh.

Step 12 : If you want to export your data in to Excel format, you can do that. For this purpose you will click on the Excel icon.

Step 13 : Now you will see your data in Excel format.

Step 14 : If you want to remove the add, edit and delete icons from your screen, then you can do that. For this purpose you will go to the design screen in the right corner of your application. Expand command bar->Delete add, edit, delete->Save. Like as in the image below.

Step 15 : Now you will see there are no add, edit, delete icons in your data screen.

Step 16 : If you want to close your data screen, you can do that. For this purpose you will go on design screen in the right corner of your application. Expand screen command bar->Add->Close->Save.

 

Step 17 : Now you can close your data screen using the close button. Like as in the image below.

 

Conclusion

So in this article we have seen how to work with the Editable Grid Screen for adding, editing and deleting the records. The EditableGrid Screen works as a new Data Screen but you can't edit and delete records in the New Data Screen.

Some Helpful Resources

• Data Screen in LightSwitch : Part 1
• Create custom search screen in Lightswitch Application
  
• Add Static Image on the Home Screen in Visual Studio LightSwitch
• Create a screen which Edit and Add Records in a LightSwitch Application
• Open a screen after saving another screen in a LightSwitch Application