3 Replies Latest reply on Sep 10, 2009 12:48 PM by Umal Kumar

    Flex Grid Issues

    VIVEK JAIN YJA

      Hi,

       

      I am using Flex Grid in my project where i am successfully able to populate xml data dynamically. what i am doing here, I am dynamically generating the xml using httpservice. This HttpService is returning an XmlList that i am using to bind the grid dynamically.

       

      Here i am not fixing the column header text and column width as  in future the number of cloumns can be increased so i can't fix the column header text and column width.

       

      Here the issue is: how to remove " _x0020_"  from the header text and how to fix column width dynamically using Action Script.

       

      For better idea please refer the screen shot as attached along with post.

       

      Please have a look on the code as pasted below:

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

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

      <mx:Canvas

       

       

      xmlns:mx="http://www.adobe.com/2006/mxml" width="862" height="580"

      >

      <mx:TitleWindow

       

       

      x="182" y="113" width="670" height="395" layout="vertical

      "

      title="

       

      Top Presenters" fontSize="12

      "

      horizontalAlign="

       

      center" verticalAlign="top" showCloseButton="true

      "

      close="CloseGridWindow()" verticalScrollPolicy="

       

      off" borderColor="#000000

      "

      horizontalScrollPolicy="

       

      off" borderThicknessLeft="3

      "

      borderThicknessRight="

       

      3" borderThicknessBottom="3

      "

      creationComplete="GetTopPresentersXMLData()" backgroundColor="

       

      #FFFFFF

      "

      cornerRadius="

       

      0" color="#FFFFFF"

      >

      <mx:Script>

      <![CDATA[

       

       

      import

      mx.controls.dataGridClasses.DataGridColumn;

       

       

      import

      mx.collections.XMLListCollection;

       

       

       

      import

      mx.managers.PopUpManager;

       

       

      import

      mx.rpc.events.FaultEvent;

       

       

      import

      mx.rpc.events.ResultEvent;

       

       

      import

      mx.rpc.http.HTTPService;

       

       

      import

      mx.events.FlexEvent;

       

       

      import

      mx.controls.Alert;

       

       

       

      //funtion to get Top Presenters xml data

       

       

      private function GetTopPresentersXMLData():

      void

      {

       

       

      var httpService:HTTPService = new

      HTTPService();

      httpService.url =

       

      "http://ri/CItSL/Ters.aspx?mode=all&month=march&year=2009"

      ;

      httpService.resultFormat =

       

      "e4x"

      ;

      httpService.addEventListener(ResultEvent.RESULT, onResultHttpService);

      httpService.send();

      }

      [

       

      Bindable

      ]

       

       

      private var

      _xmlData:XMLList;

       

       

       

      //funtion to receive Http Service Response as XML Document

       

       

      private function onResultHttpService(e:ResultEvent):

      void

      {

       

       

      var

      xmlData:XMLList = e.result.Table;

      myGrid.dataProvider = xmlData;

       

       

      for each (var node:XML in

      xmlData[0].children())

      {

      addDataGridColumn(node.name());

      }

      }

       

       

       

      //function to add column dynamically

       

       

      private function addDataGridColumn(dataField:String):

      void

      {

       

       

      //var spacePattern:RegExp=/_x0020_/g;

       

       

      //var andPattern:RegExp=/_x0026_/g;

       

       

      //dataField=dataField.replace(spacePattern," ");

       

       

      //dataField=dataField.replace(andPattern,"&");

       

       

       

      var dgc:DataGridColumn=new

      DataGridColumn(dataField);

       

       

       

      var

      cols:Array=myGrid.columns;

      cols.push(dgc);

      myGrid.columns=cols;

      myGrid.validateNow();

      }

       

       

       

      //funtion to remove grid window

       

       

      private function CloseGridWindow():

      void

      {

      PopUpManager.removePopUp(

       

      this

      );

      }

      ]]>

      </mx:Script>

       

       

      <mx:DataGrid id="myGrid" alternatingItemColors="[#A2F4EF, #EFDE7D]" x="0" y="0" sortableColumns="false" width="658" height="352" fontSize="10" verticalAlign="middle" editable="false" enabled="true" horizontalGridLineColor="#befcc4" color="#000000">

       

       

      </mx:DataGrid>

       

       

      </mx:TitleWindow>

       

      Please let me know, If anyone knows the solution.

        • 1. Re: Flex Grid Issues
          paul.williams Level 4

          I can't open the attachment, could you try reattaching it?

          • 2. Re: Flex Grid Issues
            VIVEK JAIN YJA Level 1

            ScrreenShot2.gif

             

            Please have a look on the screen shot as pasted above and attached also along with this email.

            • 3. Re: Flex Grid Issues
              Umal Kumar Adobe Employee

              Hi,

               

              You can follow the below mentioned code and see if this works for you.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
                  creationComplete="onComplete();">

               

                  <mx:Script>
                      <![CDATA[
                          // imports:
                          import mx.events.FlexEvent;
                          import mx.core.UIComponent;
                          import mx.controls.dataGridClasses.DataGridColumn;
                          import mx.controls.Text;
                          import mx.utils.ObjectUtil;
                          import mx.controls.Label;
                          import mx.collections.ArrayCollection;
                          // data provider:
                          [Bindable] private var dp:ArrayCollection = new ArrayCollection();

               

                          private function onComplete():void {
                              // populate data provider here
                              // to avoid calcMaxLengths execution when the app is created:
                              dp = new ArrayCollection(
                                  [
                                      { col1: "Short", col2: "Other column 1" },
                                      { col1: "Some long string", col2: "Other column 2" },
                                      { col1: "Short", col2: "Other column 3" },
                                      { col1: "Short", col2: "Other column 4" },
                                      { col1: "The longest value in this column", col2: "Other column 5" },
                                      { col1: "Short", col2: "Other column 6" },
                                      { col1: "Short", col2: "Other column 7" }
                                  ]
                              );
                          }

               

                          // this is going to be executed whenever the data provider changes:
                          [Bindable("dataChange")]
                          private function calcMaxLengths(input:ArrayCollection):ArrayCollection {
                              // if there are items in the DP:
                              if ( input.length > 0 ) {
                                  // and no SPECIAL child exists:
                                  if ( getChildByName("$someTempUICToRemoveAfterFinished") == null ) {
                                      // create new SPECIAL child
                                      // this is required to call measureText
                                      // if you use custom data grid item renderer
                                      // then create instance of it instead of UIComponent:
                                      var uic:UIComponent = new UIComponent();
                                      // do not show and do not mess with the sizes:
                                      uic.includeInLayout = false;
                                      uic.visible = false;
                                      // name it to leverage get getChildByName method:
                                      uic.name = "$someTempUICToRemoveAfterFinished";
                                      // add event listener:
                                      uic.addEventListener(FlexEvent.CREATION_COMPLETE, onTempUICCreated);
                                      // add to parent:
                                      addChild(uic);
                                  }
                              }
                              // return an input:
                              return input;
                          }

               

                          // called when SPECIAL child is created:
                          private function onTempUICCreated(event:FlexEvent):void {
                              // keep the ref to the SPECIAL child:
                              var renderer:UIComponent = UIComponent(event.target);
                              // output - this will contain max size for each column:
                              var maxLengths:Object = {};
                              // temp variables:
                              var key:String = "";
                              var i:int=0;
                              // for each item in the DP:
                              for ( i=0; i<dp.length; i++ ) {
                                  var o:Object = dp.getItemAt(i);
                                  // for each key in the DP row:
                                  for ( key in o ) {
                                      // if the output doesn't have current key yet create it and set to 0:
                                      if ( !maxLengths.hasOwnProperty(key) ) {
                                          maxLengths[key] = 0;
                                      }
                                      // check if it's simple object (may cause unexpected issues for Boolean):
                                      if ( ObjectUtil.isSimple(o[key]) ) {
                                          // measure the text:
                                          var cellMetrics:TextLineMetrics = renderer.measureText(o[key]+"");
                                          // and if the width is greater than longest found up to now:
                                          if ( cellMetrics.width > maxLengths[key] ) {
                                              // set it as the longest one:
                                              maxLengths[key] = cellMetrics.width;
                                          }
                                      }
                                  }
                              }

               

                              // apply column sizes:
                              for ( key in maxLengths ) {
                                  for ( i=0; i<dg.columnCount; i++ ) {
                                      // if the column actually exists:
                                      if ( DataGridColumn(dg.columns[i]).dataField == key ) {
                                          // set size + some constant margin
                                          DataGridColumn(dg.columns[i]).width = Number(maxLengths[key]) + 12;
                                      }
                                  }
                              }
                              // cleanup:
                              removeChild(getChildByName("$someTempUICToRemoveAfterFinished"));
                          }

               

                      ]]>
                  </mx:Script>

               

                  <mx:DataGrid id="dg" horizontalScrollPolicy="on" dataProvider="{calcMaxLengths(dp)}" width="400">
                      <mx:columns>
                          <mx:DataGridColumn dataField="col1" width="40" />
                          <mx:DataGridColumn dataField="col2" width="100" />
                      </mx:columns>
                  </mx:DataGrid>

               

              </mx:WindowedApplication>

               

              Regards