4 Replies Latest reply on Jun 29, 2010 1:44 PM by bocode3

    adding a new row in between existing rows of datagrid

    bocode3

      Hello All,

       

      I'm noob and trying to create a custom datagrid. Here is my code (am working in FB4/flex 3.5):

       

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

      <?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" minWidth="955" minHeight="600"

         creationComplete="employeeService.send()">

      <fx:Script>

      <![CDATA[

      import mx.controls.Alert;

      import mx.events.ListEvent;

       

      private function addRow(event:ListEvent):void{

      if(event.columnIndex==0){

       

      }

      }

      ]]>

      </fx:Script>

      <fx:Declarations>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

       

      <s:HTTPService id="employeeService" url="http://abc.com:7500/emp.xml"/>

      </fx:Declarations>

      <mx:DataGrid  dataProvider="{employeeService.lastResult.employees.employee}" width="300" editable="true"

      itemClick="addRow(event);">

      <mx:columns>

      <mx:DataGridColumn headerText="Reportees" editable="false" >

      <mx:itemRenderer>

      <fx:Component>

      <mx:HBox>

      <mx:Image source="http://abc.com:7500/add.png"/>

      <s:Label text="{data.loginid}"/>

       

      </mx:HBox>

      </fx:Component>

      </mx:itemRenderer>

      </mx:DataGridColumn>

      <mx:DataGridColumn headerText="Projects" editable="false">

      <mx:itemRenderer>

      <fx:Component>

      <s:MXDataGridItemRenderer>

      <s:DropDownList dataProvider="{data.projects.project}" labelField="name"/>

      </s:MXDataGridItemRenderer>

      </fx:Component>

      </mx:itemRenderer>

      </mx:DataGridColumn>

      </mx:columns>

       

      </mx:DataGrid>

      </s:Application>

      --------------------------
      The remote xml is as follows:
      ------------------------------
      <?xml version="1.0" ?>
      <employees>
      <employee>
        <loginid>rambo</loginid>
        <name>ramboman</name>
        <projects>
         <project>
          <name>ATN</name>
          <id>34</id>
         </project>
         <project>
          <name>DTN</name>
          <id>43</id>
         </project>
         <project>
          <name>XTN</name>
          <id>54</id>
         </project>
        </projects>
        </employee>
      </employees>
      ---------------------
      I've two columns in the datagrid, the first column has the login name with a small image of "plus" sign. The second column has a drop down list of projects associated with each login id.
      So currently i've enabled click only for the first column cells and when somebody clicks a cell in this column, i would like to add a new row just below the clicked column. This row should contain the same dropdownlist in the second column and empty text in the first column.
      How do i do this?
      Thanks in advance for the help,
      Bo

        • 1. Re: adding a new row in between existing rows of datagrid
          VRPDeveloper Level 3

          You can refer the following link which will give you similar kind of functionality done...

           

          http://www.switchonthecode.com/tutorials/adding-dynamic-rows-to-flex-datagrid

          1 person found this helpful
          • 2. Re: adding a new row in between existing rows of datagrid
            bocode3 Level 1

            Hello VRPDeveloper,

             

            Thanks for looking at my current problem. I've achieved the solution to insert a new row in between existing rows. Now the problem is i've created mxml component that needs to be inserted into a new row. The component is simple and here is the code:

             

            Component (wkmnth.mxml):

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

            <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

            xmlns:s="library://ns.adobe.com/flex/spark"

            xmlns:mx="library://ns.adobe.com/flex/mx"

            autoDrawBackground="true">

             

            <s:NumericStepper minimum="0" maximum="100"/>

             

            </s:MXDataGridItemRenderer>

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

             

            DataGridCode:

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

            <?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" minWidth="955" minHeight="600"

               creationComplete="employeeService.send()">

            <fx:Script>

            <![CDATA[

            import components.EmpRowClass;

            import components.empname;

            import components.empprojrow;

            import components.weekMonth;

            import components.wkmnth;

             

            import mx.controls.Alert;

            import mx.events.ListEvent;

             

            import spark.layouts.RowAlign;

             

            private function addRow(event:ListEvent):void{

            if(event.columnIndex==0){

                     empdg.dataProvider.addItemAt(new EmpRowClass(new empname(),new empprojrow(), new wkmnth(), new wkmnth(), new wkmnth(), new wkmnth()), event.rowIndex+1);

            }

            }

            ]]>

            </fx:Script>

            <fx:Declarations>

            <!-- Place non-visual elements (e.g., services, value objects) here -->

             

            <s:HTTPService id="employeeService" url="http://abc.com/emp.xml"/>

            </fx:Declarations>

            <mx:DataGrid  id="empdg"

              dataProvider="{employeeService.lastResult.employees.employee}"

              width="40%" editable="true"

            itemClick="addRow(event);">

            <mx:columns>

            <mx:DataGridColumn headerText="Reportees" editable="false" itemRenderer="components.empnamerow" width="40"/>

            <mx:DataGridColumn headerText="Projects" editable="false"  width="30"/>

            <mx:DataGridColumn headerText="Jul,Wk1" width="27"  rendererIsEditor="true"/>

            <mx:DataGridColumn headerText="Jul,Wk2" width="27"  rendererIsEditor="true"/>

            <mx:DataGridColumn headerText="Jul,Wk3" width="27"  rendererIsEditor="true"/>

            <mx:DataGridColumn headerText="Jul,Wk4" width="26"  rendererIsEditor="true"/>

            </mx:columns>

             

            </mx:DataGrid>

            </s:Application>

            empname, empprojrow are components are other simple components. But my problem is why does the numericStepper does not come in the new row?
            Can you please have a look into it?
            Thank you for your help,
            Bo

            • 3. Re: adding a new row in between existing rows of datagrid
              VRPDeveloper Level 3

              Where are you assigning wkmnth renderer in datagrid ... I think you have not assigned it anywhere so it is not coming

               

               

              <mx:DataGridColumn headerText="Jul,Wk1" width="27"  rendererIsEditor="true"

              itemRenderer="myComponents.wkmnth"

              />

              • 4. Re: adding a new row in between existing rows of datagrid
                bocode3 Level 1

                if i assign itemrenderer property then i'll get numeric stepper for all the columns (from 3rd to 6th column). I want the numericstepper to appear only on the new rows. That is why in the addRow() method, am adding a new row with wkmnth method calls but it does not seem to work.

                 

                any ideas?