Basically, I need a way to programmatically update the sort arrow column and direction on a Spark datagrid.
Seems like every method I use to programmatically sort the datagrid has NO effect on the sort arrow IF the sort arrow appeared as a result of a user clicking the datagrid header. I need the equivalent of this: http://blog.flexexamples.com/2008/02/28/displaying-the-sort-arrow-in-a-flex-datagrid-control-without-having-to-click-a-column/ but for a Spark datagrid. I tweaked Peter's code in the link above to compile using a Spark datagrid. I've attachd this code below. If you run it, you'll notice that the sort arrow is NOT drawn for a Spark datagrid (but it is drawn for a mx datagrid according to the link above). Anyone know how to programmatically draw a sort arrow on a Spark datagrid? I tried swapping skinClasses dynamically using setStyle, where one skin had the sort arrow and the other didn't, but I never was able to get the skin to update dynamically (the skin used on creationComplete could not be replaced dynamically). Don't other people see the same issue with sort arrows that I'm seeing? That is, a user sorts a Spark datagrid, which places a sort arrow in that selected column... then sometime later the dataProvider updates (with auto-sort on first column by default), but the manual sort arrow remains on its original column (e.g. after the datagrid refreshes), so the sort arrow is now out-of-synch with the actual sorted column in the datagrid. How do people address this scenario? ---tweaked code below using Spark datagrid instead of mx datagrid, from Peter's blog link above---- <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <s:ArrayCollection id="arrColl"> <s:source> <fx:Array> <fx:Object idx="1" c1="One.1" c2="One.2" /> <fx:Object idx="2" c1="Two.1" c2="Two.2" /> <fx:Object idx="3" c1="Three.1" c2="Three.2" /> <fx:Object idx="4" c1="Four.1" c2="Four.2" /> <fx:Object idx="5" c1="Five.1" c2="Five.2" /> <fx:Object idx="6" c1="Six.1" c2="Six.2" /> <fx:Object idx="7" c1="Seven.1" c2="Seven.2" /> <fx:Object idx="8" c1="Eight.1" c2="Eight.2" /> <fx:Object idx="9" c1="Nine.1" c2="Nine.2" /> <fx:Object idx="10" c1="Ten.1" c2="Ten.2" /> <fx:Object idx="11" c1="Eleven.1" c2="Eleven.2" /> <fx:Object idx="12" c1="Twelve.1" c2="Twelve.2" /> <fx:Object idx="13" c1="Thirteen.1" c2="Thirteen.2" /> </fx:Array> </s:source> </s:ArrayCollection> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.Sort; import mx.collections.SortField; private function init():void { arrColl.sort = new Sort(); arrColl.sort.fields = [new SortField("c1", false, true)]; arrColl.refresh(); } ]]> </fx:Script> <s:DataGrid id="dataGrid" dataProvider="{arrColl}" creationComplete="init();"> <s:columns> <s:ArrayList> <s:GridColumn dataField="idx" /> <s:GridColumn dataField="c1" /> <s:GridColumn dataField="c2" /> </s:ArrayList> </s:columns> </s:DataGrid> </s:Application> ----- Original Message ----- From: [email protected] To: [email protected] Sent: Tuesday, April 30, 2013 6:24:48 PM Subject: programmatic sort for Spark datagrid, accounting for sort triangle state Hi All, I created a two-column Spark datagrid (SDK4.5.1), with sortable columns. The user is free to change the data that appears in this datagrid by selecting various drop-down lists. The problem I'm experiencing is that if the user first sorts the datagrid, then selects an option to change the dataProvider for the grid, the appearance of the sort triangle in the datagrid header does not update when the data inside the datagrid updates. The sort triangle never synchronizes with the current sort state of the datagrid, but rather, reflects the previous sort state, until a new sort is performed manually. All the ways I've tried to do programmatic sorts, while sorting the datagrid correctly, have no effect on that little sort triangle in the header. What's the secret to programmatically sort a Spark datagrid, and have the sort triangle update as well? I've tried doing: myDataProvider.sort = null; myDataProvider.refresh(); myGridComponent.grid.invalidateDisplayList(); and also: var columnIndexes:Vector.<int> = Vector.<int>([0]); // select first column to sort myGridComponent.grid.sortByColumns(columnIndexes, true); and some other ideas, but no luck so far. Hoping this is relatively simple, as it's been driving me nuts this last week. Thanks in advance for any comments.
