קה פרובלמה מואי צ'יקיטה?
כמו שאמרו קודם לכן, יש אירועים ב-GridView שמאפשרים לתפוס את יצירת השורה החדשה (היות ואין חשיבות למידע ניתן להשתמש באירוע ה-RowCreated ולא בהכרח באירוע RowDataBound שנותן גישה למידע). הכוונה כאן היא שכל פעם שיש שורה חדשה שנוצרת האירוע הזה עולה ודרך e.Row ניתן לקבל את השורה הספציפית המדוברת.
// in myWebForm.aspx <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" onrow OnRowCreated="GridView1_RowCreated"> </asp:GridView> // in myWebForm.aspx.cs protected void Page_Load(object sender, EventArgs e) { GridView1.DataSource = new string[] {"hello", "world"}; // or a DataTable or whatever GridView1.DataBind(); } protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { GridViewRow OhHelloThereIAmTheCurrentlyCreatedRow = e.Row; } protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { GridViewRow OhHelloThereIAmTheCurrentlyDataBoundedRow = e.Row; }
כל כזאת שורה של GridViewRow מכילה מערך תאים (דרך e.Row.Cells) ואותו מערך תאים חושף אפשרות לשנות את הרינדור בפועל שלו ל-HTML. ספציפית, אם את רוצה להוסיף Attribute (כלומר להוסיף בתגית התגית זוג של מפתח-ערך כמו Onmouseover כמפתח ו-alert כערך) תוכלי לגשת ל-Attributes של כל תא ובאמת להוסיף את הזוג של מפתחות-ערכים האלו.
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { foreach (TableCell curTableCellToAddJavaScriptTo in e.Row.Cells) curTableCellToAddJavaScriptTo.Attributes.Add("onmouseover", "alert('Kaboom!');"); }
בדוגמה הזו עברנו בלולאה על כל התאים בשורה הנוכחית שנוצרה ואמרנו "תוסיף לרנדור צד לקוח מאפיין בשם onmouseover שמבצע עם הערך הזה". בצד לקוח, הדפדפן רואה את זה וידוע לזהות את זה כאירוע ג'אווה סקריפט וכל פעם שנעביר עכבר מעל תא כלשהו נקבל התראה "Kaboom1". עכשיו נרצה למשל להגיד שכל פעם שהעכבר נכנס לתא מסויים בטבלה נרצה לצבוע את התא המסויים הזה בצבע כלשהו.
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { foreach (TableCell curTableCellToAddJavaScriptTo in e.Row.Cells) curTableCellToAddJavaScriptTo.Attributes.Add("onmouseover", "this.style.backgroundColor = 'Pink';"); }
ובאמת, כל פעם שהעכבר יכנס לשורה מסויימת בטבלה היא תצבע בוורוד. נוסיף לזה שאנחנו רוצים שכל פעם שהעכבר יוצא מאותו שורה לצבוע אותה למשל בלבן.
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { foreach (TableCell curTableCellToAddJavaScriptTo in e.Row.Cells) { curTableCellToAddJavaScriptTo.Attributes.Add("onmouseover", "this.style.backgroundColor = 'Pink';"); curTableCellToAddJavaScriptTo.Attributes.Add("onmouseout", "this.style.backgroundColor = 'White';"); } }
בעיה נוספת שקיימת לנו היא שהכותרת נצבעת, ובהתאם נרצה לדאוג שאנחנו צובעים רק שורות שהם לא מיוחדות (הכותרת, תחתית הרשימה וכך הלאה).
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) foreach (TableCell curTableCellToAddJavaScriptTo in e.Row.Cells) { curTableCellToAddJavaScriptTo.Attributes.Add("onmouseover", "this.style.backgroundColor = 'Pink';"); curTableCellToAddJavaScriptTo.Attributes.Add("onmouseout", "this.style.backgroundColor = 'White';"); } }
ה-Enum בשם DataControlRowType מאפשר לנו לבדוק קצת יותר לעומק את השורה הנוכחית שאנחנו עובדים מולה ובאמת לבדוק את האופי היותר ספציפי שלה. למשל גם קיים סוג שורה שהוא "שורת מידע ריקה" שאולי נחליט לא לרנדר אותה. נרחיב את הדיון לעבור על כל השורה ולא כל תא, ובמקום לולאה על כל התאים נוסיף את הסקריפטים האלו לשורה עצמה.
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor = 'Pink';"); e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor = 'White';"); } }
וזהו בגדול על צביעת תאים ושורת ב-GridView. אפשר ורצוי מאוד לפתח את הדוגמה הזו הלאה כדי שתפעל יותר טוב מבחינת HTML. - לכל שורה מתרנדר הסקריפט הזה מחדש וחבל על המקום שזה תופס בדף ה-HTML שלנו. אפשר היה להכניס את הסקריפט הזה לתוך פונקציית ג'אווה סקריפט שמתרנדרת פעם אחת וכל פעם לקרוא לה במקום לכתוב את הסקריפט מחדש. - אפשר היה להחזיר את השורה לצבע המקורי שלה (עם שמירה של משתנה גלובלי ברמת הדף אצל הלקוח על הצבע האחרון של השורה ששונתה) ולא לצבע שקבוע Hard-coded. - אפשר להכניס את האפשרויות CSS שאנחנו מכוונים לתוך מחלקת CSS ספציפית שגם היא תתרנדר רק פעם אחת ולקבוע את שם המחלקה (className בצד לקוח, CssClass בצד שרת) של ה-CSS אליו שייכת השורה. - אפשר להכניס את כל ההיגיון הזה לתוך GridView שהיא רק קובץ מחלקה ולא בדף ספציפי וככה להשתמש ביכולת הזו מחדש בכל פעם בלי להעתיק קוד ברחבי האפליקציה.
