Highlight-click-display

Jul 30, 2007

2 min read

.NET1.0

WinXP

C#

ASP.NET

Javascript

Windows

.NET

Visual-Studio

DBA

Dev

WebForms

Intermediate

Author picture

by Florence FZ Li

Contributor

39k Views

Screenshot - ClickRow.jpg

The top figure displays the highlight of the selected row. The bottom one displays the information of the selected row on the second page.

Introduction

When we click anywhere inside a row in the DataGrid, that row is highlighted and the information of the selected row will be displayed on the other page. One small disadvantage of this technique is that it adds somewhat to the stream rendered to the browser. It also adds information for each row to the view state.

Implementation

In this article, we only need to access the data item at the time it is being bound to the control, so we'll be working with the ItemDataBound event. It is relatively easy to add alternating colors to the rows in the DataGrid. However, when we move the mouse over the row, we may want to highlight that row and possibly add an option for a click event to the selected row. Now let's create a form before getting into the code.

ASPNET
<asp:datagrid id="DataGrid1" 
    OnItemDataBound="Item_Bound" AutoGenerateColumns="False" 
    CellPadding="2" SelectedItemStyle-BackColor="#33ccff" 
    BorderColor="#CC9966" BorderWidth="2px" EnableViewState="False" 
    Font-Size="12pt" 
    style="Z-INDEX: 101; LEFT: 100px; POSITION: absolute; TOP: 47px"  
    runat="server" >
    <Columns>
        <asp:BoundColumn DataField="LastName" 
            HeaderText="Last Name" ItemStyle-Width="150px">
        </asp:BoundColumn>
        <asp:BoundColumn DataField="FirstName" 
            HeaderText="First Name" ItemStyle-Width="150px">
        </asp:BoundColumn>
        <asp:BoundColumn DataField="Date" 
            HeaderText="_Date" ItemStyle-Width="150px">
        </asp:BoundColumn>
        <asp:ButtonColumn ButtonType="LinkButton" 
            CommandName="Select" Visible="False">
        </asp:ButtonColumn>
    </Columns>
</asp:datagrid>

Notice here that I added an OnItemDataBound function, Item_Bound. Add a JavaScript function to the ASPX.

JSCRIPT
<script language=

Here is the Item_Bound function that achieves the goals.

JSCRIPT
public void Item_Bound(object sender, 
    System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    

I wanted to indicate how many rows the user once clicked, so I didn't de-highlight the previously clicked row.

Conclusion

As you can see, it is easy to highlight a row and display the information of the selected row on the other page. There are different methods for changing the output and formatting of the data in your DataGrid. The method you choose depends on what you want to perform.

History

  • 30 July, 2007 -- Original version posted

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)