Customized Buttons in Web Application DataGrids

• Download source code - 9.41 Kb

Introduction

I wanted to add buttons to my DataGrid, but I didn't want a button on each line that said 'Edit' or 'Update'. I wanted each button's text value to vary based on cell contents. It just seems more intuitive and less amateurish to use data to populate the buttons as opposed to creating dozens of buttons all of which carry the same text. Why have an 'Edit' button next to some cell value when the cell could contain the button?

During my search to solve this problem I couldn't find one source that addressed the solution in its entirety. I found clues to the solution at a variety of places, but no single source answered the question completely. Consequently I was forced to read between the lines, experiment, search, hope, bug / debug, and finally succeed. Hopefully this article saves someone the time and trouble of a similar search.

Background

This article assumes the following:

• You know how to add a DataGrid to a web application.
• You know how to create and bind a DataSource to the DataGrid.
• You know what you want to do once you catch the event generated by the button.
• Code Project article on DataGrid Templates... Thanks Zachery.
• MSDN DataGrid Overview.

Using the code

There are four steps involved to create and wire the button templates:

• Create the button template.
• Edit the button template.
• Add the button click event handler reference to the HTML.
• Code the button click event handler.

I am going to assume that you already know how to add a DataGrid to your Web Form. First we need to create a template that will hold the button.

• Right click the DataGrid and select 'Property Builder'.
• Select the Columns tab.
• Select the Button column and expand it.
• Select 'Edit Update Cancel' and add it to the 'Selected Columns List'.
• Change Button type to Pushbutton.
• Click the link to 'Convert this Column into a Template Column'.
• Click the OK button. We are done here.

At this point we have created the basic template that will be used to create a button in the first column of the DataGrid. You should now see a DataGrid on your screen that looks something like this:

• Right click the DataGrid and select Edit Template, Columns[0].
• Delete the Update and Cancel buttons. They are not needed for the purpose of this article.
• Right click the DataGrid and select End Edit template.
• Switch to HTML View.

Notice that the HTML generated via the template has a button called Button1. You will need to edit this line to add an event handler. Enter the name of the event handler that will be called when this button is pressed. For example: OnClick="Button1_Click". The HTML for your button template should be similar to this:

Open the aspx.cs file. You will need to add the button event handling code to your CS file. The method you create must be a public method that expects two arguments, object and System.EventArgs. To continue with the example, the event handler signature will be:

public void Button1_Click(object sender, System.EventArgs e)

Here you can add any code that you like. I'm sure that you know what you want to do once you catch this event.

Although it is beyond the scope of this article, you must have bound your DataGrid to a DataSource to go to the next step. Refer to the MSDN link included above for more information on the DataGrid.

Before displaying your web page you will need to call a method that populates the DataGrid button's text. The data could come from any place. In my case, I chose another column from the DataGrid. In the code snippet below, I iterate through the DataGrid, retrieve the text from the first data column, and copy it to the button's Text property. Pretty easy once you know the trick:

for (int i = 0; i < dg.Items.Count; i++)
{
    DataGridItem dgi = dg.Items[i];
    
    // cast datagriditem to a button
    Button b = (Button) dgi.FindControl("Button1");
    
    // set button properties
    b.Text = dg.Items[i].Cells[1].Text;
    b.Width = 170;
    
    //hide the data in the 2nd cell. no point in showing it twice
    dg.Items[i].Cells[1].Visible = false; 
}

Although this is not necessary in all cases, if you are going to reference the button in the event handler, I suggest you cast the sender object to Button in the event handler.

public void Button1_Click(object sender, System.EventArgs e)
{
    Button b = (Button) sender;
    
    // the rest of your code
}

That's it. Hopefully the code will compile and run the first time, and you will see a Web Form like this:

Points of interest

• Experiment with the DataGrid's ShowHeader and ShowFooter properties to customize the look of the buttons.
• Use a <DIV>to contain the DataGrid to make it scrollable.