I haven't got any response so I'm left thinking that it's not possible to programmatically place the sort arrow in a Spark datagrid.
As a workaround, does anyone know how to redraw a Spark datagrid from scratch? The thinking is, when the datagrid is first drawn, there is no sort arrow displayed, even though the first column is sorted by default. How do I get back to this scenario AFTER the datagrid is first drawn? I've tried myGrid.validateNow(), and myGrid.invalidateDisplayList(), and myArrayCollection.refresh(), and so on, but these just update the data in the grid. What I want to do is remove the datagrid from the screen, then redraw it completely back again (hoping the sort arrow won't appear, or if it does, it will be drawn correctly for the data in the grid). Is there something like a "removeFromStage()" and "addToStage()", or "removeAllElements()" and "addAllElements", etc., I could use to accomplish this? Here's some sample code. What can be placed inside function redrawGrid() to redraw the datagrid as it is first drawn (e.g. without displaying the sort arrow until someone clicks a header cell)? <?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="arrCol"> <s:source> <fx:Array> <fx:Object c1="1" c2="a"/> <fx:Object c1="2" c2="b"/> <fx:Object c1="3" c2="c"/> </fx:Array> </s:source> </s:ArrayCollection> </fx:Declarations> <fx:Script> <![CDATA[ /** * Redraw the grid as originally done (e.g. without sort arrow showing). * Any sort on the resulting (redrawn) datagrid is fine, as it can always * be corrected programmatically (unlike the display of the sort arrow). */ private function redrawGrid():void { //myGrid.validateNow(); -- this isn't working to remove display of sort arrow //myGrid.invalidateDisplayList(); -- this isn't working to remove diplay of sort arrow } ]]> </fx:Script> <s:VGroup height="100%" left="20" top="20"> <s:Label text="Step 1: Click a column header to display a sort arrow."/> <s:DataGrid id="myGrid" dataProvider="{arrCol}" creationComplete="init();"> <s:columns> <s:ArrayList> <s:GridColumn dataField="c1"/> <s:GridColumn dataField="c2"/> </s:ArrayList> </s:columns> </s:DataGrid> <s:Button label="Step 2: Click here to redraw dataGrid." click="redrawGrid()"/> <s:Label text="Step 3: (The goal is...) Observe the sort arrow is not displayed until the user manually clicks a header cell."/> </s:VGroup> </s:Application> ----- Original Message ----- From: [email protected] To: [email protected] Sent: Wednesday, May 1, 2013 4:06:32 PM Subject: Re: programmatic sort for Spark datagrid, accounting for sort triangle state 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.
