0 Replies Latest reply on Apr 22, 2010 10:56 PM by flex5545

    Datagrid pagination problem (loading data from XML)

    flex5545
      hi all,
      I am very new to flex.
      I have written a code for simple pagination of grid but its not working.
      It is showing just a blank datagrid with column names and empty rows. It is not even showing the toggle bar. I am fetching the data from an XML.

      I am also using HTTPService.

       

      here is the code:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="onInit()"
      creationComplete="InitApp()"
      pageTitle="Employee Detail Information DataTable" xmlns:components="components.*">

       


      <mx:Script>
        <![CDATA[
        
        import mx.states.State;
        import mx.controls.dataGridClasses.DataGridColumn;
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;
       
        import mx.events.ItemClickEvent;
        import mx.controls.Button;
        import mx.controls.Alert;

        [Bindable]
        public var nav:ArrayCollection = new ArrayCollection();
        public var pageSize:uint = 2; //no of rows in a page
        public var navSize:uint = 5;  //size of toggle bar
        private var index:uint = 0;
        private var navPage:uint = 1;

        [Bindable]
        public var myData:ArrayCollection = new ArrayCollection();
        private var EmployeeHolderData:ArrayCollection;  
       
        protected function onInit():void
        {
         addEventListener("listenToLink",changeState);  
        }
        /////////////////
        private function InitApp():void
        {
         EMP.send();
         refreshDataProvider(index);
         createNavBar(Math.ceil(EmployeeHolderData.length/pageSize));
        }
        ////////////////////  
             protected function changeState(event:Event):void
        {
                this.currentState = 'formState';
               }
             
         private function displayAdd(item1:Object, col1:DataGridColumn):String
                {
                   return item1.Add.SNO + " " +item1.Add.SNM+","+item1.Add.CITY;
                }
           
        private function resultHandler(event:ResultEvent):void
        {
         EmployeeHolderData=event.result.Employees.Employee;
         
        }
       
        //////////////////////////////
        private function createNavBar(pages:uint = 1,set:uint = 0):void
        {
         nav.removeAll();
         for( var x:uint = 0; x < navSize; x++)
         {
          var pg:uint = x + set;
          nav.addItem({label: pg + 1,data: pg});
         }
        }

        private function navigatePage(event:ItemClickEvent):void
        {
         refreshDataProvider(event.item.data);
         /*
         createNavBar(Math.ceil(EmployeeHolderData.length/pageSize),event.item.data);
         if( event.item.data == 0 )
         {
          pageNav.selectedIndex = 0;
         }
         else
         {
          pageNav.selectedIndex = 2;
         }
         */
        }

        private function refreshDataProvider(start:uint):void
        {
         myData = new ArrayCollection( EmployeeHolderData.source.slice((start * pageSize),(start * pageSize) + pageSize) );
        }

        ///////////////////////////////// 
        
        ]]>
      </mx:Script>

       

      <mx:states>

       

        <mx:State name="formState">
         <mx:RemoveChild target="{dg1}"/>
         <mx:RemoveChild target="{panel1}"/>
         <mx:AddChild position="lastChild">
          <mx:Canvas width="694" height="464" x="132" y="36" >
           <mx:Label x="318" y="10" text="   Form" width="62" fontFamily="Arial" fontWeight="bold" fontSize="12" />
           <mx:VBox x="24" y="30" width="648" height="399"    >
              
               <mx:Label text=" Name:" />
               <mx:TextInput text="{myData.getItemAt(dg1.selectedIndex).Name.fn} {myData.getItemAt(dg1.selectedIndex).Name.ln}" width="258"/>
              
               <mx:Label x="177" y="122" text="Company:"/>
               <mx:TextInput x="260" y="120" text="{myData.getItemAt(dg1.selectedIndex).Company}" width="259"/>
              
               <mx:Label x="161" y="148" text="Designation:" width="89"/>
            <mx:TextInput x="259" y="146" text="{myData.getItemAt(dg1.selectedIndex).Designation}" width="260"/>
           
            <mx:Label x="186" y="174" text="Address:"/>
            <mx:TextInput text="{myData.getItemAt(dg1.selectedIndex).Add.SNO} {myData.getItemAt(dg1.selectedIndex).Add.SNM} {myData.getItemAt(dg1.selectedIndex).Add.CITY}" width="259"/>
            
            <mx:Label x="177" y="200" text="Phone No:"/>
            <mx:TextInput x="259" y="198" text="{myData.getItemAt(dg1.selectedIndex).phone}" width="260"/>
           
            <mx:Label x="200" y="226" text="Email:"/>
            <mx:TextInput x="259" y="225" text="{myData.getItemAt(dg1.selectedIndex).email}" width="261"/>
           
            <mx:Label x="141" y="252" text="Monthly Income:"/>
            <mx:TextInput x="259" y="254" text="{myData.getItemAt(dg1.selectedIndex).MI}" width="263"/>
           
            <mx:Button label="Back" click="currentState=''"/>
           </mx:VBox>
          </mx:Canvas>
         </mx:AddChild>
        </mx:State>
      </mx:states>

       

      <mx:HTTPService id="EMP" url="Data/EMP.xml" result="resultHandler(event)"/>

       

      <mx:Panel title="Employees Data Information"  x="63" y="43" id="panel1">

       

         <mx:VBox verticalGap="0">

        <mx: DataGrid  id="dg1" dataProvider="{myData}">
         <mx:columns>
          <mx:DataGridColumn headerText="Name" editable="false"  width="150" itemRenderer="components.LinkNameRenderer">
          </mx:DataGridColumn>

       

          <mx:DataGridColumn dataField="Company" headerText="Company" width="70"/>
          <mx:DataGridColumn dataField="Designation" headerText="Designation" width="80"/>
          <mx:DataGridColumn dataField="email" headerText="email" width="150"/>
          <mx:DataGridColumn dataField="phone" headerText="Ph No"/>
          <mx:DataGridColumn dataField="Add" headerText="Address" labelFunction="displayAdd"/> 
          <mx:DataGridColumn dataField="MI" headerText="Monthly Income" width="105"/>
         </mx:columns>
        </mx:DataGrid>
        <mx:ToggleButtonBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}" width="{dg1.width}">
         </mx:ToggleButtonBar>
         </mx:VBox>
       
      </mx:Panel>

       

      </mx:Application>

       

       

       

       

       

       

      __________________________XML File_________

       

      <?xml version="1.0" encoding="UTF-8"?>
        <Employees>

        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Surname</ln>
        </Name>
        <Company>MBT</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$350</MI>
      <Add>
        <SNO>22</SNO>
        <SNM>K.K.Mitra Rd</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Roy</ln>
        </Name>
        <Company>CTS</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$500</MI>
        <Add>
        <SNO>18</SNO>
        <SNM>B.D.Road</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Surname</ln>
        </Name>
        <Company>IBM</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$400</MI>
        <Add>
        <SNO>05</SNO>
        <SNM>Dairy</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Surname</ln>
        </Name>
        <Company>MBT</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$350</MI>
        <Add>
        <SNO>22</SNO>
        <SNM>K.K.Mitra Rd</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Surname</ln>
        </Name>
        <Company>IBM</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$400</MI>
        <Add>
        <SNO>05</SNO>
        <SNM>Dairy</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Surname</ln>
        </Name>
        <Company>IBM</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$400</MI>
        <Add>
        <SNO>05</SNO>
        <SNM>Dairy</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Surname</ln>
        </Name>
        <Company>IBM</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$400</MI>
        <Add>
        <SNO>05</SNO>
        <SNM>Dairy</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Surname</ln>
        </Name>
        <Company>IBM</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$400</MI>
        <Add>
        <SNO>05</SNO>
        <SNM>Dairy</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Surname</ln>
        </Name>
        <Company>IBM</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$400</MI>
        <Add>
        <SNO>05</SNO>
        <SNM>Dairy</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        <Employee>
        <Name>
        <fn>Nname</fn>
        <ln>Surname</ln>
        </Name>
        <Company>IBM</Company>
        <Designation>ELT</Designation>
        <post>manager</post>
        <email>abc@gmail.com</email>
        <phone>4444</phone>
        <MI>$400</MI>
        <Add>
        <SNO>05</SNO>
        <SNM>Dairy</SNM>
        <CITY>NY</CITY>
        </Add>
        </Employee>
       
        </Employees>