Create a fully editable DataGrid
Translation: nxyc_twz@163.com
I have seen many identical or similar questions in the forum: How do I place check boxes, text boxes, etc. in every line of my DataGrid? How do I update their values? The answer is quite simple. In this article, I will show you how to complete it.
We all know that DataGrid is a very powerful tool. According to my experience, in 90% of time, DataGrid is used to display data and may edit a line of data once. At some point, you may need to edit multiple lines, or even all data. A practical example is that in the application of online sales items, customers may change one or more items in their basket, click the check box to remove the goods they don't want.
Conceive
In this example, I wrote a simple WebForm to manage the list of contacts stored in XML. This requirement is very simple: with the ability to add new contacts, editing / deleting existing contacts. Users can modify or delete multiple contacts at a time, and I also allow users to sort the data grids according to their selected columns.
My example is written in C #. If you prefer the VB versions of these code, there are two formats in the download file.
Contacts.xml
The XML data file in this example is very simple and intuitive. Because it is very simple, I have not created a plan.
ContactList.aspx
Setting WebForm is very simple. I placed a new DataGrid into my form and set it to 4 columns, and the first column contains check boxes used to delete the contact. You will notice that the main job I do here is to create each column in the form of templatecolumn. This allows me to place text boxes and check box objects into the data template (ItemTemplate). This is a trick to display other things other than text in each line of the grid. In addition, you will notice that I use FooterTemplate to make new contacts simple and intuitive.
I also contain a link button (LinkButton) to save the user's modification and delete operation. But it doesn't have to add new contacts. Add a new contact's operation by the Link button (LinkButton) in the footer template of the last column.
