<ASP.Net>เปลี่ยน Pager Style ให้กับ Gridview

คิดว่าหลายๆคนที่เขียน ASP.Net คงเคยใช้ Gridview และกำหนดให้ทำ Paging คือแสดงผลแบบแบ่งหน้า เช่น หน้าละ 15 แถว เป็นต้น ทีนี้ใน Gridview เราสามาถทำการ Navigate Page คือเลื่อนหน้าได้ โดยใช้ตัวเลขหน้า ซึ่งพอ ASP.Net ทำการ Render เป็น HTML แล้ว ตัว Paging เหล่านี้จะกลายเป็น 8 ยกเว้นตัวเลข page ปัจจุบันจะเป็น 1

ซึ่งหน้าตาของมัน จะดูยากมากว่าขณะนี้เราอยู่ที่ page ไหน ลองดูภาพครับ



ซึ่งเราจะรู้ว่าอยู่ page ไหนก็ต้องเอาเมาส์ไปชี้ ถ้ามันไม่ใช่ Link ก็จะไม่มีเส้นขีดล่างขึ้น แต่เกิดเราใช้ Style Sheet เปลี่ยนให้ Link ไม่ต้องมี ขีดเส้นใต้ นะ (คือไปกำหนด text-decoration ของ A เป็น none) คราวนี้จบเลยครับ ต้องจำเอาอย่างเดียว

ซึ่งผมก็โดน user บ่นมา พอดีไปเล่นที่ greatfriends.biz เห็นว่าจะมี highlight บอกหน้าปัจจุบัน น่าสนใจดีครับ ลองดูรูปนะ



ก็ปิ๊งขึ้นมา ทำบ้างดีกว่า ผมก็สร้าง Style Sheet ขึ้นมาก่อน เก็บไว้ที่ .css file

.btn
{
border-right: chocolate 1px outset;
border-top: chocolate 1px outset;
font-weight: bold;
font-size: 10pt;
border-left: chocolate 1px outset;
color: #d2691e;
border-bottom: chocolate 1px outset;
font-family: Verdana, Tahoma, Arial;
background-color: #ffffff;
text-align:center;
cursor: hand;
}

ทีนี้เราจะมาเขียนโค้ดเพื่อเปลี่ยน style ของ เลขที่ page ปัจจุบันกัน เรามาเขียนที่ GridView1.RowCreated Event ครับ โค้ดดังนี้



โค้ดนี้หมายความว่า เมื่อมีการ Create Row ของ Gridview จนถึง Pager ก็เริ่มเข้ามาทำงานใน IF Then แรกครับ โดยใน pager นี้ทาง ASP.Net จะทำการสร้าง Table โดยใน table จะแบ่งเป็นหลายๆคอลัมภ์ ซึ่งแต่ละ Column จะมี WebControl 1 ตัวเพื่อแสดงเลขหน้า
ดังนั้นเราทำการวนลูป เพื่อหาว่า WebControl ตัวไหนใน Table นี้เป็น Label ซึ่งเมื่อเจอแล้วเราก็ไปกำหนด Style ของ Label ให้เป็นตัวที่เราต้องการ

ลองดูผลลัพท์ครับ


โอเค เรียบร้อยครับ user พอใจ ไม่โดนด่าแล้วเรา

Create Date : 28 กันยายน 2550		3 comments
Last Update : 4 ตุลาคม 2550 18:07:56 น.
Counter : 3143 Pageviews.
Share Tweet