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
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
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.