4 Replies Latest reply on Jan 14, 2008 5:55 PM by vij010

    List with a DataGrid

    vij010 Level 1
      Hi,

      I am just rephrasing the same post in a different way. Is it possible to have a list renderer on a datagrid ?, I want to show a list of items when I click on a column of the datagrid. And I want the selection to be updated on the grid

      I have the MXML ready for the grid and I also have the renderer component also done,. I don't know how to call that from within the datagrid.

      Suppose I have the component, is this the way to call it ?

      <mx:DataGridColumn headerText="Status" dataField="active" itemEditor="mx.controls.List"
      editorDataField="value" rendererIsEditor="true"/>

      or should I use
      <mx:DataGridColumn headerText="Status" dataField="active" itemEditor="component/mycomponent"
      editorDataField="value" rendererIsEditor="true"/>

      I have been searching the help, should I use IDropInListItemRenderer interface ? they show it for the other controls and not list...


      Any help will be appreciated.

      Thanks!
        • 1. Re: List with a DataGrid
          atta707 Level 2
          If by "list of items" you mean a dropdown, yes, it is absolutely to show a dropdown list in in the grid. otherwise, please explain what do you mean by "list of items".

          You assign a item renderer to the column level like you've done in the second snippet above.

          what's the problem you're facing?

          Is it possible for you show a bare minimum working application with the problem.

          ATTA
          • 2. Re: List with a DataGrid
            vij010 Level 1
            Hi,

            Here's the whole application.... this is the main XML...

            [start]
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="466" height="390.87976">
            <mx:Script>
            <![CDATA[
            import mx.accessibility.AlertAccImpl;
            import mx.controls.Alert;
            import mx.events.DataGridEvent;
            import mx.events.ListEvent;
            import mx.controls.List;
            import component.listcompo;

            // function to detect mouse clicks on the grid
            public function checkedit(event:DataGridEvent):void
            {
            if(event.dataField=="active")
            {
            event.preventDefault()
            Alert.show('This section is not editable,please select from the list','Alert From Flex');
            }
            }
            private function checkit(Myevent:Event):void
            {
            mydg.invalidateDisplayList()
            }



            ]]>
            </mx:Script>
            <mx:XMLList id="myxmldata">
            <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>John Coe</name>
            <phone>3433-353-646-465</phone>
            <email>rer@ffe.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Fana Coh</name>
            <phone>5535-7575-2424</phone>
            <email>f4fefe@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Gig Cog</name>
            <phone>32234-42424-64646</phone>
            <email>gig@gt.com</email>
            <active>true</active>
            </employee>
            </mx:XMLList>
            <mx:DataGrid x="40" y="54" id="mydg" dataProvider="{myxmldata}" enabled="true"
            editable="true" itemEditBeginning="checkedit(event)" change="checkit(event)">
            <mx:columns>
            <mx:DataGridColumn headerText="Full Name" dataField="name"/>
            <mx:DataGridColumn headerText="Phone" dataField="phone"/>
            <mx:DataGridColumn headerText="Email" dataField="email"/>
            <mx:DataGridColumn headerText="Status" dataField="active" itemEditor="component.listcompo"/>
            </mx:columns>
            </mx:DataGrid>
            </mx:Application>
            [end]

            And the renderer....

            [start]
            <?xml version="1.0" encoding="utf-8"?>
            <mx:List xmlns:mx=" http://www.adobe.com/2006/mxml">
            <mx:String>1.True</mx:String>
            <mx:String>2.False</mx:String>
            <mx:String>3.Not Required</mx:String>
            </mx:List>
            [end]



            This simple appplication will show a datagrid with data in it, spread accross 3 columns. When I click on a cell on under the Status column, I want the renderer to display the list from where I can choose what I need. But when I click on the column titled Status, I don't get the list appearing....

            Where is the problem ? I know it's something I missed.

            Thanks so much!
            • 3. Re: List with a DataGrid
              atta707 Level 2
              Here is your new 'list' component:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:ComboBox xmlns:mx=" http://www.adobe.com/2006/mxml">
              <mx:dataProvider>
              <mx:String>1.True</mx:String>
              <mx:String>2.False</mx:String>
              <mx:String>3.Not Required</mx:String>
              </mx:dataProvider>
              </mx:ComboBox>

              secondly,

              public function checkedit(event:DataGridEvent):void
              {
              if(event.dataField=="active") <-- what is this?
              {
              event.preventDefault()
              Alert.show('This section is not editable,please select from the list','Alert From Flex');
              }

              the if condition in this method would always be true for status column! and event.preventDefault() would keep dropdown to appear. You need to change it to correct condition. meawhile, just comment these two line within the if block and to see it in action.

              Lastly, whatever you're trying to do here doesn't make much sense!

              private function checkit(Myevent:Event):void
              {
              mydg.invalidateDisplayList()
              }

              Hope this helps.

              ATTA
              • 4. Re: List with a DataGrid
                vij010 Level 1
                Hi,

                After much work I got it finally working. Thanks to all who helped. But I feel the help is not really organized....I had to go through a lot to get what I wanted....

                Thanks again for putting up with me....