1 Reply Latest reply on Jun 23, 2009 4:27 AM by *Prashant Shelke*

    Advanced data grid columns not displayed properly in the page

    Sangeetha AV

      Hi All,

       

      The data for the advanceddatagrid columns was dynamically populated in the data grid which is shown correctly.

      I have a horizontal and vertical scroll bar. On page load some of the columns in the datagrid dont have the horizontal and vertical lines between the columns, just the data is displayed blankly. On scrolling the horizontal scroll bar at the middle part of the grid ,the columns are displayed correctly with the horizontal lines. Sometimes the entire lines disappear just like that. Could anyone please tell me what is happening and how to solve this? A huge amount of data is being bought in .Does the amount of data has anything to do with that?

       

      Here's the code: MXML file

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute" creationComplete="initApp()">

      <!--
        Simple client to demonstrate runtime configuration of destinations.
        The "runtime-employee" destination is configured in
        EmployeeRuntimeRemotingDestination.java.
      -->

      <mx:Script source="ScriptProject.as" />

        <mx:AdvancedDataGrid lockedColumnCount="1" horizontalScrollPolicy="auto" verticalScrollPolicy="auto" height="100%" id="dgShipmentSearch" >
        
        </mx:AdvancedDataGrid>

      </mx:Application>

       

      This is my as file:

       

      //Getting the flight information from the database
      private function displayFlightInfo(flightList:ArrayCollection):void{
      var dataGridColumns:AdvancedDataGridColumn = new AdvancedDataGridColumn();
      var columns:Array = new Array();
        var headerArray:Array = flightList.getItemAt(0) as Array;
         for(var headerArrayIndex:int=0;headerArrayIndex<headerArray.length; headerArrayIndex++){
                       dataGridColumns = new AdvancedDataGridColumn();     
         var strHeaderName:String = headerArray[headerArrayIndex]as String;
           var strHeaderNameArray:Object = strHeaderName.split(",") as Array;
                         var headerName:String = strHeaderNameArray[0];
          trace("strHeaderName"+headerName);
          if(headerName != ""){
                           dataGridColumns.headerText=headerName;
                           dataGridColumns.resizable=true;
                           dataGridColumns.dataField=headerArrayIndex.toString();
                           columns.push(dataGridColumns);
                         }
                               }
                               var flightDataList:Object = flightList.removeItemAt(0) as Object;
                               trace("flightList="+flightList);

                           dgShipmentSearch.dataProvider=flightList;
                                         dgShipmentSearch.columns = columns; // setting columns to dataGrid.
          dgShipmentSearch.invalidateList();
                
         }
       

        • 1. Re: Advanced data grid columns not displayed properly in the page
          *Prashant Shelke* Level 4

          see the changes below as bold:


          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="absolute" creationComplete="initApp()">

          <!--
            Simple client to demonstrate runtime configuration of destinations.
            The "runtime-employee" destination is configured in
            EmployeeRuntimeRemotingDestination.java.
          -->

          <mx:Script source="ScriptProject.as" />
          /** no need to mention it explicitly by default it is auto*/
            <mx:AdvancedDataGrid lockedColumnCount="1" horizontalScrollPolicy="auto" verticalScrollPolicy="auto" height="100%" id="dgShipmentSearch" >
            
            </mx:AdvancedDataGrid>

          </mx:Application>

           

          This is my as file:

           

          //Getting the flight information from the database
          private function displayFlightInfo(flightList:ArrayCollection):void{
          var dataGridColumns:AdvancedDataGridColumn = new AdvancedDataGridColumn();
          var columns:Array = new Array();
            var headerArray:Array = flightList.getItemAt(0) as Array;
             for(var headerArrayIndex:int=0;headerArrayIndex<headerArray.length; headerArrayIndex++){
                           dataGridColumns = new AdvancedDataGridColumn();     
             var strHeaderName:String = headerArray[headerArrayIndex]as String;
               var strHeaderNameArray:Object = strHeaderName.split(",") as Array;
                             var headerName:String = strHeaderNameArray[0];
              trace("strHeaderName"+headerName);
              if(headerName != ""){
                               dataGridColumns.headerText=headerName;
                               dataGridColumns.resizable=true;
                               dataGridColumns.dataField=headerArrayIndex.toString();
                               columns.push(dataGridColumns);
                             }
                                   }
                                   var flightDataList:Object = flightList.removeItemAt(0) as Object;
                                   trace("flightList="+flightList);

                               dgShipmentSearch.dataProvider=flightList;
                                             dgShipmentSearch.columns = columns; // setting columns to dataGrid.

             dgShipmentSearch.dataProvider.refresh();
              dgShipmentSearch.validateNow();

                    
             }