Click here to Skip to main content
15,173,640 members
Articles / Web Development / ASP.NET
Article
Posted 18 May 2005

Stats

51.7K views
704 downloads
21 bookmarked

Customized Buttons in Web Application DataGrids

Rate me:
Please Sign up or sign in to vote.
3.29/5 (6 votes)
13 Jun 20054 min read
Describes the steps and wiring required to add customized buttons in web application DataGrids.

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:

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:

Image 1

  • 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:

Image 2

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:

C#
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:

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

C#
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:

Image 3

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author


Comments and Discussions

 
Generali need for set dataset to datagrid Pin
mai200526-Apr-06 18:28
Membermai200526-Apr-06 18:28 
Generalaccess rights Pin
Member 208302520-Sep-05 13:19
MemberMember 208302520-Sep-05 13:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.