Home > Developer > ASP

Highlighting rows in an ASP. NET DataGrid...

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Highlighting rows in an ASP. NET DataGrid...

By: John kilgo Date: January 11,200 3 download the code. Printer friendly version

I like the idea of highlighting rows in a DataGrid as the user scrolls the mouse up and down over the grid. the effect can be achieved using several lines of client-side JavaScript, but why do that when two lines. net code will accomplish the same thing? The trick is to implement an itemdatabound event handler and add onmouseover and onmouseout attributes to handle the color change.

The code for this project is in two parts. an ASPX page is used to define the DataGrid and its attributes, while. VB code-behind page is used to implement the database activity and handle the itemdatabound method. first. ASPX page.

Notice the line onitemdatabound = "dtgcustomers_itemdatabound ". onitemdatabound is a DataGrid method that raises the itemdatabound event. "dtgcustomers_itemdatabound" is the event handler which is contained in the Code-behind file. one note: I chose to display rows from the northwind MERs table. since this table contains over 90 rows, I also implemented Paging for the DataGrid. if you have used datagrids at all the rest of the attributes shocould be self explantory. I won't spend any more time on. ASPX page.

<% @ Page Language = "VB" src = "highlightdatagrid. aspx. VB" inherits = "highlightdatagrid" %>

<HTML>
<Head>
<Title> Mouseover highlighting of DataGrid rows </title>
</Head>
<Body>
<Form runat = "server" id = "form1">
<Asp: DataGrid id = "dtgcustomers"
Runat = "server"
Onitemdatabound = "dtgcustomers_itemdatabound"
Cellpadding = "4"
Backcolor = "white"
Borderwidth = "1px"
Borderstyle = "NONE"
Bordercolor = "Indigo"
Allowpaging = "true"
Pagesize = "10"
Onpageindexchanged = "dtgcustomers_pageindexchanged"
Pagerstyle-mode = "numericpages"
Enableviewstate = "false"
Autogeneratecolumns = "true">
<Selecteditemstyle font-bold = "true"
Forecolor = "#663399"
Backcolor = "# ffcc66">
</Selecteditemstyle>
<Itemstyle forecolor = "Navy"
Backcolor = "white">
</Itemstyle>
<Alternatingitemstyle forecolor = "Navy"
Backcolor = "yellow">
</Alternatingitemstyle>
<Headerstyle font-bold = "true"
Forecolor = "Navy"
Backcolor = "lightyellow">
</Headerstyle>
<Pagerstyle horizontalalign = "center"
Forecolor = "Navy"
Backcolor = "lightyellow">
</Pagerstyle>
</ASP: DataGrid>
</Form>
</Body>
</Html>

Now for the codebehind file. the majority of the Code is the typical database stuff to get the data, and to bind the data to the grid. all you see just below shoshould again be self explanatory.

Imports system
Imports system. Web. UI
Imports system. Web. UI. webcontrols
Imports system. Data. sqlclient
Imports system. Data

Public class highlightdatagrid: inherits page

Protected dtgcustomers as DataGrid

Sub page_load (sender as object, e as system. eventargs)
Bindthegrid ()
End sub

Sub bindthegrid ()
Dim sqlconn as new sqlconnection (_
"Server = localhost; database = northwind; uid = sa; Pwd = secret ")
Dim dtacustomers as new sqldataadapter (_
"Select customerid, companyName, contactname, phone "_
& "From MERs", sqlconn)
Dim dscustomers as Dataset

Try
Dscustomers = new dataset ()
Dtacustomers. Fill (dscustomers)
Dtgcustomers. datasource = dscustomers
Dtgcustomers. databind ()
Catch sqlex as sqlexception
Response. Write (sqlex. Message. tostring ())
Catch ex as exception
Response. Write (ex. Message. tostring ())
Finally
Sqlconn. Close ()
End try
End sub

The Code immediately below is where all the work gets done to implement the highlighting. the line within the first if block simply adds the onmouseover attribute to the item changing the background color no matter whether we are in an itemtemplate or an alternatingitemtemplate. in the if-then-else block we are checking to see if we are in an itemtemplate or an alternatingitemtemplate and using the onmouseout attribute to set the background color of the row back to its original setting.

Sub dtgcustomers_itemdatabound (sender as object, e as datagriditemeventargs)
If E. Item. itemtype = listitemtype. item or E. Item. itemtype = listitemtype. alternatingitem then
E. Item. Attributes. Add ("onmouseover", "This. style. backgroundcolor = 'sil '")
End if
If E. Item. itemtype = listitemtype. Item then
E. Item. Attributes. Add ("onmouseout", "This. style. backgroundcolor = 'white '")
Else
E. Item. Attributes. Add ("onmouseout", "This. style. backgroundcolor = 'yellow '")
End if
End sub

Sub dtgcustomers_pageindexchanged (sender as object, e as datagridpagechangedeventargs)
Dtgcustomers. currentpageindex = E. newpageindex
Bindthegrid ()
End sub
End Class

You may run the program by clicking here.
You may download the code by clicking here.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More