Highlighting Rows in an ASP.NET DATAGRID ...
By: John Kilgo Date: January 11, 2003 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 of .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 a .vb code-behind page is used to implement the database activity and handle the ItemDataBound method. First the .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: i Chose to Display Rows from the Northwind Customers Table. Since this Table Contains over 90 Rows, I Also Implement Paging For th E DataGrid. if You Have Used DataGrids At All The rest of the attributes shouth be self evlantory. I Won't spend any more time on the .aspx page.
<% @ Page language = "vb" src = "highlightdatagrid.aspx.vb" inherits = "highlightdataGrid"%>
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 = "# ffc66"> </ 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 = "</p>
<p>Lightyellow "> </ Pagerstyle> </ ask: DataGrid> </ form> </ body> </ html> now for the codebehind file. The massial 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 Should Again Be Self Explanatory.</p>
<p>Imports SystemImports System.Web.UIImports System.Web.UI.WebControlsImports System.Data.SqlClientImports System.DataPublic 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 Customers ", 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</p>
<p>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.ALTERNATIITEG THEN E.Item.Attributes.add ("onmouseover", "this.style.backroundcolor = 'Silver') End if et estil .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 DTGCUS Tomers_pageIndexchanged (Sender As Object, E AS DataGridPageChangeDeventargs) DTGCUSTOMERS.CURRENTPAGEINDEX = E.NewpageIndex Bindthegrid () End Subend Class</p>
<p>You May Run the program by clicking here.you may download the cide by clicking here.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-110065.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="110065" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.044</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'amyNPDOGjjTIbXk3wdEKMihMCnD06ilYhAcKEvQbySJtw2mcBkBUU1a8sUfOuYWlmdAeMQOm5I_2FDQAV9';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
