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.

image1.png

Step 2 : Create table like as person.

image2.png

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

image3.png

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

image4.png

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.

image5.png

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

image6.png

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.

image7.png

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.

image8.png

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

image9.png

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.image10.png

Step 11 : Save->Refresh.

image11.png

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.

image12.png

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

image13.png

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.

image14.png

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

image15.png

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.

 image16.png

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

 image17.png

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

Up Next
    Ebook Download
    View all
    Learn
    View all