Data Source (Telerik) ให้อยู่ในรูปแบบ UI แบบอื่น ที่ไม่ใช่ Grid Kendo UI(MVVM)
จากตัวอย่างของ Telerik (Kendo) นั้น Data Source มักจะถูกใช้กับ UI Grid เท่านั้น ซึ่งบ้างครั้ง UI Grid อาจไม่ตอบโจทย์ใน Design และ Layout จนบ้างครั้งเราอาจล้มเลิก Design ที่ออกแบบไว้แล้วนำ Grid เข้ามาใช้เพื่อเราสามารถดำเนินงานต่อไปได้ แต่ ๆ วันนี้ผมจะมาแนะนำวิธีการนำ Data Source ไปใช้ร่วมกับ Design ที่เราออกแบบไว้ครับ
สร้าง MVVM ตาม pattern (ลิงค์นี้) ก่อน
ออกแบบ UI Element (Html)
สร้าง Template (UI Element) Kendo MVVM Template
สร้าง Data Source
ทำการ Bind Data Source และ UI
- ออกแบบ UI Element
ผมจะทำเป็น Card UI ในการโชว์ข้อมูลต่าง ๆ ที่ได้จาก Data Source
- สร้าง Template (UI Element) Kendo MVVM Template
หลังจากที่ออกแบบ UI Element ด้านบน ผมจะนำ UI นั้นมาแปลงให้เป็น Template เพราะผมต้องการให้ HTML render UI แบบนี้ ซ้ำ ๆ ตามข้อมูลที่ได้จาก Data Source
- สร้าง Data Source
ในส่วนนี้จะเขียนใน JavaScript script ซึ่งก็จะมีรูปแบบประมาณนี้
- ทำการ Bind Data Source และ UI
หลังจากที่ได้ UI และ Data Source ขั้นตอนนี้จะเป็นการ Bind
ดูตัวอย่างได้จากลิงค์นี้ได้เลยครับ Demo Link
หลังจากทำเสร็จ แล้วถ้าสมมุติว่าข้อมูลมีมาก ๆ อาจทำให้ Browser ค้าง แน่นอนว่าจะต้องมี pager ในการกำหนดการแสดงผลของข้อมูล เราจะมาต่อกันในบทความหน้า วิธีการสร้าง pager ให้กับ UI ของเรา สุดท้ายนี้หวังว่า บทความนี้จะเป็นประโยชน์ไม่มากก็น้อยให้กับผู้ที่เข้ามาอ่าน แล้วเจอกันบทความหน้าครับ ถ้าอยากให้กำลังใจก็กดตบมือให้ผมด้วยนะครับ
สำหรับมือใหม่ถ้ายังไม่เข้าใจ เข้าตามลิงค์นี้ได้เลยครับ
ตอนที่ 1 ความแตกต่างระหว่าง MVVM และ jQuery ในการเรียกใช้ Kendo UI (Telerik)