/I reported this requirement to Apache JIRA (https://issues.apache.org/jira/browse/FLEX-35197) sometime back and also discussed here in mailing-list (apache-flex-flexjs-0.8.0-bin\frameworks\js\FlexJS\libs)./
I spent sometime to make the DataGrid component updates at runtime based on it's collection change, which was missing in present FlexJS due to it's PAYG nature; But as a Flex developer I feel it's quite an important feature to update the DataGrid component at runtime upon collection change. I worked on this by looking not to hurt it's present PAYG manner but a feature available that can be added per requirement. I've added the full source of the POC project (demonstrating this implementation) and modified/compiled SWCs that can be use in FlexJS SDK, at https://issues.apache.org/jira/browse/FLEX-35197. (Note: the changes done with latest FlexJS 0.8.0 nightly build) I've also included my new and changed source to the JIRA issue, for review. Following is some details to the changes to the source. *PNDataProviderChangeNotifier:* I extended DataProviderChangeNotifier with custom event listening to dataProvider/ArrayList class as the existing "itemAdded", "itemRemoved" and "itemUpdated" event wasn't sufficient for this of our needs. The newer event listening is based on HTML/flex/org/apache/flex/events/ItemAddedEvent.as class which also has an item field that meets our requirement. This is the very initiation point to make the DataGrid works per it's collection change at runtime - if the bead not added the DataGrid continue to work as PAYG. *PNArrayList:* We found that existing ArrayList class wasn't sufficient for our needs; It do tells when an item being updated or added or removed by it's "itemUpdated", "itemAdded" or "itemRemoved" respectively, but it has no way to tell which item being updated or added or removed. PNArrayList extended by ArrayList class, dispatches that piece of information which is critical for our needs to update particular indexed item in DataGrid without re-creating whole list components it has every time. The events are listened by PNDataProviderChangeNotifier which eventually informs the DataItemRendererFactoryForArrayListData with specific information to update/delete/add an item. *DataItemRendererFactoryForArrayListData:* For some unknown reason I couldn't able to extend this class. Even there were no errors and SWF also ran pretty fine if I extend it, HTML output always found distorted. I do not know why, maybe there are other classes which directly referring DataItemRendererFactoryForArrayListData instead of PNDataItemRendererFactoryForArrayListData class. I found the following distortion when ran as HTML in browser: <http://apache-flex-development.2333347.n4.nabble.com/file/n57626/distortedui.png> Thus, I choose to modify the original DataItemRendererFactoryForArrayListData class only and adds my piece of codes; suggestions are welcome to make it a custom class resolving the UI issue in HTML output. The DataItemRendererFactoryForArrayListData class is now listens to the events that fired by PNDataProviderChangeNotifier and therefore reacts to update or add or remove any particular row in it's DataGroup with custom functions. (In original FlexJS design, DataItemRendererFactoryForArrayListData only listens to "itemAdded", "itemRemoved" and "itemUpdated" events and re-creates all the list components it has which we found maybe costly in HTML run) *PNDataGroup:* Extended by DataGroup class. I require to extend it because the class didn't had any addItemAt method in original source. Directly calling addItemAt method (without overriding it in DataGroup) we found some UI problems; thus we choose to extend the class and add our own addItemAt method. *PNListSingleSelectionMouseController:* Extended by ListSingleSelectionMouseController. I noticed the original class was setting rollover-index and selected-index property by an static value stored in index property. This was anyway Okay for PAYG, but when a row been removed or added in-between in runtime update scheme, the stored index property to each row property became wrong. Thus I extended the class to update the rollover-index and selected-index property based upon it's data index in the dataProvider collection. Except above classes, ItemAddedEvent.as also added in Core package so PNArrayList class can access it from it's location. With my POC project, I tested following things were working fine with these new implementation, and I confirm recreation of complete list (inside DataGroup or DataItemRendererFactoryForArrayListData never fires when updating, too): <http://apache-flex-development.2333347.n4.nabble.com/file/n57626/testMatrix.png> Any suggestion or review to the code is welcome. -- View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-Probable-design-to-support-runtime-update-to-DataGrid-component-tp57626.html Sent from the Apache Flex Development mailing list archive at Nabble.com.
