Handeling the functionality of the custom columns created out of template field and Item template field in grid view

Customization of grid view elements is the foremost thing, we will be asked to do most of the times. Let us see how to do that through this blog.

The above figure will give you the functionality to be implemented:
1) The Grid view should contain the image buttons for edit, delete and submit
2) The Order creation date column’s values should get highlighted in green, if today is the order creation date and the value should be highlighted in red if the order creation date is some other previous days.

Customizing the Grid with image buttons
Design code

To achieve the above functionality, first configure the grid view with a data source. Now in order to add the image buttons to the grid, include the template field bound with the item template tag and place an image button with in the template field with the properties added as shown in the image(Click the link to view the image).

Now, in order to make use of the image buttons bound inside the item templates set the ‘CommandArgument’ property and ‘CommandName’ as shown in the highlighted box. This will help to fetch the primary key of the particular record to do database operations.

Enabling the ‘RowCommand’ and ‘RowDataBound’

In order to implement the logic for the image button’s click event and the date highlighting functionality, Go to the design page, i.r Form.aspx and go to the grid view’s properties window, in which select the ‘Events’ tab. Now double-click on the ‘RowDataBound’ and ‘RowCommand’ events that will take you to the code behind, i.e Form.aspx.cs where you will find the two methods to implement your logic.you can find the events tab of the grid view’s properties window as shown in the figure(Click the link to view the image below.)


Implementing the code logic
Code Behind

Under the ‘RowCommand’, you can implement the logic as shown in the image(Click the above link) to do your required functionality for the image button click as given in the Highlighted box. Here you need to use the command name in order to have multiple custom columns

In order to implement the highlighting functionality, go to the ‘RowDataBound’ method define the logic as shown in the image below.

Highlight code


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s