2 Replies Latest reply on Nov 26, 2011 5:32 AM by ProcessEndNow

    Datagrid display issue

    ProcessEndNow

      Good morning!

      I tried posting this last night and it went slightly wrong, apologies

       

      Right, this should be simple, I know what I am doing wrong, I just dont know how to do it right, so here is the complete code, and I would like some advice please.

       

      Flash Builder 4.5, new project (Flex Project), add Data source, XML, local file, here is the file:

       

      <?xml version="1.0" encoding="utf-8" ?>
      <Categories>
       <Category>
        <CategoryName>Cat 1</CategoryName>
        <CategoryLink>http://www.google.com</CategoryLink>
        <CategoryData>
         <CategoryDescription>This is the description of category 1</CategoryDescription>
         <CategoryHeader>My Category Title</CategoryHeader>
        </CategoryData>
       </Category>
      
       <Category>
        <CategoryName>Cat 2</CategoryName>
        <CategoryLink>http://www.bing.com</CategoryLink>
        <CategoryData>
         <CategoryDescription>This is the description of category 2</CategoryDescription>
         <CategoryHeader>My Category Title</CategoryHeader>
        </CategoryData>
       </Category>
      
       <Category>
        <CategoryName>Cat 3</CategoryName>
        <CategoryLink>http://www.yahoo.com</CategoryLink>
        <CategoryData>
         <CategoryDescription>This is the description of category 3</CategoryDescription>
         <CategoryHeader>My Category Title</CategoryHeader>
        </CategoryData>
       </Category>
      
       <Category>
        <CategoryName>Cat 4</CategoryName>
        <CategoryLink>http://www.microsoft.com</CategoryLink>
        <CategoryData>
         <CategoryDescription>This is the description of category 4</CategoryDescription>
         <CategoryHeader>My Category Title</CategoryHeader>
        </CategoryData>
       </Category>
      </Categories>
      

       

      And here is the complete flex application code, it is 2 datagrids, both bound to the same data source. The top one remains editable, however in the bottom one I cannot edit the 3rd field, I get the following error:

       

      ReferenceError: Error #1069: Property CategoryData.CategoryDescription not found on valueObjects.Category_type and there is no default value.
       at spark.components.gridClasses::GridItemEditor/set data()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\gridClasses\GridItemEditor.as:176]
       at spark.components.gridClasses::DataGridEditor/http://www.adobe.com/2006/flex/mx/internal::createItemEditor()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\gridClasses\DataGridEditor.as:608]
       at spark.components.gridClasses::DataGridEditor/setEditedItemPosition()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\gridClasses\DataGridEditor.as:286]
       at spark.components.gridClasses::DataGridEditor/dataGrid_gridItemEditorSessionStartingHandler()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\gridClasses\DataGridEditor.as:1204]
       at flash.events::EventDispatcher/dispatchEventFunction()
       at flash.events::EventDispatcher/dispatchEvent()
       at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:13128]
       at spark.components.gridClasses::DataGridEditor/startItemEditorSession()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\gridClasses\DataGridEditor.as:798]
       at spark.components::DataGrid/startItemEditorSession()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\DataGrid.as:3803]
       at spark.components.gridClasses::DataGridEditor/grid_gridMouseUpHandler()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\gridClasses\DataGridEditor.as:1379]
       at flash.events::EventDispatcher/dispatchEventFunction()
       at flash.events::EventDispatcher/dispatchEvent()
       at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:13128]
       at spark.components::Grid/dispatchGridEvent()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\Grid.as:4038]
       at spark.components::Grid/grid_mouseDownDragUpHandler()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\Grid.as:3883]
       at Function/<anonymous>()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\utils\MouseEventUtil.as:96]
      

       

      Flex code:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            xmlns:categories="services.categories.*"
            width="410" height="300">
       <fx:Script>
        <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         
         protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
         {
          getDataResult.token = categories.getData();
         }
         
        ]]>
       </fx:Script>
       <fx:Declarations>
        <s:CallResponder id="getDataResult"/>
        <categories:Categories id="categories"
                fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                showBusyCursor="true"/>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
       </fx:Declarations>
       <s:DataGrid id="dataGrid" x="5" y="9" width="400"
          creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
          requestedRowCount="4">
        <s:columns>
         <s:ArrayList>
          <s:GridColumn dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
          <s:GridColumn dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
          <s:GridColumn dataField="CategoryData" editable="false" headerText="CategoryData"></s:GridColumn>
         </s:ArrayList>
        </s:columns>
        <s:typicalItem>
         <fx:Object label="label1" CategoryData="CategoryData1" CategoryLink="CategoryLink1"
              CategoryName="CategoryName1" value="value1"></fx:Object>
        </s:typicalItem>
        <s:AsyncListView list="{getDataResult.lastResult}"/>
       </s:DataGrid>
       <s:DataGrid id="dataGrid2" x="5" y="142" width="400" editable="true" requestedRowCount="4">
        <s:columns>
         <s:ArrayList>
          <s:GridColumn dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
          <s:GridColumn dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
          <s:GridColumn dataField="CategoryData.CategoryDescription" headerText="CategoryDescription"></s:GridColumn>
         </s:ArrayList>
        </s:columns>
        <s:typicalItem>
         <fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
              CategoryName="CategoryName1"></fx:Object>
        </s:typicalItem>
        <s:AsyncListView list="{getDataResult.lastResult}"/>
       </s:DataGrid>
      </s:Application>
      

       

       

      I know the problem is the line that reads: <s:GridColumn dataField="CategoryData.CategoryDescription" headerText="CategoryDescription"></s:GridColumn>, but I do not know how to display the category description in the field and keep it editable, I was looking at the labelFunction parameter, but not sure how that will work.

       

      Please advise, thanks

      Shaine

        • 1. Re: Datagrid display issue
          ProcessEndNow Level 1

          updated code, but I still cannot access the CategoryDescription data that I need

           

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:categories="services.categories.*"
                width="410" height="300">
          <fx:Script>
            <![CDATA[
             import mx.controls.Alert;
             import mx.events.FlexEvent;
             
             
             protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
             {
              getDataResult.token = categories.getData();
             }
             protected function getDesc(item:Object, column:GridColumn):String
             {
              var t:String = item.CategoryData;
              return t;
             }
            ]]>
          </fx:Script>
          <fx:Declarations>
            <s:CallResponder id="getDataResult"/>
            <categories:Categories id="categories"
                    fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                    showBusyCursor="true"/>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <s:DataGrid id="dataGrid" x="10" y="10" width="390"
              creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
              requestedRowCount="4">
            <s:columns>
             <s:ArrayList>
              <s:GridColumn dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
              <s:GridColumn dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
              <s:GridColumn dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
             </s:ArrayList>
            </s:columns>
            <s:typicalItem>
             <fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
                  CategoryName="CategoryName1"></fx:Object>
            </s:typicalItem>
            <s:AsyncListView list="{getDataResult.lastResult}"/>
          </s:DataGrid>
          <s:DataGrid id="dataGrid2" x="10" y="147" width="390" editable="true" requestedRowCount="4">
            <s:columns>
             <s:ArrayList>
              <s:GridColumn dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
              <s:GridColumn dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
              <s:GridColumn labelFunction="getDesc" headerText="CategoryData"></s:GridColumn>
             </s:ArrayList>
            </s:columns>
            <s:typicalItem>
             <fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
                  CategoryName="CategoryName1"></fx:Object>
            </s:typicalItem>
            <s:AsyncListView list="{getDataResult.lastResult}"/>
          </s:DataGrid>
          </s:Application>
          

           

          I am very confused as to what to do to get the data I want to display, any pointers appreciated.

           

          Shaine

          • 2. Re: Datagrid display issue
            ProcessEndNow Level 1

            I will rephrase the question, it seems I may not have actually asked anything !

             

            Using the XML file detailed above, I wish to display a datagrid with the following columns:

             

            CategoryName, CategoryLink and CategoryData.CategoryDescription

             

            All of these columns must have the editable tag set and I need to be able to edit the data. Specifically I need to able to edit the CategoryDescription field because I want to use this information somewhere else.

             

            I have tried to change the return type from 'CategoryData_type' but FB will not let me.

            As you can see from the first example I know how to get the data to display but the null reference error is killing me. Ideally I would like to create an Object from CategoryData and reference it through CategoryData.CategoryDescription.

             

            I hope that makes it a little clearer, please help! :s

             

            Shaine