You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Adnan Doric <as...@gmail.com> on 2013/04/29 11:56:21 UTC
Spark Datagrid backend sorting possible ?
Hello all,
I would like to be able to click on Datagrid headers and trigger backend
call in order to paginate/sort/filter and send back an updated
collection. Datagrid should just display it as is.
How can this be done with data grid sort indicators correctly reflecting
the state "ASC" or "DESC"?
Thank you in advance for your help :)
Re: Spark Datagrid backend sorting possible ?
Posted by Frédéric THOMAS <we...@hotmail.com>.
It was for mx advanced datagrid but if it can help:
/**
* User: frederic.thomas
* Date: 22/06/11
* Time: 14:36
*/
package com.company.project.controls {
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.text.TextLineMetrics;
import com.company.project.event.AdvancedPaginatedDataGridSortEvent;
import com.company.project.model.PageManager;
import com.company.project.model.SortVO;
import mx.collections.SortField;
import mx.controls.AdvancedDataGrid;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.core.UIComponent;
import mx.events.AdvancedDataGridEvent;
/**
* Dispatched when a sort operation.
*
* @eventType
com.company.project.event.AdvancedPaginatedDataGridSortEvent.SORTING
*/
[Event(name="remoteSort",
type="com.company.project.event.AdvancedPaginatedDataGridSortEvent")]
public class AdvancedPaginatedDataGrid extends AdvancedDataGrid {
private var _pageManager:PageManager;
[Bindable]
public function get pageManager():PageManager {
return _pageManager;
}
public function set pageManager(value:PageManager):void {
_pageManager = value
}
[ArrayElementType("com.company.project.model.SortVO")]
private var _orderBy:Array;
public function get orderBy():Array {
return _orderBy;
}
public function set orderBy(value:Array):void {
_orderBy = value;
}
/**
* CONSTRUCTOR
*/
public function AdvancedPaginatedDataGrid() {
super();
}
protected var sortColumnSelectionEnded:Boolean;
/**
* @private
*/
override protected function
sortHandler(event:AdvancedDataGridEvent):void {
super.sortHandler(event);
_orderBy = [];
for each(var o:SortField in collection.sort.fields) {
_orderBy.push(new SortVO(o.name, (o.descending == false) ?
SortVO.DESCENDING : SortVO.ASCENDING));
}
dispatchEvent(new AdvancedPaginatedDataGridSortEvent(_orderBy));
}
/**
* Returns the header separators between column headers,
* and populates the <code>separators</code> Array with the separators
returned.
*
* @param i The number of separators to return.
*
* @param seperators Array to be populated with the header objects.
*
* @param headerLines The parent component of the header separators.
* Flex calls the <code>headerLines.getChild()</code> method internally
to return the separators.
*/
override protected function getSeparator(i:int, seperators:Array,
headerLines:UIComponent):UIComponent {
var sep:UIComponent = super.getSeparator(i, seperators,
headerLines);
sep.doubleClickEnabled = true;
// Add listener for Double Click
DisplayObject(sep).addEventListener(
MouseEvent.DOUBLE_CLICK, columnResizeDoubleClickHandler);
return sep;
}
/**
* @private
* Indicates where the right side of a resized column appears.
*/
private function columnResizeDoubleClickHandler(event:MouseEvent):void {
// check if the ADG is enabled and the columns are resizable
if (!enabled || !resizableColumns)
return;
var target:DisplayObject = DisplayObject(event.target);
var index:int = target.parent.getChildIndex(target);
// get the columns array
var optimumColumns:Array = getOptimumColumns();
// check for resizable column
if (!optimumColumns[index].resizable)
return;
// calculate the maxWidth - we can optimize this calculation
if (listItems) {
var len:int = listItems.length;
var maxWidth:int = 0;
for (var i:int = 0; i < len; i++) {
if (listItems[i][index] is IDropInListItemRenderer) {
var lineMetrics:TextLineMetrics =
measureText(IDropInListItemRenderer(listItems[i][index]).listData.label);
if (lineMetrics.width > maxWidth)
maxWidth = lineMetrics.width;
}
}
}
// set the column's width
optimumColumns[index].width = maxWidth + getStyle("paddingLeft") +
getStyle("paddingRight") + 8;
}
}
}
/**
* User: frederic.thomas
* Date: 21/06/11
* Time: 16:53
*/
package com.company.project.model {
[Bindable]
[RemoteClass(alias="com.company.project.model.Sort")]
public class SortVO {
public static const ASCENDING:int = 0;
public static const DESCENDING:int = 1;
public var field:String;
public var order:int;
public function SortVO(field:String = null, order:int = ASCENDING) {
this.field = field;
this.order = order;
}
}
}
/**
* User: frederic.thomas
* Date: 22/06/11
* Time: 15:52
*/
package com.company.project.event {
import flash.events.Event;
public class AdvancedPaginatedDataGridSortEvent extends Event {
public static const REMOTE_SORT:String = "remoteSort";
[ArrayElementType("com.company.project.model.SortVO")]
private var _orderBy:Array;
public function AdvancedPaginatedDataGridSortEvent(orderBy:Array,
bubbles:Boolean = true, cancelable:Boolean = false):void {
super(REMOTE_SORT, bubbles, cancelable);
this._orderBy = orderBy;
}
public function get orderBy():Array {
return _orderBy;
}
}
}
/**
* User: frederic.thomas
* Date: 16/04/11
* Time: 10:02
*/
package com.company.project.model {
import flash.utils.Dictionary;
[Bindable]
public class PageManager {
private var _allSelected:Boolean;
private var _inclusions:Dictionary = new Dictionary();
private var _exclusions:Dictionary = new Dictionary();
public var count:uint;
private var _selectedItemsLength:int;
public function get allSelected():Boolean {
return _allSelected;
}
public function set allSelected(value:Boolean):void {
_allSelected = value;
reset();
}
public function get inclusions():Dictionary {
return _inclusions;
}
public function set inclusions(inclusions:Dictionary):void {
_inclusions = inclusions;
}
public function set exclusions(exclusions:Dictionary):void {
_exclusions = exclusions;
}
public function get exclusions():Dictionary {
return _exclusions;
}
public function get selectedItemsLength():int {
return _selectedItemsLength;
}
public function set selectedItemsLength(value:int):void {
_selectedItemsLength = value;
}
public function select(id:*):void {
if (allSelected) {
if (delete(_exclusions[id]))
selectedItemsLength++;
} else {
_inclusions[id] = true;
selectedItemsLength++;
}
if (_selectedItemsLength == count)
allSelected = true;
}
public function deselect(id:*):void {
if (allSelected) {
_exclusions[id] = true;
selectedItemsLength--;
} else {
if (delete(_inclusions[id]))
selectedItemsLength--;
}
if (_selectedItemsLength == 0)
allSelected = false;
}
public function getItemList():Array {
var itemList:Array = new Array();
var dico:Dictionary = allSelected ? exclusions : inclusions;
for (var key:* in dico)
itemList.push(key);
return itemList;
}
private function reset():void {
inclusions = new Dictionary();
exclusions = new Dictionary();
selectedItemsLength = (_allSelected) ? count : 0;
}
}
}
Re: Re: Spark Datagrid backend sorting possible ?
Posted by Adnan Doric <as...@gmail.com>.
Thank you Frédéric & Evyatar, I'll try that and keep you informed on how
it went.
On 29/04/2013 15:46, Frédéric THOMAS wrote:
> Or maybe overriding Datagrid->sortByColumns, not calling super and
> simply returning false/true depending if you want them considered as
> sorted or not;
>
> -Fred
>
> -----Message d'origine----- From: Evyatar Ben Halevi-Arbib
> Sent: Monday, April 29, 2013 3:29 PM
> To: users@flex.apache.org
> Subject: Re: Re: Spark Datagrid backend sorting possible ?
>
> It sounds like you just need to catch the column header mouse down event,
> prevent default and execute your server calling code...
>
> Good luck,
> Evyatar
> On Apr 29, 2013 4:03 PM, "Adnan Doric" <as...@gmail.com> wrote:
>
>> Hey, thank you for trying to help.
>> In fact, I don't want to implement lazy loading, it is a lot simpler
>> then
>> that: I just want the DataGrid to avoid sorting all together and let me
>> populate "manually" the dataProvider.
>>
>> Please take a look at the following Gist, it is a small example
>> illustrating the issue:
>> https://gist.github.com/**adnandoric/5481416<https://gist.github.com/adnandoric/5481416>
>>
>>
>> As you will see, the moment you click on the column header, DataGrid
>> immediately sort it even though I explicitly set the sortCompareFunction
>> that returns null. I'm probably doing it wrong.
>>
>> What I would like is to have DataGrid not sorting or doing anything
>> at all
>> when I click on the header and let me handle the whole operation. At the
>> end, when data arrives from the backend, I would just need to adjust the
>> sortIndicator which is apparently possible using sortDescending,
>> thank you
>> for that information :)
>>
>> So, what do you think about this ? Feel free to fork the gist :)
>>
>> Thank you,
>> Adnan
>>
>>
>> On 29/04/2013 13:13, Julio Carneiro wrote:
>>
>>> Yes, James Ward PagedList is the way to go if you want lazyloading.
>>>
>>> Also, if you're sorting in the backend there is no reason to set a Sort
>>> again in your dataProvider.
>>> You can simply set the sort indicators by using something like:
>>> columnHeaderGroup.**visibleSortIndicatorIndices = new
>>> <int>[_sortColumn];
>>>
>>> Please not that visibleSortIndicatorIndices is a Vector, so if you are
>>> sorting on multiple columns, you can set them all in the Vector.
>>>
>>> As for the asc/desc indicators, you set them in the GridColumn
>>> 'sortDescending' property.
>>>
>>> hth
>>> julio
>>>
>>> On Apr 29, 2013, at 7:41 AM, Tom Chiverton <tc...@extravision.com> wrote:
>>>
>>> On 29/04/2013 10:56, Adnan Doric wrote:
>>>>
>>>>> Hello all,
>>>>>
>>>>> I would like to be able to click on Datagrid headers and trigger
>>>>> backend call in order to paginate/sort/filter and send back an
>>>>> updated
>>>>> collection. Datagrid should just display it as is.
>>>>>
>>>>> How can this be done with data grid sort indicators correctly
>>>>> reflecting the state "ASC" or "DESC"?
>>>>>
>>>> It's easier than you think.
>>>> If you are already backing this with a server result, drop in James
>>>> Ward's awesome PagedList connector to an AsyncListView as the
>>>> dataprovider
>>>> :
>>>> http://www.jamesward.com/2010/**10/11/data-paging-in-flex-4/<http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/>
>>>>
>>>> Now just send the sort direction along with the call to the
>>>> backend. You
>>>> can get this by listening for gridClick events with (event.rowIndex ==
>>>> -1)&&(event.columnIndex!=-1) and saving off the column name.
>>>>
>>>> Applying a matching Sort to the local dataProvider and it'll show the
>>>> right indicators.
>>>>
>>>> Tom
>>>>
>>> --
>>> Julio Carneiro
>>>
>>>
>>>
>>>
>>
>
>
Re: Spark Datagrid backend sorting possible ?
Posted by Frédéric THOMAS <we...@hotmail.com>.
Or maybe overriding Datagrid->sortByColumns, not calling super and simply
returning false/true depending if you want them considered as sorted or not;
-Fred
-----Message d'origine-----
From: Evyatar Ben Halevi-Arbib
Sent: Monday, April 29, 2013 3:29 PM
To: users@flex.apache.org
Subject: Re: Re: Spark Datagrid backend sorting possible ?
It sounds like you just need to catch the column header mouse down event,
prevent default and execute your server calling code...
Good luck,
Evyatar
On Apr 29, 2013 4:03 PM, "Adnan Doric" <as...@gmail.com> wrote:
> Hey, thank you for trying to help.
> In fact, I don't want to implement lazy loading, it is a lot simpler then
> that: I just want the DataGrid to avoid sorting all together and let me
> populate "manually" the dataProvider.
>
> Please take a look at the following Gist, it is a small example
> illustrating the issue:
> https://gist.github.com/**adnandoric/5481416<https://gist.github.com/adnandoric/5481416>
>
> As you will see, the moment you click on the column header, DataGrid
> immediately sort it even though I explicitly set the sortCompareFunction
> that returns null. I'm probably doing it wrong.
>
> What I would like is to have DataGrid not sorting or doing anything at all
> when I click on the header and let me handle the whole operation. At the
> end, when data arrives from the backend, I would just need to adjust the
> sortIndicator which is apparently possible using sortDescending, thank you
> for that information :)
>
> So, what do you think about this ? Feel free to fork the gist :)
>
> Thank you,
> Adnan
>
>
> On 29/04/2013 13:13, Julio Carneiro wrote:
>
>> Yes, James Ward PagedList is the way to go if you want lazyloading.
>>
>> Also, if you're sorting in the backend there is no reason to set a Sort
>> again in your dataProvider.
>> You can simply set the sort indicators by using something like:
>> columnHeaderGroup.**visibleSortIndicatorIndices = new
>> <int>[_sortColumn];
>>
>> Please not that visibleSortIndicatorIndices is a Vector, so if you are
>> sorting on multiple columns, you can set them all in the Vector.
>>
>> As for the asc/desc indicators, you set them in the GridColumn
>> 'sortDescending' property.
>>
>> hth
>> julio
>>
>> On Apr 29, 2013, at 7:41 AM, Tom Chiverton <tc...@extravision.com> wrote:
>>
>> On 29/04/2013 10:56, Adnan Doric wrote:
>>>
>>>> Hello all,
>>>>
>>>> I would like to be able to click on Datagrid headers and trigger
>>>> backend call in order to paginate/sort/filter and send back an updated
>>>> collection. Datagrid should just display it as is.
>>>>
>>>> How can this be done with data grid sort indicators correctly
>>>> reflecting the state "ASC" or "DESC"?
>>>>
>>> It's easier than you think.
>>> If you are already backing this with a server result, drop in James
>>> Ward's awesome PagedList connector to an AsyncListView as the
>>> dataprovider
>>> :
>>> http://www.jamesward.com/2010/**10/11/data-paging-in-flex-4/<http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/>
>>>
>>> Now just send the sort direction along with the call to the backend. You
>>> can get this by listening for gridClick events with (event.rowIndex ==
>>> -1)&&(event.columnIndex!=-1) and saving off the column name.
>>>
>>> Applying a matching Sort to the local dataProvider and it'll show the
>>> right indicators.
>>>
>>> Tom
>>>
>> --
>> Julio Carneiro
>>
>>
>>
>>
>
Re: Re: Spark Datagrid backend sorting possible ?
Posted by Evyatar Ben Halevi-Arbib <ev...@gmail.com>.
It sounds like you just need to catch the column header mouse down event,
prevent default and execute your server calling code...
Good luck,
Evyatar
On Apr 29, 2013 4:03 PM, "Adnan Doric" <as...@gmail.com> wrote:
> Hey, thank you for trying to help.
> In fact, I don't want to implement lazy loading, it is a lot simpler then
> that: I just want the DataGrid to avoid sorting all together and let me
> populate "manually" the dataProvider.
>
> Please take a look at the following Gist, it is a small example
> illustrating the issue:
> https://gist.github.com/**adnandoric/5481416<https://gist.github.com/adnandoric/5481416>
>
> As you will see, the moment you click on the column header, DataGrid
> immediately sort it even though I explicitly set the sortCompareFunction
> that returns null. I'm probably doing it wrong.
>
> What I would like is to have DataGrid not sorting or doing anything at all
> when I click on the header and let me handle the whole operation. At the
> end, when data arrives from the backend, I would just need to adjust the
> sortIndicator which is apparently possible using sortDescending, thank you
> for that information :)
>
> So, what do you think about this ? Feel free to fork the gist :)
>
> Thank you,
> Adnan
>
>
> On 29/04/2013 13:13, Julio Carneiro wrote:
>
>> Yes, James Ward PagedList is the way to go if you want lazyloading.
>>
>> Also, if you're sorting in the backend there is no reason to set a Sort
>> again in your dataProvider.
>> You can simply set the sort indicators by using something like:
>> columnHeaderGroup.**visibleSortIndicatorIndices = new
>> <int>[_sortColumn];
>>
>> Please not that visibleSortIndicatorIndices is a Vector, so if you are
>> sorting on multiple columns, you can set them all in the Vector.
>>
>> As for the asc/desc indicators, you set them in the GridColumn
>> 'sortDescending' property.
>>
>> hth
>> julio
>>
>> On Apr 29, 2013, at 7:41 AM, Tom Chiverton <tc...@extravision.com> wrote:
>>
>> On 29/04/2013 10:56, Adnan Doric wrote:
>>>
>>>> Hello all,
>>>>
>>>> I would like to be able to click on Datagrid headers and trigger
>>>> backend call in order to paginate/sort/filter and send back an updated
>>>> collection. Datagrid should just display it as is.
>>>>
>>>> How can this be done with data grid sort indicators correctly
>>>> reflecting the state "ASC" or "DESC"?
>>>>
>>> It's easier than you think.
>>> If you are already backing this with a server result, drop in James
>>> Ward's awesome PagedList connector to an AsyncListView as the dataprovider
>>> : http://www.jamesward.com/2010/**10/11/data-paging-in-flex-4/<http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/>
>>>
>>> Now just send the sort direction along with the call to the backend. You
>>> can get this by listening for gridClick events with (event.rowIndex ==
>>> -1)&&(event.columnIndex!=-1) and saving off the column name.
>>>
>>> Applying a matching Sort to the local dataProvider and it'll show the
>>> right indicators.
>>>
>>> Tom
>>>
>> --
>> Julio Carneiro
>>
>>
>>
>>
>
Re: Re: Spark Datagrid backend sorting possible ?
Posted by Adnan Doric <as...@gmail.com>.
Hey, thank you for trying to help.
In fact, I don't want to implement lazy loading, it is a lot simpler
then that: I just want the DataGrid to avoid sorting all together and
let me populate "manually" the dataProvider.
Please take a look at the following Gist, it is a small example
illustrating the issue:
https://gist.github.com/adnandoric/5481416
As you will see, the moment you click on the column header, DataGrid
immediately sort it even though I explicitly set the sortCompareFunction
that returns null. I'm probably doing it wrong.
What I would like is to have DataGrid not sorting or doing anything at
all when I click on the header and let me handle the whole operation. At
the end, when data arrives from the backend, I would just need to adjust
the sortIndicator which is apparently possible using sortDescending,
thank you for that information :)
So, what do you think about this ? Feel free to fork the gist :)
Thank you,
Adnan
On 29/04/2013 13:13, Julio Carneiro wrote:
> Yes, James Ward PagedList is the way to go if you want lazyloading.
>
> Also, if you're sorting in the backend there is no reason to set a Sort again in your dataProvider.
> You can simply set the sort indicators by using something like:
> columnHeaderGroup.visibleSortIndicatorIndices = new <int>[_sortColumn];
>
> Please not that visibleSortIndicatorIndices is a Vector, so if you are sorting on multiple columns, you can set them all in the Vector.
>
> As for the asc/desc indicators, you set them in the GridColumn 'sortDescending' property.
>
> hth
> julio
>
> On Apr 29, 2013, at 7:41 AM, Tom Chiverton <tc...@extravision.com> wrote:
>
>> On 29/04/2013 10:56, Adnan Doric wrote:
>>> Hello all,
>>>
>>> I would like to be able to click on Datagrid headers and trigger backend call in order to paginate/sort/filter and send back an updated collection. Datagrid should just display it as is.
>>>
>>> How can this be done with data grid sort indicators correctly reflecting the state "ASC" or "DESC"?
>> It's easier than you think.
>> If you are already backing this with a server result, drop in James Ward's awesome PagedList connector to an AsyncListView as the dataprovider : http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/
>>
>> Now just send the sort direction along with the call to the backend. You can get this by listening for gridClick events with (event.rowIndex == -1)&&(event.columnIndex!=-1) and saving off the column name.
>>
>> Applying a matching Sort to the local dataProvider and it'll show the right indicators.
>>
>> Tom
> --
> Julio Carneiro
>
>
>
Re: Spark Datagrid backend sorting possible ?
Posted by Julio Carneiro <ju...@4ctv.com>.
Yes, James Ward PagedList is the way to go if you want lazyloading.
Also, if you're sorting in the backend there is no reason to set a Sort again in your dataProvider.
You can simply set the sort indicators by using something like:
columnHeaderGroup.visibleSortIndicatorIndices = new <int>[_sortColumn];
Please not that visibleSortIndicatorIndices is a Vector, so if you are sorting on multiple columns, you can set them all in the Vector.
As for the asc/desc indicators, you set them in the GridColumn 'sortDescending' property.
hth
julio
On Apr 29, 2013, at 7:41 AM, Tom Chiverton <tc...@extravision.com> wrote:
> On 29/04/2013 10:56, Adnan Doric wrote:
>> Hello all,
>>
>> I would like to be able to click on Datagrid headers and trigger backend call in order to paginate/sort/filter and send back an updated collection. Datagrid should just display it as is.
>>
>> How can this be done with data grid sort indicators correctly reflecting the state "ASC" or "DESC"?
> It's easier than you think.
> If you are already backing this with a server result, drop in James Ward's awesome PagedList connector to an AsyncListView as the dataprovider : http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/
>
> Now just send the sort direction along with the call to the backend. You can get this by listening for gridClick events with (event.rowIndex == -1)&&(event.columnIndex!=-1) and saving off the column name.
>
> Applying a matching Sort to the local dataProvider and it'll show the right indicators.
>
> Tom
--
Julio Carneiro
Re: Spark Datagrid backend sorting possible ?
Posted by Tom Chiverton <tc...@extravision.com>.
On 29/04/2013 10:56, Adnan Doric wrote:
> Hello all,
>
> I would like to be able to click on Datagrid headers and trigger
> backend call in order to paginate/sort/filter and send back an updated
> collection. Datagrid should just display it as is.
>
> How can this be done with data grid sort indicators correctly
> reflecting the state "ASC" or "DESC"?
It's easier than you think.
If you are already backing this with a server result, drop in James
Ward's awesome PagedList connector to an AsyncListView as the
dataprovider : http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/
Now just send the sort direction along with the call to the backend. You
can get this by listening for gridClick events with (event.rowIndex ==
-1)&&(event.columnIndex!=-1) and saving off the column name.
Applying a matching Sort to the local dataProvider and it'll show the
right indicators.
Tom
Re: Re: Spark Datagrid backend sorting possible ?
Posted by Adnan Doric <as...@gmail.com>.
Great, that did it with Julio Carneiro's advice on indicators:
dg.columnHeaderGroup.visibleSortIndicatorIndices = new <int>[_sortColumn];
Now I can play with it to find a suitable implementation.
Thank you guys :)
Cheers,
Adnan
On 29/04/2013 18:27, Alex Harui wrote:
> I think you just call preventDefault on this event:
>
> spark.events.GridSortEvent.SORT_CHANGING
>
> Then do whatever you want. There might be issues with the sort indicator,
> then you may need a custom header renderer for that.
>
>
> On 4/29/13 2:56 AM, "Adnan Doric" <as...@gmail.com> wrote:
>
>> Hello all,
>>
>> I would like to be able to click on Datagrid headers and trigger backend
>> call in order to paginate/sort/filter and send back an updated
>> collection. Datagrid should just display it as is.
>>
>> How can this be done with data grid sort indicators correctly reflecting
>> the state "ASC" or "DESC"?
>>
>> Thank you in advance for your help :)
Re: Spark Datagrid backend sorting possible ?
Posted by Alex Harui <ah...@adobe.com>.
I think you just call preventDefault on this event:
spark.events.GridSortEvent.SORT_CHANGING
Then do whatever you want. There might be issues with the sort indicator,
then you may need a custom header renderer for that.
On 4/29/13 2:56 AM, "Adnan Doric" <as...@gmail.com> wrote:
> Hello all,
>
> I would like to be able to click on Datagrid headers and trigger backend
> call in order to paginate/sort/filter and send back an updated
> collection. Datagrid should just display it as is.
>
> How can this be done with data grid sort indicators correctly reflecting
> the state "ASC" or "DESC"?
>
> Thank you in advance for your help :)
--
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui