August 19, 2008

DataGrid.selectedItem לא חבר של sort.

מה קורה?
בלי להאריך יותר מדי, קבלו באג שיכול היה להסיר שיערות מהחזה של אריק זאבי:
יש לכם DataGrid ואתם רוצים שתמיד האיבר הנבחר בו יהיה מסונכרן עם זה שנמצא לכם ב data model, כל שיהיה. בשביל זה אנחנו נשתמש ב Binding, נכון? ודאי. אבל למה אנחנו נחווט אותו? נחווט אותו למאפיין החבוי של ListBase (מאבותיו של DataGrid), הידוע בכיניו SelectedItem. זה נכון ש DataGrid לא נותן לנו אותו אפילו ב code hinting, אבל שועלי קרבות שכמותנו, לא נחפור ונגלה אותו? הרי זה די מתבקש, שיהיה מאפיין שאפשר להגדיר דרכו מי האיבר הנבחר תמיד, לא?
לפלקס יש הסיבות שלו ואני לא תמיד מבין אותן אבל בהחלט מכבד :).
הבעיה מרימה את קודקודה המעוות כאשר אנחנו משתמשים גם ב sort על אותו DataGrid אומלל. שכן אם נחפור עוד יותר בקוד של ListBase נגלה ש SelectedItem לא ממש אוהב לשחק דוקים כשיש sort על ה DataProvider של ה DataGrid. התוצאה היא מחזה מרהיב: בוחרים איבר, ה SelectedIndex נבחר אף הוא (שמתם לב? Index, לא Item), אבל כאשר עושים sort ה selectedItem משתנה אבל ה selectedIndex נשאר כשהיה. מה זה אומר? שבעצם לא השתנתה הבחירה למרות מה שאנחנו רואים... יש יאמרו פאטה-מורגנה, יש יקללו. ואם לא השתנתה הבחירה, אז כל המנגנון שווה לתחת, אם לנסח בעדינות.
אז מה עושים? דבר ראשון, שלא תעיזו להשתמש ב selectedItem כאשר מדובר ב DataGrid. זה לא נכון, זה לא נתמך ואתם תשלמו על זה, האמינו לי.
דבר שני, כל מניפולציה על DataGrid selection צריכה להתבצע דרך ה selectedIndex שלו. איך עושים את זה בדוגמה שהבאתי? הנה דוגמית קטנה....
טוב, רציתי להדביק פה קוד בצורה נורמאלית, אבל בלוגר לא ממש מפרגן - אני אמצא דרך ואחזור אליכם...
מצאתי :), בבקשה:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initMain();">
<mx:Script>
<![CDATA[
import mx.events.CollectionEvent;
import mx.collections.Sort;
import mx.collections.SortField;
import mx.collections.ArrayCollection;

private var _aItems:ArrayCollection;

[Bindable]
private var selectedItem:Object;

private function initMain():void {
//create data for test
aItems = new ArrayCollection();

for (var i:uint = 1;i <= 10;i++) {
var obj:Object = {sort1:i,sort2:i*-1};
aItems.addItem(obj);
}
selectedItem = aItems.getItemAt(2);
}

private function set aItems(value:ArrayCollection):void {
_aItems = value;
setSelectedItem();
}

[Bindable]
private function get aItems():ArrayCollection {
return _aItems;
}

private function setSelectedItem():void {
if (aItems != null && selectedItem != null) {
for (var i:int = 0; i < this.aItems.length; i++) {
if (aItems.getItemAt(i).sort1 == selectedItem.sort1) {
dgItems.selectedIndex = i;
break;
}
}
}

}

private function refresh():void {
var newDP:ArrayCollection = new ArrayCollection(aItems.source);
newDP.sort = aItems.sort;
newDP.refresh();
aItems = newDP;
}
]]>
</mx:Script>

<mx:DataGrid
id="dgItems"
width="75%"
height="75%"
dataProvider="{aItems}"
updateComplete="setSelectedItem()"
change="selectedItem = dgItems.selectedItem">
<mx:columns>
<mx:DataGridColumn headerText="Sort 1" dataField="sort1"/>
<mx:DataGridColumn headerText="Sort 2" dataField="sort2"/>
</mx:columns>
</mx:DataGrid>

<mx:HBox width="75%">
<mx:Button label="Refresh" click="refresh();"/>
<mx:TextArea
id="output"
text="{dgItems.selectedIndex}"/>
</mx:HBox>

</mx:Application>

No comments: