Jul. 23, 2007 at 5:29pm

ASP.net 2.0 Gridview vs. Custom Coding

A balance of needs and time

I recently decided to try the Gridview control in asp.net 2.0. I read some documentation and decided that it would be very easy to implement. I started by following a step-by-step tutorial on creating a table using the Gridview control, which uses the SqlDataSource control. This step-by-step tutorial included details on how to add paging, column sorting, updating a record, and deleting a record. The tutorial can be found here.

I was actually excited when I got this to work and how easy it was to do. It would only take a few minutes to create a simple, paged, sortable table where a user can delete and update records right on the page. Please note that simple is the operative word here.
The next step was to start modifying the table's appearance to be similar to our standard table layout and colors and using images for the edit, delete, save, and cancel buttons. I first decided to tackle adding images to the  buttons. The default grid has a simple hyperlink button titled "Edit" and "Delete" and if you selected to "Edit" a record, those links were replaced by "Update" and "Cancel." As I began looking into ways to change this, I soon learned it's not that simple. In order to use my images, I needed to add a new column to the Grid for a command field. This command field allowed me to select images for "Edit", "Delete", "Update", and "Cancel" but it took me some time reading online tutorials and searching the Microsoft Visual Studio 2005 Documentation in order to figure out how to do it.

I then updated the look and feel of the gridview to match our standard layout. That turned out to be pretty simple, since all I did was select a standard theme that's available to the gridview that was fairly close. I also wanted to hide the column that displayed the id number for each record, since a user has no need for it. Unfortunately, the Gridview needs that column in order to perform the delete and edit operations. I thought about updating the styling of cells under the id column to have a width of 0, but I didn't to want spend any more time on it.

Next, I like how you could press the "Edit" icon or text and then that row would be converted to a simple form. So, I wanted to do the same thing for adding a new record. Ooops, that's not so easy either. It turns out that the Gridview does not have anything built in for adding a new record. After googling, there turned out to be a number of methods to simulate that behavior. Since I was in a hurry, I decided to go with the easiest one to implement, which is basically displaying a simple add form instead of the table. To see how this was done, please refer to this article. Unfortunately, this was not what I wanted.

Now, the next thing I wanted to do was add a simple javascript to confirm that the user wants to delete the record. How hard could that be? Well, it's not exactly hard, I mean none of it is hard, just time consuming. In order to add javascript, I would need to convert the Gridview columns into templates in order to add the OnClientClick attribute to the delete icon button. Unfortunately, by converting to templates, that meant turning off the EnableSortingAndPagingCallbacks for the Gridview. Which meant I would have to do some more research on how to manually sort and page the Gridview. I decided that if a person clicked the delete, then the item will get deleted, no questions asked.

What I learned was the more I features I wanted to add to the Gridview, the more research and coding that was required. In comparison, I decided to programatically write a table similar to Gridivew. I was able to add code for paging, column sorting, button to edit and delete a row, and a row for adding a new record. I was also able to add javascript to confirm a deletion. The edit button worked exactly the same as the Gridview, if you pressed edit, then that row would be converted to a simple form, with icon buttons for saving and cancelling. In addition, I was able to move the paging controls anywhere I wanted and to style it in any way. I also added a previous and next buttons, along with listing all the page numbers. At first glance, I couldn't find a way to this in the Gridview control.

When comparing these two methods, Gridview vs Custom Coding, I spent twice as long creating the Gridview than I did using the custom coding method. However, this has more to do with the steep learning curve for the Gridview, especially when you need certain features, so I figure coding time could eventually be about the same, and would actually be a lot faster if the table is simple. The one advantage of Custom Coding, is that you can tailor your table to look and behave  exactly as you wish, especially if you wish to incorporate a lot of javascript. Hope this helps in determining when to use the Gridview or any other control.

Posted in ASP.NET 2.0, Coding Techniques, From the Workbench by Ken Foubert

Comments (2)

---

Remember me

Name: Email: URL: Comment: *   No HTML, http:// will auto-link
* required    Comment Guidelines

SiteCrafting reserves the right to delete any comments that violate the following guidelines...

Comments should:
Stay on topic--or at least close.
Be brief and to the point.
Be cordial and professional. (Flaming will not be tolerated.)

Comments should NOT:
Endorse or promote any person, product, or company.
Disparage or defame any person, product, or company.

Please note:
Dissenting views are encouraged. Insulting language is not.
All comments with embedded URLs will be reviewed before posting.
These guidelines are subject to review and change at any time without notice.