DomainDataSource DataPager with silverlight 4 DataGrid & WCF RIA Services


การโหลดข้อมูลขนาดใหญ่ บางครั้งอาจไม่ประสบความสำเร็จเสมอไป เช่นหมดเวลาสักก่อน (Time out) หรือผู้ใช้งานรอนานเกินไป ก็ไม่เกิดผลดี กับความรู้สึกต่อการใช้งานระบบ ทำให้บางครั้งระบบดีดีอาจกลายเป็นระบบที่ห่วยๆได้ ฉะนั้นเพื่อให้ผู้ใช้งานเกิดความรู้สึกดีดี และมีความสุขในการใช้งานระบบ การโหลดข้อมูลขนาดใหญ่ เราไม่จำเป็นต้องโหลดทั้งหมด แต่เราจะโหลดเฉพาะข้อมูลที่พอเพียงเพื่อแสดงบนหน้าเดียว โดยการกำหนด PageSize ให้คอนโทรล DomainDataSource ขณะเดียวกัน เรายังอนุญาตให้ผู้ใช้งานสามารถโหลดข้อมูลในหน้าอื่นๆ ที่เหลือได้โดยใช้คอนโทรล DataPager และในบทความนี้ ผู้เขียนนำเสนอตัวอย่างการใช้งาน DomainDataSource และ DataPager โดยนำตัวอย่างโปรเจ็กต์จากบทความ BusyIndicator Element Binding มาทำการออกแบบเพิ่มเติม ดังนี้

 

1. ทำการเพิ่มคอนโทรล DataPager เพิ่มเติมดังรูป

1 

2. ทำการปรับ Layout ใหม่โดยคลิกขวาบนคอนโทรล DataPager => Reset Layout=>All

2

3.คอนโทรล DataPager จะปรับตัวเองให้พอดีกับสิ่งแวดล้อมที่เป็นอยู่

3

4. ทำการผูกข้อมูล DomainDataSource ให้กับคอนโทรล DataPager ทำได้ง่ายๆ เพียงคลิก – ลาก – วาง โดยคลิกลาก DomainDataSource ที่ชื่อ Products ไปวางบนคอนโทรล DataPager

4

5. กำหนด PageSize ให้คอนโทรล DomainDataSource โดยกำหนดผ่าน พรอเพอร์ตี้ของคอนโทรล DataPager โดยกำหนด PageSize = 10 ให้มันโหลดข้อมูลทีละ 10 row

5

6. เมื่อกำหนดพรอเพอร์ตี้เป็นที่เรียบร้อยแล้ว ลองทดสอบรันดูครับ ผลปรากฏว่าเมื่อเรากด Next เพื่อไปหน้าต่อไป มันกลับเกิดข้อผิดพลาดขึ้น เนื่องจากว่าเรายังไม่กำหนด ให้เรียงข้อมูลก่อนตอนโหลดนั่นเอง

6

7. เราต้องกำหนดให้ DomainDataSource ที่ชื่อ productsDomainDataSource เรียงข้อมูลก่อน โดยเข้าไปในหน้าโค้ด xaml คลิกเลือกคอนโทรล productsDomainDataSource => ไปที่ Properties > SortDescriptors=> คลิก Edit items in this collection

7

8. เราจะได้หน้า Collection Editor: SortDescriptors => Select item: ให้เลือก SortDescriptor => Add ในช่อง Properties: Direction ให้เลือก Ascending และ PropertyPath ให้ระบุฟิลด์ที่เราต้องการเรียง ในที่นี้ผู้เขียนใช้ฟิลด์ ProductID จากนั้นคลิก OK

8

9. เมื่อกำหนดการเรียงข้อมูลเรียบร้อยแล้ว ลองทดสอบรันแอปฯ ใหม่ จากนั้นทดสอบกด Next เพื่อไปในหน้าอื่นๆ คอนโทรลสามารถทำงานได้แล้ว และที่สำคัญทั้งหมดนี้ไม่ได้เกิดจากการเขียนโค้ดแต่ประการใด แต่เกิดจากการกำหนดพรอเพอร์ง่ายๆ เพียงเท่านั้น

10 

 

การใช้งานคอนโทรล DataPager มาช่วยในการแบ่งจำนวนข้อมูลข้อมูลในการโหลด แสดงบนหน้าจอ ช่วยให้แอปพลิเคชัน ไม่จำเป็นต้องรอโหลดข้อมูลจำนวนมาก ทำให้ผู้ใช้งานต้องรอนานเกินไป ช่วยให้ความรู้สึกของผู้ใช้งาน รู้สึกดี และมีควาสุขต่อการใช้งานระบบ และที่สำคัญระบบห่วยๆ อาจกลายเป็นระบบ ดีดีได้

 

แหล่งข้อมูลดาวน์โหลด
http://cid-7d608959d854cb28.skydrive.live.com/embedicon.aspx/SourcesCode/01-12-2010_Drag-DropDataBindingToSilverlight4_DataPagerDDSource.zip

 

แหล่งข้อมูลอ้างอิง

ผู้เขียน:
nano_mvp_2009_1

เกี่ยวกับ

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

เขียนใน Silverlight

ใส่ความเห็น

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: