DDoS Community

Y~C
Y~C

Posted on

תחילת עבודה עם Kendo ui

זה לא מתיימר להיות פוסט יותר מדי על רמה - פשוט הסבר בסיסי לשימוש בספריית Kendo Ui.
המשימה הראשונה שלי כמפתח FS היתה לבנות מסך הכולל Grid מסובך תוך שימוש ב-Kendo.
מהר מאוד הבנתי שאין ולו חצי מילה בנושא בעברית אז חשבתי לכתוב מילה או שתים משלי כדי לעזור לבאים אחרי.

בפוסט אני אדגים בצורה הכי פשוטה איך משתמשים עם Kendo כדי לבנות גריד (אולי אוסיף עוד קומפוננטה בסוף..).


קודם כל - קצת רקע:
Kendo ui היא ספריית JS המכילה מגוון גדול של קומפוננטות מוכנות כמו: טבלאות, DatePickers, Grid, drop-list וכו'.

הספרייה פותחה על ידי חברה בולגרית (!) בשם Telerik (למי שמכיר - החברה שבבעלותה התוכנה Fiddler).

השימוש הנפוץ ב-Kendo Ui הוא בעיקר ב-JS וכולל תחביר ותשתית של JQuery (יש גם מחלקה נפרדת המשמשת ל-React - לא אעסוק בה).

הסיבה (לדעתי) ש-Kendo לא כזאת מוכרת ופופולארית היא מכיוון שהספרייה לא חינמית, ככה שגופים שמשתמשים בה הם בד"כ גופים ציבוריים וכדו' שפחות אוהבים להסתמך על קוד פתוח.
(במקום בו עבדתי הסבירו לי שעובדים עם Kendo מכיוון ש-"פעם עבדנו עם משהו בקוד פתוח וכשהיו בעיות לא היה לנו למי לפנות.. - לכן אנחנו מעדיפים לשלם..").


טוב, אז פה יש לנו טבלה הכי פשוטה (עם אטריביוט border שכבר יצא לפנסיה ב-HTML5..):

טבלה פשוטה ב-HTML

וכך היא נראית:

Image description

מדהים.

כעת נראה איך Kendo תשפר את המצב:

Image description

תכלס אני פשוט ניגש עם ה-ID של הטבלה ומפעיל עליו את הפונקציה KendoGrid.
(הערה: הפונקציה יכולה לקבל אובייקט עם פרמטרים נוספים - נראה בהמשך).

וזאת התוצאה:
Image description

היה שווה לחכות..!
תכלס - יש לנו טבלה דיי נחמדה, רספונסיבית ומעוצבת.

בוא נראה מה עוד ניתן לעשות.

נעזוב לרגע את העיצוב ונדבר על הנתונים.

ניתן להציג נתונים בקומפוננטות של Kendo או כאשר הם קיימים כבר כאלמנט HTML שרק מקבל את הפונקציונליות של Kendo או שניתן לקחת אלמנט ריק ולהוסיף לו את הנתונים ע"י העברת אובייקט עם המפתח DATA לפונקצית KendoGrid.

אז כאן יש לנו את הדאטה שלנו שהוא מערך של JSON, וכמו שרואים אני מעביר אותו למפתח DataSource:
Image description

במקביל אני מגדיר את הטבלה שלי כך שיהיו בה שלושה עמודות (columns).
כל עמודה מוגדרת ע"י אובייקט שמכיל שדה (field) במבנה הנתונים שמשייך אותו אליו וכותרת להציג בראש העמודה (title).

בנוסף - בשביל הכיף (😁) - הגדרתי גם רוחב לטבלה; 300 (פיקסלים).

Image description

משהו נחמד שניתן לעשות זה להגדיר לכל עמודה טמפלט מסויים שיפעיל עבור כל שורה לוגיקה אותה נגדיר.
במילים פשוטות - אנחנו מעבירים לפונקציה אחרת את הערך של הרובריקה הנוכחית ושם נוכל לבדוק אותה ולהחזיר ערך מתאים (לא צריך להיות מתכנת באינטל כדי להבין):

Image description

תוצאה:

Image description

עד כאן להפעם.

Discussion (0)