This article is Part 3 of the series “Beginners Guide to Visual Studio LightSwitch”.
Visual Studio LightSwitch is a new tool for building data-driven Silverlight Application using Visual Studio IDE. It automatically generates the User Interface for a DataSource without writing any code. You can write a small amount of code also to meet your requirement.
In my previous chapter “Beginners Guide to Visual Studio LightSwitch (Part – 2)”, I described you how to create a search record window & export the records to Excel Sheet using Visual Studio LightSwitch for Silverlight. I also demonstrated about sorting and navigating records without writing a single line of code.
In this chapter, I will guide you step-by-step to create a DataGrid of records. Here you will know, how to insert/modify/delete records. These all steps are without writing any code. We will use just the tool to improve our existing application.
Background
If you are new to Visual Studio LightSwitch, I will first ask you to read the first two chapter of this tutorial, where I demonstrated it in detail. In my 2nd chapter, I discussed the following topics:
- Create the Search Screen
- See the Application in Action
- Customizing the Search Screen
- Sorting the Records
- Customize the Name of the Screen
- Navigation and Export to Excel
In this Chapter, we will discuss on the “Editable Data Grid” screen. Read it and learn more about this tool before it get release.
Create the Editable DataGrid Screen
Open the solution “HelloLightSwitchDemo1” that we created in our first chapter. From the Solution Explorer, double click to open the “StudentTables” as shown in the below figure:
This will open the table in design view. Click on the button called “Screen” to create a screen based on the entity.
This will open up the “Add New Screen” dialog in the screen. From the dialog shown below, select the “Editable Grid Screen” from the left panel. This will show the preview in the middle panel. The editable grid screen can be use to edit one or more records inside a datagrid.
From the right panel, select the Screen Data i.e. the table you want to work with.
This will set the ScreenName in the same dialog. You can change it too here or can change it later as discussed in the earlier chapters. Currently, I am going with the default name. Click “OK” to continue creating the screen.
Once you click “OK”, it will close the dialog and open the designer window of the screen inside Visual Studio IDE. You can change something here. If you read the earlier chapters, you will familiar with this screen. Currently I am going with the default screen because I want you should understand it easily.
Once everything is done, run the application to see the screen in action.
See the Application in Action
Now, it’s time to run the application to see the implemented screen. To do this, press F5. This will build the project and run the Silverlight application outside browser window (Out-of-Browser application). You will see the following UI once it run properly:
The default screen here will be the “New Student” tab. Close the tab and from the left panel click on the menu item called “EditableStudentTableGrid”.
It will open the tab ain to the screen s shown below:
You can see that, the screen has one search textbox panel which actually filters the records. It has a command button panel to do Add, Edit, Delete and Refresh function. It has a button called “Export to Excel”. It exports the record to the excel application sheet. It has one navigation panel to paginate the records. Let’s discuss them one by one.
Edit a Record
Let us start discussing on how to edit a record first. I will show two different approach. Select any record and double click on the column that you want to modify. You will see that, the cell will become in editable mode and the value present in the cell will be selected automatically.
Now set a different value to the cell. Press TAB to modify another cell.
Once you done modifying your records, press the “Save” button placed at the top left corner of the screen. You can also press “CTRL + S” to save the modified records.
Now let’s see another approach to edit a record. Select the row that you want to modify and click on the button called “Edit…”.
This will bring a child window with all the fields related to the record. The input boxes will be auto field with the data records. Modify the fields that you want and click “OK”.
Now press “Save” to update the records in the database table.
Create a New Record
We just completed editing the records. So, what next? Let’s create a new record from this screen. Here also, I will show you two different approach for inserting a new record.
In the first approach, click on a empty row and it will create a new row in the DataGrid as shown in the above UI. Start entering some records in the Grid.
Fill up all the fields and press the Save button present at the top left corner of the screen. This will save the records to the table.
Now we will show the same step using the second approach. Click on the “Add…” button as shown in the below screen:
This will popup the Child Window on top of the screen. It will have all the fields present in the table. Enter all the records.
Click “OK” and in the parent screen, press “Save” to store the new record. You will see the new records in the DataGrid.
Validate the Record
Before doing anything, I will show you the validation in the same screen. We will enter empty record in the screen and press “Save” button now. See the following screenshots:
You will see that, it actually validates the record automatically and show a message to the screen showing “Please correct data entry errors and try to save again.” Click “OK” to go back to the parent screen.
You will notice that it actually mark those fields as “Red border”.
Fill those mandatory fields and click “Save” once again. You will notice that, those validation error will go out from the screen and the new records will get saved in to the table.
Delete a Record
We had gone to a lengthy discussion of inserting and modifying records. Now it’s time to delete a record. Select the record(s) and press delete. You will notice that, the record has been deleted from the DataGrid.
Now go with the second approach. It is the same thing that we saw in the first approach. Select the row(s) and click the “Delete…” button in the screen (as shown in the below screenshot).
You will see that, the record has been deleted from the DataGrid and there is a red “x” mark placed at the side of the record. That means, the record has been deleted.
Press “Save”. You will see the record completely removed from the record table.
Woo, what a simple approach. No code, no XAML. The application is ready with add, edit and delete functionality. Let’s see some more features of it.
Filter & Export Records
This step we already discussed in the 2nd Chapter. But we will discuss it once again. In the same screen you can sort the records very easily. If you want to sort them by “Age”, click on the header of the column and you will see the records automatically sorted.
To filter out the records, start typing your query key in the search panel. You will notice that, the record has been filtered properly as per the search key. Have a look in to the following snapshot:
Oh yea, you can also export the records to an Excel worksheet by just pressing a single button. Click on “Export to Excel” button and you will watch the records exported to a Excel workbook. Yes, there’s a condition. You must have Excel installed in your PC.
There’s also a Navigation panel to paginate all the records.
Customizing Screen
You can also customize the screen. You can change the title of the screen. I will not discuss more on this topic. Read the first two chapters. I discussed more about this point there. To change the screen name, click on the “Customize Screen” button placed at the right corner of the screen.
Once you update the display name there, save the settings and restart the application to see the updated settings in the screen.
That’s all about it. You will now see that the new name has been assigned to the screen.
End Note
You can see that, throughout the whole application I never wrote a single line of code. I never did write a single line of XAML code to create the UI. It is presented by the tool template automatically. It has a huge feature to do automatically. From the UI design to add, update, delete and even sort, filter all are done automatically by the framework.
I hope, you enjoyed this chapter of the series a lot. Lots of figures I used here, so that, you can understand each steps very easily. If you liked this article, please don’t forget to share your feedback here. Appreciate your feedback, comments, suggestion and vote.
I will soon post the next chapter. Till then enjoy reading my other articles published in my Blog and Silverlight Show. Cheers…
About the Author
 |
Kunal is a Microsoft MVP in Silverlight, currently working as a Software Engineer in Pune, India. He is a Silverlight enthusiastic and want to work in Silverlight, WPF & Microsoft Surface. Apart from his daily office work, he spends a huge time on online communities. Writing articles, blogging, tweeting and answering to forums are some of his regular activities. He likes to share knowledge and learn newer things.
Follow him in his blog: http://www.kunal-chowdhury.com/
He also Tweets. Follow him in Twitter - @kunal2383 |