(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Beginners Guide to Visual Studio LightSwitch (Part - 3) - Working with Editable DataGrid Screen

(15 votes)
Kunal Chowdhury
Kunal Chowdhury
Joined Mar 28, 2010
Articles:   7
Comments:   14
More Articles
6 comments   /   posted on Nov 09, 2010
Categories:   LightSwitch

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.



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

image69_thumb_thumb 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



  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 3)

    posted by Dan on Nov 16, 2010 11:55

    Ultimate series of LightSwitch Tutorial. Keep it up.

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 3)

    posted by Ranjit on Dec 15, 2010 07:06

    Well explained. Perfect tutorial for a beginner.

  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 3)

    posted by Goldfinger on Dec 21, 2010 19:44

    Excellent work on the Lightswitch. A VERy usefull application. Nice work on your article too. clear and concise. Just one or 2 grammatical errors if you want to have someone full polish it up !



  • -_-

    RE: Beginners Guide to Visual Studio LightSwitch (Part - 3) - Working with Editable DataGrid Screen

    posted by Akiii on Mar 19, 2011 18:43

    great work kunal...



  • srikar

    Re: Beginners Guide to Visual Studio LightSwitch (Part - 3) - Working with Editable DataGrid Screen

    posted by srikar on Nov 05, 2011 08:10
    Am working with visual studio light switch. how to show user friendly message after inserting data. after clicking sumbit button i want to "data inserted successfuly". how to do this.
  • srikar

    Re: Beginners Guide to Visual Studio LightSwitch (Part - 3) - Working with Editable DataGrid Screen

    posted by srikar on Nov 05, 2011 11:11
    Am working with visual studio light switch. how to show user friendly message after inserting data. after clicking sumbit button i want to "data inserted successfuly". how to do this. could u plz replay me.


Add Comment

Login to comment:
  *      *       

From this series