6 Replies Latest reply on Jan 21, 2011 3:33 PM by jlanpheer

    How to customize a null value in a DataGrid.

    jlanpheer

      Hi-

       

      I'm new to Flex and learning, so bear with me....  I have constructed a DataGrid based on a dataProvider and have gotten it to the point where the DataGrid is populating data correctly.  Now to the details of presentation......  There are numeric values in my grid, some currency like this:

      <fx:DataGridColumn dataField="THIS_AMOUNT" headerText="Amount" headerWordWrap="true" textAlign="right" formatString="currency(2)" />

      and others are just a plain ol' number like (this value is a "NUMBER" in the database):

      <mx:DataGridColumn dataField="CYCLE_NUMBER" headerText="Cycle Number" headerWordWrap="true" width="75" editable="false"/>

       

      The problem is that when the AMOUNT field is null (empty) in the database, it displays as "$0.00" in the data grid, which is not desireable and is potentially misleading.  The same for the CYCLE_NUMBER example above, except it displays as '0', again potentially misleading.

       

      I am trying to figure out how to override this behavior and display nothing in the columns of the DataGrid where the values are null (this only seems to be a problem for numeric database values).  I've discovered that there is a nullItemRenderer property to a DataGridColumn, but i'm having a hard time find examples of how it is used and i'm wondering if i am barking up the wrong tree or not.

       

      Could someone please show me a code snippet that shows me how to do this "properly"?  Is nullItemRenderer the way to go, is or there (again) a much simpler solution than that?

      cheers and thanx,

      jim.

        • 1. Re: How to customize a null value in a DataGrid.
          Lee Burrows Level 4

          hi

           

          you can use labelFunction to display custom info (in your case, an empty cell). see: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/listClasses /ListBase.html#labelFunction

           

          eg:

           

          <mx:DataGridColumn dataField="CYCLE_NUMBER" headerText="Cycle Number" headerWordWrap="true" width="75" editable="false" labelFunction="myLabelFunction" />

           

          and in a script block add:

           

          private function myLabelFunction(item:Object, column:DataGridColumn):String

          {

               if (item.CYCLE_NUMBER==null)

                    return "";

               else

                    return String(item.CYCLE_NUMBER);

          }

          1 person found this helpful
          • 2. Re: How to customize a null value in a DataGrid.
            jlanpheer Level 1

            Thank you, this helps some, but i have two additional questions:

             

            As a trial, i first tried customizing your suggestions into my code and got the following error:

            "Type was not found or was not a compile-time constant: DataGridColumn"

             

            The error seems straightforward to me to fix, but in my script block i already DO have the following import:

            import mx.controls.dataGridClasses.DataGridColumn;

             

            I then tried cutting/pasting your example into my code (with slight mods for my code) before anything else, with the same error.  Using your example, the relevant parts of my "script" code look like:

             

            <mx:Script>
                 <![CDATA[    

                 import mx.controls.dataGridClasses.DataGridColumn;

                 // and other stuff of course.....

             

                 private function nullLabelFunction(item:Object, column:DataGridColumn):String {
                       if (item.CYCLE_NUMBER==null)
                            return "";
                       else
                            return String(item.CYCLE_NUMBER);

                 }

            </mx:Script>

             

            --

             

            It leads me to another question, which is probably also a fairly simple one.  Can i write ONE label function to handle null values for ALL the values in the DataGrid and call it for each one?  This is what i think it should look something like:

             

            <mx:DataGridColumn dataField="CYCLE_NUMBER" headerText="Cycle Number" headerWordWrap="true" width="75" editable="false"          labelFunction="nullLabelFunction" />

             

            <mx:DataGridColumn dataField="ANOTHER_NUMBER" headerText="Another Number" headerWordWrap="true" width="75" editable="false"          labelFunction="nullLabelFunction" />

             

            and in the script (and this is the part where i don't know the correct syntax)

             

            <mx:Script>
                 <![CDATA[    

                 import mx.controls.dataGridClasses.DataGridColumn;

                 // and other stuff of course.....

             

                 private function nullLabelFunction(item:Object, column:DataGridColumn):String {
                      if (??this.current_column_value??==null)
                           return "";
                      else
                           return String(??this.current_column_value??);

                 }

            </mx:Script>

             

            cheers,

            Jim Lanpheer

            • 3. Re: How to customize a null value in a DataGrid.
              Flex harUI Adobe Employee

              What version of Flex are you using?  The import statement should cause the

              error to go away.

               

              You would use item[column.dataField] in your labelFunction

              • 4. Re: How to customize a null value in a DataGrid.
                jlanpheer Level 1

                I am using 3.3 currently.  We haven't upgraded to 4 yet.  Does that tell you anything useful?  If i can get this compiler error to go away, i'll try your suggestion.

                cheers,

                jim.

                • 5. Re: How to customize a null value in a DataGrid.
                  Flex harUI Adobe Employee

                  Yeah, it tells me there is no way I can think of why you are getting the

                  error.

                   

                  Try copying that code into a new project.

                  • 6. Re: How to customize a null value in a DataGrid.
                    jlanpheer Level 1

                    OK, i found the compile problem.  In the DataGrid, i was also using columns that were using some classes that were Farata Systems' extensions of DataGridColumn and i needed to fully reference the specific class as in:

                     

                    <mx:Script>
                        <![CDATA[

                         import mx.controls.dataGridClasses.DataGridColumn;

                         import com.farata.controls.dataGridClasses.DataGridColumn;

                     

                     

                         private function nullValueLabelFunction(item:Object, column:mx.controls.dataGridClasses.DataGridColumn):String

                         {

                           if (item[column.dataField] == 0)
                                   return "";
                           else
                                   return item[column.dataField];

                         }

                    ]]>
                    </mx:Script>

                     

                    to get it to compile.  I did get it to work using the standard DataGridColumn, but it still doesn't quite work right with the Farata Systems' version (they have some currency formatters that i want to use).  I will take this up with them.  Thank you for the help!

                    cheers,

                    Jim Lanpheer