[
https://issues.apache.org/jira/browse/FLEX-35197?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Devsena updated FLEX-35197:
---------------------------
Attachment: distortedui.png
DataGridPOC.zip
> [FlexJS] Data-binding is broken or not implemented in DataGrid component
> ------------------------------------------------------------------------
>
> Key: FLEX-35197
> URL: https://issues.apache.org/jira/browse/FLEX-35197
> Project: Apache Flex
> Issue Type: Question
> Affects Versions: Apache FlexJS 0.8.0
> Reporter: Devsena
> Assignee: Peter Ent
> Priority: Critical
> Attachments: DataGridPOC.zip, distortedui.png, src.zip
>
>
> (I've took the _DataGrid_ example that supplied within the nightly build of
> 0.8.0 FlexJS SDK bundle, and I tried all my tests in that project only)
> h3.Requirement
> Binding is a strong feature in Flex technology. As an user I also do expect
> that FlexJS will also empowers us with the same strength developing projects.
> While testing _DataGrid_ example that supplies within SDK bundle, I noticed
> that pay-as-you-go view only available but no actual run-time data binding
> (as far I tested); which is the strength that I was talking about. Is
> run-time data-binding (by any _beads_ or any other way) to DataGrid component
> is at all available yet?
> In the following tests I tried to update one row object's (_Product_) one
> particular field (_image_) value, to see it's change in row renderer, at
> run-time.
> I also tried to add or delete an item to it's _dataProvider_ collection to
> see their changes in DataGrid UI.
> h3.Actual Result
> Run-time data update to collection list not affecting to DataGrid UI.
> h3.How I Tested
> I've attached the source ZIP that supplied within SDK bundle and I modified
> few codes to test my requirement.
> The example consists of a DataGrid, and few buttons as follows:
> - Replace Array - replace the entire model with a new Array
> - Update Entry - Update the image for the first entry
> - Add Entry - Add a new entry to the end of the list
> - Remove Entry - Remove the first entry
> - Refresh - this recreates the array and saves it to the model. This forces
> the DataGrid to update by the same method as Replace Array
> "Replace Array" and "Refresh" worked fine. "Refresh" is a possible workaround
> for data update to grid UI, but it is inefficient for a real application. The
> other buttons did not cause DataGrid UI to update. The places which I've
> changed as follows.
> *Product.as*
> {code}
> // since I was trying to update one field at least to DataGrid UI, I added
> get/set methods to the _image_ field
> private var _image:String;
> [Bindable(event="imageChanged")]
> public function get image():String
> {
> return _image;
> }
>
> public function set image(value:String):void
> {
> if (value != _image)
> {
> _image = value;
> dispatchEvent(new Event("imageChanged"));
> }
> }
> {code}
> *MyInitialView.mxml*
> {code}
> // Replacing or recreating the collection list
> private function replaceArray():void
> {
> // Only this part worked when SimpleBinding used rather than
> ConstantBinding
> ProductsModel(applicationModel).productList = new ArrayList([new
> Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg")]);
>
> writeStatus();
> }
> // Update an entry to the collection
> private function updateEntry():void
> {
> // This part not working or updating to DataGrid UI either
> /*ProductsModel(applicationModel).productList.source[1] = tmp;
> ProductsModel(applicationModel).dispatchEvent(new
> Event("propertyChange"));*/
> // This part not working or updating to DataGrid UI
> var tmp:Product =
> ProductsModel(applicationModel).productList.getItemAt(0) as Product;
> tmp.image = "Modified Text";
>
> writeStatus();
> }
> // Adding an item to the collection list
> private function addEntry():void
> {
> // Add a new entry to the list
> idCounter++;
> ProductsModel(applicationModel).productList.addItem(new
> Product("product" + idCounter, "Added" + idCounter, 35, 190,
> "assets/smallorangerect.jpg"));
>
> writeStatus();
> }
> // Removing an item from the collection list
> private function removeEntry():void
> {
> // remove the first item
> ProductsModel(applicationModel).productList.removeItemAt(0);
>
> writeStatus();
> }
> // Refreshing the collection to datagrid
> private function refresh():void
> {
> // force an update setting the model to the same value it already has.
> See replaceArray()
>
> // this was insufficient to trigger the update:
> // ProductsModel(applicationModel).productList =
> ProductsModel(applicationModel).productList;
>
> // Since there was NO refresh logic to ArrayList or DataGrid component,
> we only do a brute refresh to the list
> var oldArray:ArrayList = ProductsModel(applicationModel).productList;
> var newArray:ArrayList = new ArrayList();
> var index:int;
> for (index = 0; index < oldArray.length; index++) {
> newArray.addItem(oldArray.getItemAt(index));
> }
>
> ProductsModel(applicationModel).productList = newArray;
> writeStatus();
> }
> ...
> // DataGrid ConstantBinding bead replaced with SimpleBinding
> <js:DataGrid id="dataGrid" x="20" y="30" width="400" height="300"
> change="dataGridChange()" rowHeight="30">
> <js:beads>
> <js:SimpleBinding sourceID="applicationModel"
>
> sourcePropertyName="productList" destinationPropertyName="dataProvider"
> eventName="propertyChange"/>
> ...
> {code}
> I also created a new MXML based _DataItemRenderer_ component to see if
> binding is working anyway: *ProductItemRendererMXML.mxml*; But it didn't
> worked either.
> I discussed this at dev mailing-list
> (http://apache-flex-development.2333347.n4.nabble.com/Why-same-files-exists-in-multiple-places-td56983.html)
> where Alex suggested that a chain of specific beads usage may help this
> feature, but he wasn't sure if such beads already developed or not.
> Is there any such beads or procedure already available, or, in-development?
--
This message was sent by Atlassian JIRA
(v6.3.4#6332)
