How to Make an Entire Row Clickable in Repeater JavaScript

JavaScript makes it possible for ASP.NET Web developers to manipulate repeater control items quickly. The repeater control works like a table. Although it is similar to the GridView control, the repeater has customizable layout templates. Using the Item Template, for example, you can add HTML elements to design your own unique layout. To allow users to click a repeater's entire row, add a JavaScript function to your Web page.

Instructions

Create Repeater

1. Open Microsoft Visual Studio and select "File."

2. Select "New Website" from the drop-down menu to open the "New Website" window. Click "C#" and then double-click "ASP.NET Website." Visual Studio will create a new website project. Project files appear in the Solution Explorer. The HTML code for the default form, "Default.aspx," will appear in the code window.

3. Add the following code to the "body" section of the document:

   <asp:Repeater id="Repeater1" runat="server" onitemcommand="Repeater1_ItemCommand">

   <HeaderTemplate>

   <table border=1>

   </HeaderTemplate>

   <ItemTemplate>

   <tr>

   <td><asp:LinkButton runat="server" ID="SelectRow" CommandName="SelectRow" >Select Row </asp:LinkButton> </td>

   <td> <%# Container.DataItem %> </td>

   <td width="33%"><%# DataBinder.Eval(Container.DataItem, "Month") %></td>

   <td width="33%"><%# DataBinder.Eval(Container.DataItem, "Temperature") %></td>

   </tr>

   </ItemTemplate>

   </asp:Repeater>

   This creates a repeater control that contains two rows, two columns and a button.

4. Right-click anywhere on the page and select "View Code." The C# code will appear in the code window and display this method:

   protected void Page_Load(object sender, EventArgs e)

   {

   }

   Note the two bracket symbols below the first line of code. This is where additional code goes.

5. Paste the following code between the two bracket symbols:

   System.Data.DataTable dataTable = new System.Data.DataTable();

   dataTable.Columns.Add(new System.Data.DataColumn("Month", typeof(string)));

   dataTable.Columns.Add(new System.Data.DataColumn("Temperature", typeof(string)));

   dataTable.Rows.Add(new string[] { "June", "100" });

   dataTable.Rows.Add(new string[] { "December", "45" });

   Repeater1.DataSource = dataTable;

   Repeater1.DataBind();

   This code creates a data source for the repeater.

6. Right-click anywhere in the code and select "View Designer." The Web form will appear showing the repeater. Right-click the repeater and select "Properties" to open the Properties window.

7. Click the "Events" tab at the top of the Properties window to display a list of events.

8. Double-click the "ItemDataBound" event. The Code window will open and display this code block:

   protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)

   {

   }

   This code runs after the repeater loads its data.

9. Click the "Events" tab at the top of the window and then double-click "ItemCommand." The C# code window will reopen and display this code:

   protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)

   {

   }

   This code runs when you click the button control on the repeater.

10. Paste the following code between the two bracket symbols:

    int selectedRow = e.Item.ItemIndex;

    Type scriptBlockType = this.GetType();

    ClientScriptManager scriptManager = Page.ClientScript;

    string javaScriptFunction = "selectRow(" + "'" + selectedRow + "'" + ")";

    ClientScript.RegisterStartupScript(GetType(), "selectRow", javaScriptFunction, true);

    This code calls a JavaScript function that will highlight the selected row.

Configure JavaScript

1. Click the "Source" tab located at the bottom of the screen. The HTML code for the form will appear.

2. Add the following JavaScript code after the document's "<title>" tag:

   function selectRow(selectedRow) {

   var repeaterRows = document.getElementsByTagName("tr");

   repeaterRows[selectedRow].style.backgroundColor = "yellow";

   }

   This code selects and highlights the row that you click.

3. Press "F5" to launch the website. The populated repeater control will appear in the browser.

4. Click one of the rows. The JavaScript code will select the row and highlight it.

References

• Microsoft MSDN: Repeater.ItemTemplate Property (System.Web.UI.WebControls)
• Microsoft MSDN: ClientScriptManager Class (System.Web.UI)

Resources

• Read this Article in Spanish
• JavaScript Kit: Advanced JavaScript Tutorials