2 Replies Latest reply on Feb 6, 2010 8:59 PM by archemedia

    Binding dataGrid in flex 3

    Prash_10

      Hi all,

       

      Can any body help me to bing dataGrid in flex 3. I am creating flex application with .net and sql server. I wish to bind dataGrid which I am returning from list object in dotnet. Please refer the following code.

       

       

       

       

      ----------------------------------- CODE WRITTEN IN SERVICE.CS ------------------------------------------

      using System;
      using System.Collections;
      using System.Web;
      using System.Web.Services;
      using System.Web.Services.Protocols;
      using System.Web.Script.Services;
      using System.Collections.Generic;
      using System.Text;
      using System.Data;
      using System.Data.SqlClient;

       

      [WebService(Namespace = "http://tempuri.org/")]
      [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
      public class Service : System.Web.Services.WebService
      {

       

          public static string str = "";
          private const string connectionString = "Data Source=ADMIN\\SQLEXPRESS;Initial Catalog=Demo;Integrated Security=True";
          public static string orderby = "";
          DataTable dt = new DataTable();
          ProcessData pd = new ProcessData();
          Insert Ins = new Insert();

       

          public Service ()
          {

       

          }

       

          [WebMethod]
          public string HelloWorld()
          {
              return "Hello World";
          }

       


          [WebMethod]
          public void InsertRecord(string fname, string lname)
          {
              pd.SelectProcedureWithId("InsertData", Ins.InsertData(fname, lname));
          }

       


          [WebMethod]
          [ScriptMethod]
          public List<Data> GetDataSet()
          {
              List<Data> list = new List<Data>();

       

              DataTable dt = pd.SelectProcedure("StoredProcedure1");
              foreach (DataRow dr in dt.Rows)
              {
                  Data objimg = new Data();
                  objimg.Fname = dr["First_Name"].ToString();
                  objimg.Lname = dr["Last_Name"].ToString();
                  list.Add(objimg);
              }
              return list;
          }
      }

      -----------------------------------------------------------

       

       

      --------------------------------------------CODE WRITTEN IN HELPER.AS IN FLEX------------------------------

       

      // ActionScript file
          import mx.collections.ArrayCollection;
          import mx.controls.Alert;
          import mx.events.CloseEvent;
          import mx.events.DataGridEvent;
          import mx.rpc.AsyncToken;
          import mx.rpc.events.FaultEvent;
          import mx.rpc.events.ResultEvent;
          import mx.collections.XMLListCollection;
         
         [Bindable]
         public var dataArray:ArrayCollection = new ArrayCollection();
        
         private function initApp():void
         {
             // Initialize and load the web service
             websvc.loadWSDL();
             websvc.GetDataSet();
         }
        
        private function faultHandler(event:FaultEvent):void
        {
            Alert.show(event.fault.message, "Application Error");
        }
       
        public function InsertItem():void
         {
             websvc.InsertRecord(uname.text, lname.text);
         }
        
         private function GetDataSetHandler(e:ResultEvent):void
         {
             // Populate dataArray with dataset table
             //dataArray = e.result.Tables.contacts.Rows;
             dataArray = e.result.;
             //dataArray = e;

            // PLEASE HELP ME WHAT SHOULD BE THE CODE HERE.........................................?
         }

      --------------------------------------------------

       

       

      ------------------------------------------------ CODE IN THE APPLICATION.MXML FILE------------------------------------------------

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
          <mx:Script source="Helper.as"/>
      <mx:WebService id="websvc" wsdl="http://localhost:3008/WebSite4/Service.asmx?wsdl" showBusyCursor="true" fault="faultHandler(event)">
              <mx:operation name="GetDataSet" result="GetDataSetHandler(event)"/>
      </mx:WebService>
         
          <mx:Script>
              <![CDATA[
                  import mx.controls.Alert;
              import mx.rpc.events.FaultEvent;
              import mx.rpc.events.ResultEvent;
             
                  private function GetDataSet(event:ResultEvent):void {
      // Databind data from webservice to datagrid
      dataGrid.dataProvider = event.result;
      }
              ]]>
          </mx:Script>
          <mx:TextInput x="116" y="10" id="uname"/>
          <mx:Label x="73" y="12" text="Label"/>
          <mx:TextInput x="116" y="40" id="lname"/>
          <mx:Button x="116" y="70" label="Button" id="btnSubmit" click="InsertItem()"/>

       

         
          <mx:DataGrid id="dataGrid" rowCount="10" editable="true" resizableColumns="true"  x="116" y="110">
              <mx:columns>
                  <mx:DataGridColumn headerText="First Name" dataField="First_Name"/>
                  <mx:DataGridColumn headerText="Last Name" dataField="Last_Name"/>
              </mx:columns>
          </mx:DataGrid>
         
      </mx:WindowedApplication>

      ----------------------------------------------------

        • 1. Re: Binding dataGrid in flex 3
          Scott R. Hamilton Level 1

          I would use:

           

          dataGrid.dataProvider = event.result.results.record;

           

          at the point indicated by your annotation.

           

          Also, it appears that there are two event handlers for the data return:


            
             private function GetDataSetHandler(e:ResultEvent):void
           
             private function GetDataSet(event:ResultEvent):void {


           

          If you look at the event structure in the debugger, you will see how the data is returned.

           

          Also, make sure that the filed names being returned from your database and the

           

          DataGridColumn dataField="xxx" properties coincide exactly.

           

           

          I've not been around flex all that long so don't consider this to be the last answer to your

          question but this solution has worked for me.

           

           

          Scott

          • 2. Re: Binding dataGrid in flex 3
            archemedia Level 4

            Scott is right, get rid of the GetDataSet function to start.

             

            Then:

             

            - Please provide a model of how your data is returned form the service.

            - Don't use code like: myDataGrid.dataProvider = event.result....

            Instead, put the result in an ArrayCollection and bind that ArrayCollection to your grid:

             

            ....

            myArrayCollection = event.result as ArrayCollection (depending on what's coming back from the server)

             

            ...

            <mx:DataGird dataProvider = "{myArrayCollection}"/>

             

            Dany