Data Source (Telerik) ให้อยู่ในรูปแบบ UI แบบอื่น ที่ไม่ใช่ Grid Kendo UI(MVVM)

https://demos.telerik.com/kendo-ui/grid/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

UI Element (HTML)

• สร้าง Template (UI Element) Kendo MVVM Template

หลังจากที่ออกแบบ UI Element ด้านบน ผมจะนำ UI นั้นมาแปลงให้เป็น Template เพราะผมต้องการให้ HTML render UI แบบนี้ ซ้ำ ๆ ตามข้อมูลที่ได้จาก Data Source

Template UI (Kendo MVVM)

• สร้าง Data Source

ในส่วนนี้จะเขียนใน JavaScript script ซึ่งก็จะมีรูปแบบประมาณนี้

Data Source

• ทำการ Bind Data Source และ UI

หลังจากที่ได้ UI และ Data Source ขั้นตอนนี้จะเป็นการ Bind

CSS,HTML,JavaScript

UI List with Data Source

ดูตัวอย่างได้จากลิงค์นี้ได้เลยครับ Demo Link

หลังจากทำเสร็จ แล้วถ้าสมมุติว่าข้อมูลมีมาก ๆ อาจทำให้ Browser ค้าง แน่นอนว่าจะต้องมี pager ในการกำหนดการแสดงผลของข้อมูล เราจะมาต่อกันในบทความหน้า วิธีการสร้าง pager ให้กับ UI ของเรา สุดท้ายนี้หวังว่า บทความนี้จะเป็นประโยชน์ไม่มากก็น้อยให้กับผู้ที่เข้ามาอ่าน แล้วเจอกันบทความหน้าครับ ถ้าอยากให้กำลังใจก็กดตบมือให้ผมด้วยนะครับ

สำหรับมือใหม่ถ้ายังไม่เข้าใจ เข้าตามลิงค์นี้ได้เลยครับ

ตอนที่ 1 ความแตกต่างระหว่าง MVVM และ jQuery ในการเรียกใช้ Kendo UI (Telerik)