การเปลี่ยนสี backcolor เมื่อเอาเม้าส์ผ่านใน Gridview


<head runat="server">

<title>Untitled Page</title>

<style type="text/css">

TD.bgstyle { BORDER-TOP: #215dc6 2px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#C7D4F7, EndColorStr=#FFFFFF); COLOR: #215dc6; BORDER-BOTTOM: #215dc6 2px solid; BACKGROUND-COLOR: #e6e6e6 }

TD.bgstyleleft { BORDER-TOP: #215dc6 2px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#C7D4F7, EndColorStr=#FFFFFF); BORDER-LEFT: #215dc6 2px solid; COLOR: #215dc6; BORDER-BOTTOM: #215dc6 2px solid; BACKGROUND-COLOR: #e6e6e6 }

TD.bgstyleright { BORDER-RIGHT: #215dc6 2px solid; BORDER-TOP: #215dc6 2px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#C7D4F7, EndColorStr=#FFFFFF); COLOR: #215dc6; BORDER-BOTTOM: #215dc6 2px solid; BACKGROUND-COLOR: #e6e6e6 }

</style>

<script language="JavaScript">

<!–

function changein(object)

{

    object.cells[0].className="bgstyleleft";

    count = object.cells.length;

    for(i = 1;i <= count-1;i++)

    {

        object.cells[i].className="bgstyle";

    }

    object.cells[count-1].className="bgstyleright";

}

function changeout(object)

{

    object.cells[0].className="";

    count = object.cells.length;

    for(i = 1;i <= count-1;i++)

    {

        object.cells[i].className="";

    }

    object.cells[count-1].className="";

}

//–>

</script>

</head>

# Code

Protected Sub Gridview1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridviewRowEventArgs) Handles Gridview1.RowDataBound

    If (e.Row.RowType = DataControlRowType.DataRow) Then

        e.Row.Attributes.Add("onmouseover", "changein(this)")

        e.Row.Attributes.Add("onmouseout", "changeout(this)")

    End If

End Sub

 

Web App #2

protected void Gridview1_RowCreated( object sender , GridviewRowEventArgs e ) {

    if( e.Row.RowType == DataControlRowType.DataRow ) {

        e.Row.Attributes.Add( "onmouseover" , "this.style.backgroundColor=’#CCCCCC’;" );

        e.Row.Attributes.Add( "onmouseout" , "this.style.backgroundColor=’#FFFFFF’;" );

    }

}

Web App #3 กรณีมี Control เช่น LinkButton

protected void Gridview1_RowCreated( object sender , GridviewRowEventArgs e )

{

if( e.Row.RowType == DataControlRowType.DataRow )

{

            LinkButton l1 = (LinkButton)e.Row.FindControl("LinkButton1");  // หา LinkButton ที่อยู่ใน Itemtemplate
            l1.Attributes.Add("onmouseover", "window.status=”;this.style.color=’OrangeRed’; return true"); //mouse view ๆ
            l1.Attributes.Add("onmouseout", "window.status=”;this.style.color=’Gray’; return true"); //mouse out

                e.Row.Attributes.Add("onmouseover", "style.backgroundColor=’#FFFFC0’");  //mouse view ๆ
if (e.Row.RowIndex % 2 == 0)
            {
                e.Row.Attributes.Add("onmouseout","style.backgroundColor=’#F7F6F3’");   // หาสีที่ใกล้เคียงเองเนอะ….
            }
else
            {               
                e.Row.Attributes.Add("onmouseout", "style.backgroundColor=’White’");
            }

}

}

อ่านเพิ่มเติมได้ที่ greatfriends.biz:=> Gridview ให้สีเลื่อนตาม Row ที่เอาเมาส์ไปชี้(เว็บครับ)

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Web Application

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: