15 Replies Latest reply on May 23, 2014 4:06 AM by Ravichandran J

    Help!!!! with DatagridColumn Header

    snes2078

      Hi all!

       

      This is my problem... I have a datagrid with itemrenderers in the header of some columns allowing to filter the results. The item renderer consist in a label and a custom control that displays a list with checks to select multiple values. I want to allow the user can click on the header (with the itemrenderer) to sort the results, but when I enable the property sortable of the column, whenever I click on the list to select the records it also fires up the sorting event of the header. I don't know how to set an event o diferentiate the events in the header of the column to avoid this problem.

       

       

      Thanks for yous comments and Ideas!!!

        • 1. Re: Help!!!! with DatagridColumn Header
          Flex harUI Adobe Employee

          Mx DataGrid dispatches a cancelable HEADER_RELEASE event.  If you cancel it, the sort will not happen.  If you can figure out from other events when to cancel it, then it might work like you want.

          • 2. Re: Help!!!! with DatagridColumn Header
            TheRaisingSun

            You can get the currentTarget item in the event, if the CurrentTarget item is label  or a custom Control u can stop the dispatching of event related to sorting of Data Grid.

            • 3. Re: Help!!!! with DatagridColumn Header
              snes2078 Level 1

              Hi TheRaisingSun,

               

              when the event is catched the currentTarget that shows is DataGrid. It does not point out the control that fire the event.

              • 4. Re: Help!!!! with DatagridColumn Header
                snes2078 Level 1

                Hi Flex harUI,

                 

                Thanks for the reply.. I saw the event and when the event get to the handler it says that was frierd up from the data grid, but I clicked the dropdownlist from the itemrenderer...I'm quite lost...

                • 5. Re: Help!!!! with DatagridColumn Header
                  Flex harUI Adobe Employee

                  I would add event listeners for mouse events and try to track what internal targets are being clicked on.  In theory, if you receive a click from an internal target and then a headerRelease from the DG without any intervening mouseOut then that last click's target caused the headerRelease.

                  1 person found this helpful
                  • 6. Re: Help!!!! with DatagridColumn Header
                    TheRaisingSun Level 1

                    when user clicks on AdvanceDataGridColumns Header, if the target area is custom componenet(ItemRenderer) , we can get the event.target.automationOwner as custom componenet, then we can stop the dispatching of Sorting

                    1 person found this helpful
                    • 7. Re: Help!!!! with DatagridColumn Header
                      snes2078 Level 1

                      <?xml version="1.0" encoding="utf-8"?>

                      <mx:VBox xmlns:mx="library://ns.adobe.com/flex/mx"

                                           xmlns:fx="http://ns.adobe.com/mxml/2009"

                                           xmlns:s="library://ns.adobe.com/flex/spark"

                                           xmlns:CustomComboBox="com.CustomComboBox.*"

                                           xmlns:acm="com.acm.*" horizontalAlign="center" added="vbox1_addedHandler(event)"

                                           width="100%" height="100%" paddingLeft="1" paddingRight="1" >

                       

                                <fx:Script>

                                          <![CDATA[

                                                    import com.cesan.common.exceptions.CESANError;

                       

                                                    import mx.collections.ArrayCollection;

                                                    import mx.controls.DataGrid;

                                                    import mx.controls.dataGridClasses.DataGridColumn;

                       

                                                    [Bindable]

                                                    public var arrDatos:ArrayCollection = new ArrayCollection();

                       

                                                    [Bindable]

                                                    public var strDataField:String = "";

                       

                       

                       

                       

                       

                                                    protected function vbox1_addedHandler(event:Event):void

                                                    {

                                                              // TODO Auto-generated method stub

                                                              if (ccFiltro!= null)

                                                                        ccFiltro.addEventListener(MouseEvent.CLICK, click);

                                                    }

                       

                         

                                                    protected function ccFiltro_addedToStageHandler(event:Event):void

                                                    {

                                                              // TODO Auto-generated method stub

                                                              ccFiltro.addEventListener(MouseEvent.CLICK,click);

                                                    }

                       

                                          ]]>

                                </fx:Script>

                       

                                <s:Group width="100%" height="100%" >

                                          <s:VGroup width="100%" height="100%" >

                                                    <s:Label id="lblHeaderText" text="{data.headerText}" width="100%" textAlign="center" height="50%" />

                                                    <acm:ComboCheck id="ccFiltro" dataProvider="{arrDatos}" labelField="label"  addedToStage="ccFiltro_addedToStageHandler(event)"

                                                                                            width="100%" />

                                  </s:VGroup>

                                </s:Group>

                      </mx:VBox>

                       

                      I'm Using a standard Datagrid, no te AdvanceDatagridColumns. This is the code from my headerrenderer. When I capture the click event in teh Datagrid Class. when I see the property event.target.automationOwner ... it shows HGroup that I don't have.. if I saw the same property under the HGroup I found VGroup that I suppose it is the one that contains the label and the ccFiltro component.

                      • 8. Re: Help!!!! with DatagridColumn Header
                        snes2078 Level 1

                        The first event that raises up tis teh Header_Release... after that the mouse click event is triggered

                        • 9. Re: Help!!!! with DatagridColumn Header
                          Flex harUI Adobe Employee

                          Try listening for MOUSE_UP

                          • 10. Re: Help!!!! with DatagridColumn Header
                            snes2078 Level 1

                            I made some improvements

                             

                            in the widget where I have the datagrid  I add this event

                             

                            [Bindable]private var sortable:Boolean = true;

                             

                            resultsGrid.addEventListener(DataGridEvent.HEADER_RELEASE,test,false,0);

                             

                            private function test(event:DataGridEvent=null):void

                                                          {

                                                                    var gt:String ="";

                                                                    var item:CustomGridFiltroHeaderRenderer = (event.itemRenderer as CustomGridFiltroHeaderRenderer);

                             

                                                                    if (item.searchClicked)

                                                                    {

                                                                              //Alert.show("es cancelable:" + event.cancelable);

                                                                              event.preventDefault();

                                                                              event.stopPropagation();

                                                                              sortable= false;

                                                                    }

                                                                    else

                                                                    {

                                                                              sortable= true;

                                                                    }

                             

                                                          }

                             

                             

                            and in the Item renderer i added some eventlisteners to change the  value of a variable

                             

                            [Bindable] public var searchClicked:Boolean = false;

                             

                            protected function mxitemrenderer1_addedToStageHandler(event:Event):void

                                                          {

                                                                    // TODO Auto-generated method stub

                                                                    this.addEventListener(MouseEvent.CLICK,mxitemrenderer1_clickHandler,f alse,5);

                                                          }

                             

                            protected function mxitemrenderer1_clickHandler(event:MouseEvent):void

                                                          {

                                                                    // TODO Auto-generated method stub

                                                                    searchClicked = false;

                                                          }

                             

                            it works fine if the user click twice in the same spot... because the test event fires up before the events of the  item renderer... there is a way around? to avoid this ...

                             

                            in the test event no matter what event fires up... it get Datagrid as the automationOwner... and after that the event such as mouse click.. fires up...

                            • 11. Re: Help!!!! with DatagridColumn Header
                              Flex harUI Adobe Employee

                              Did you try mouseUp?

                              • 12. Re: Help!!!! with DatagridColumn Header
                                snes2078 Level 1

                                Yes  I tried mouseUp mouseDown and always firess up first the datagridevent and latwr the one attached to the controls within the itemrenderer...

                                • 13. Re: Help!!!! with DatagridColumn Header
                                  Flex harUI Adobe Employee

                                  Try mouseUp with a higher priority.  It should get fired before HEADER_RELEASE.

                                  1 person found this helpful
                                  • 14. Re: Help!!!! with DatagridColumn Header
                                    snes2078 Level 1

                                    Hi,

                                     

                                    I tried the mouseUp with hieghr priority but It didn't work, i got the same result.. the header release event fires up first taht any event within a headerrenderer....

                                     

                                    I could solve my problem working around the events... First.. as always the header release fires up.. when I get in the function I stop the propagation of the event... then within the headerrenderer.. after the mouseup event fires up, I checked for the component and set a variable in the parentDocument.. so after that I fire up another function to do the sorting of the datagrid column...

                                     

                                     

                                    Thanks for your help!!!

                                    • 15. Re: Help!!!! with DatagridColumn Header
                                      Ravichandran J

                                      The issue can be resolved by adding "disableAutoUpdate()". to dataProvider.

                                       

                                      Here is the complete code:

                                       

                                      <?xml version="1.0" encoding="utf-8"?>

                                      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

                                          xmlns:s="library://ns.adobe.com/flex/spark"

                                          xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="creationCompleteHandler(event)">

                                        <fx:Script>

                                        <![CDATA[

                                        import com.ravi.ecu.data.vo.ECUDataVO;

                                       

                                        import mx.collections.ArrayCollection;

                                        import mx.events.FlexEvent;

                                       

                                        [Bindable]

                                        private var ecuDataList:ArrayCollection = new ArrayCollection();

                                       

                                        private function creationCompleteHandler(event:FlexEvent):void

                                        {

                                        for(var i:int=0; i<20; i++) {

                                        var vo:ECUDataVO = new ECUDataVO();

                                        vo.graph = (i%3)?1:0;

                                        vo.name = "Name " + i;

                                        vo.unit = "Unit " + i;

                                        vo.value = "Value " + i;

                                        ecuDataList.addItem(vo);

                                        }

                                       

                                        ecuDataList.disableAutoUpdate();

                                        }

                                       

                                        ]]>

                                        </fx:Script>

                                        <fx:Declarations>

                                        <!-- Place non-visual elements (e.g., services, value objects) here -->

                                        </fx:Declarations>

                                       

                                        <s:DataGrid width="400" height="300" dataProvider="{ecuDataList}" x="10" y="10">

                                        <s:columns>

                                        <s:ArrayList>

                                        <s:GridColumn headerText="Graph" dataField="graph" itemRenderer="com.ravi.ecu.data.renderer.GraphItemRenderer" />

                                        <s:GridColumn headerText="Value" dataField="value" />

                                        <s:GridColumn headerText="Unit" dataField="unit" />

                                        </s:ArrayList>

                                        </s:columns>

                                        </s:DataGrid>

                                      </s:WindowedApplication>

                                       

                                       

                                       

                                      GraphItemRenderer.mxml

                                       

                                      <?xml version="1.0" encoding="utf-8"?>

                                      <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                                        xmlns:s="library://ns.adobe.com/flex/spark"

                                        xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">

                                       

                                        <fx:Script>

                                        <![CDATA[

                                        protected function cBox_changeHandler(event:Event):void

                                        {

                                        data.graph = !data.graph;

                                        }

                                        ]]>

                                        </fx:Script>

                                       

                                       

                                        <s:CheckBox id="cBox" selected="{data.graph}" change="cBox_changeHandler(event)"/>

                                       

                                      </s:GridItemRenderer>

                                       

                                       

                                      ECUDataVO.as

                                      package com.ravi.ecu.data.vo

                                      {

                                      [Bindable]

                                      public class ECUDataVO

                                      {

                                      public var graph:int=0;

                                      public var name:String;

                                      public var value:String;

                                      public var unit:String;

                                      }

                                      }