8 Replies Latest reply on Mar 29, 2008 12:29 PM by Brent Wientjes

    DataGrid DataTipFunction

    Brent Wientjes
      I am trying to have a varying datafield as a datatip source (unique field for each column). I see the Adobe examples but they all assume a single datatip source. An example would be a spreadsheet with additional information per cell. I wish to have a custom datatip appearance and place additional information elsewhere on the web page. I do not see a way to tell the function - return item.datatipfield; where datatipfield is defined by each datagridcolumn. Any help would be greatly appreciated.
        • 1. Re: DataGrid DataTipFunction
          riesvantwisk
          properly you need to create a custom renderer and in that custom renderer decide what tooltip to show.

          Ries
          • 2. DataGrid DataTipFunction
            Sreenivas R Adobe Employee
            DataGridColumn has dataTipField and dataTipFunction properties. Have you tried using them?
            • 3. Re: DataGrid DataTipFunction
              Brent Wientjes Level 1
              Yes, I am trying to write a custom datatip function. The part that I can not figure out is how to allow a general purpose renderer pick the appropriate fields. None of the examples I have seen have been generic. They all know there is only 1 field of interest in the grid and uniquely identifiy it in the routine. I would like to know how to select the field assigned to each column of the grid and then apply the logic to it. This does not work but something like
              label.text = data{field} is the type of thing I believe it wants but this is not the correct way of expressing it.

              Any simple code examples would be great!
              Tks,
              Brent
              • 4. Re: DataGrid DataTipFunction
                Sreenivas R Adobe Employee
                Here is a sample. Let me know whether it fits your purpose or you were looking for something else.

                <mx:Script>
                <![CDATA[
                private var inputData:Array = [
                { name:"Sreenivas", nameComment:"Sreenivas Ramaswamy", email:"gmail", emailComment:"sreenivas.ramaswamy@gmail.com"},
                { name:"Sameer", nameComment:"Sameer Bhat", email:"gmail", emailComment:"prosameer@gmail.com"},
                { name:"Satish", nameComment:"Satish TJ", email:"gmail", emailComment:""}
                ];

                ]]>
                </mx:Script>

                <mx:DataGrid dataProvider="{inputData}" >
                <mx:columns>
                <mx:DataGridColumn dataField="name" dataTipField="nameComment" showDataTips="true"/>
                <mx:DataGridColumn dataField="email" dataTipField="emailComment" showDataTips="true"/>
                </mx:columns>
                </mx:DataGrid>
                • 5. Re: DataGrid DataTipFunction
                  Brent Wientjes Level 1
                  Thanks for the reply and help Sreenlvas. Your example is excellent for the default case of datatip usage. My wishes are a little more complex. The application example would be to have several datagridcolumns, each with a unique dataprovider data and datatip field. The customization would to be appraise the value of the datatip value and change the appearance or information to the user. A simple example of this would be the datagrid was the days of the week with the datatip being the total number of sales (or something) that day. If the number of sales exceeds some number - say 5, we add some additonal information - like a good job! symbol. Each day in the grid will have different values for the data and datatip fields. I would like to make 1 datatipfunction that is independent of the data field assigned to the column. A simple code example (does not work and I have smplified the syntax to show the point)

                  dataDP =
                  [df1: 11,dt1: a1,df2: 12,dt2: a2,df3: 13,dt3: a3]
                  [df1: 21,dt1: b1,df2: 22,dt2: b2,df3: 23,dt3: b3]
                  [df1: 31,dt1: c1,df2: 32,dt2: b2,df3: 33,dt3: c3]

                  private function custom(o:Object):String
                  {var extra:String = o.dataTipField == b2 ? " Good Job": " Ok";
                  return o.dataTipField + extra;
                  }

                  <mx:DataGrid dataProvider="{dataDP}">
                  <mx:columns>
                  <mx:DataGridColumn dataField="df1" showDataTips="true" dataTipField="dt1"dataTipFunction="custom"//>
                  <mx:DataGridColumn dataField="df2" showDataTips="true" dataTipField="dt2" dataTipFunction="custom"/>
                  <mx:DataGridColumn dataField="df3" showDataTips="true" dataTipField="dt3" dataTipFunction="custom"/>
                  </mx:columns>
                  </mx:DataGrid>

                  If the syntax were correct, the above would fail because the array field "dataTipField" does not exist in the object passed to the function "custom". If the function received a DataGridColumn object then I could write o[dataTipFunction] in place of the o.dataTipFunction and the routine would work. I have tried many variations but it seems the dataTipFunction wants a standard Object sent to it - not the DataGridColumn info.

                  So what I am looking for is something that tells the function "custom" the dataprovider column assigned to that specific column. That would allow a single routine which could be applied to all the datagridcolumns.

                  I can make what I want if I make a unique dataTipFunction for each column but in my real life example that means 10 different versions of the same "custom" function. The only difference in each one, is I call out the array field assigned to that specific column. That seems inefficient versus a single routine that can detect the array field assigned to it generically.
                  • 6. Re: DataGrid DataTipFunction
                    Sreenivas R Adobe Employee
                    Here is a customized sample. Hope this suits your requirement.

                    The idea is to use a custom DataGridColumn.

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">

                    <mx:Script>
                    <![CDATA[
                    import mx.controls.dataGridClasses.DataGridColumn;
                    private var inputData:Array = [
                    { name:"Sreenivas", nameComment:"Sreenivas Ramaswamy", email:"gmail", emailComment:"sreenivas.ramaswamy@gmail.com"},
                    { name:"Sameer", nameComment:"Sameer Bhat", email:"yahoo", emailComment:"prosameer@gmail.com"},
                    { name:"Satish", nameComment:"Satish TJ", email:"gmail", emailComment:""}
                    ];

                    private function mySingleCustomFunction(item:Object, column:DataGridColumn):String
                    {
                    var label:String = item[column.dataField];
                    var tip:String = item[column.dataTipField];
                    if (label.indexOf("Sree") != -1 )
                    tip += " , my name !";
                    if (label == "gmail" && tip.length)
                    tip += " , GMAIL is good!";
                    return tip;
                    }

                    ]]>
                    </mx:Script>

                    <mx:DataGrid dataProvider="{inputData}" >
                    <mx:columns>
                    <local:CustomDataGridColumn dataField="name" dataTipField="nameComment" showDataTips="true" myDataTipFunction="mySingleCustomFunction" />
                    <local:CustomDataGridColumn dataField="email" dataTipField="emailComment" showDataTips="true" myDataTipFunction="mySingleCustomFunction" />
                    </mx:columns>
                    </mx:DataGrid>

                    </mx:Application>

                    //CustomDataGridColumn
                    package
                    {
                    import mx.controls.dataGridClasses.DataGridColumn;

                    public class CustomDataGridColumn extends DataGridColumn
                    {
                    public var myDataTipFunction:Function;

                    public function CustomDataGridColumn(columnName:String=null)
                    {
                    super(columnName);
                    }

                    override public function itemToDataTip(data:Object):String
                    {
                    if (myDataTipFunction)
                    {
                    return myDataTipFunction(data, this);
                    }

                    return super.itemToDataTip(data);
                    }
                    }
                    }

                    • 7. Re: DataGrid DataTipFunction
                      Brent Wientjes Level 1
                      Thanks Sreenlvas for the support. I just spent the last hour typing in a solution I found yesterday. It uses the listData property cast to DataGridListData. I previewed, did a small edit and then hit Reply. This system was kind enough to kick me off and loose all the work. I'll try again tomorrow to show you the solution that was suggested as an alternative and what the overall datagrid can do.

                      Brent
                      • 8. Re: DataGrid DataTipFunction
                        Brent Wientjes Level 1
                        Last night I tried to send the follow but as mentioned when I hit the reply button to post, the system logged me off and lost all the work. I guess it times out a user. Anyway, here's what I found about the same time you posted your suggested solution. The "secret sauce" that I found was from a liveDoc page labeled "accessing the listData property". It gave me the hint I needed.

                        The essense of the "secret sauce" is to use a component that implements the IDropInListItemRenderer interface (label, text, textinput, textarea, etc.). You use the listData property and for a DataGrid cast it to DataGridListData property that gives you col, row, dataField and the rest of the object. You then write a listener for "change data" to manipulate everything.

                        The actual application I am building uses a grid to show daily information. The information is a number with augmenting notes about the number. You may have an arbitrary quantity of notes for each number logged. You also edit the number through the grid and you create/edit notes about the number through the grid cell. Thus, I need the ability to view a matrix of data, edit that data, supplement the individual data entries with notes, view where those notes are in the matrix and get a quick indication of how many notes are present.
                        This meant that each cell needed all the information about the number, location of the grid cell and how to affect the grid cell appearance. The solution requires custom label, renderer, editor, tooltip functions. The following is a stripped down version of the code that I got working for the above functionality. As before I have stripped part of the syntax to bring out the idea without cluttering things and w/o the editing/note portion.

                        ds: data source ---------------
                        [sun: 0,mon: 1,tue: 2,wed: 3,thu: 4,fri: 5,sat: 6,
                        notectsun: 100,notectmon: 101,notecttue: 102,notectwed: 103,notectthu: 104,notectfri: 105,notectsat: 106],
                        [sun: 7,mon: 8,tue: 9,wed: 10,thu: 11,fri: 12,sat: 13,
                        notectsun: 107,notectmon: 108,notecttue: 109,notectwed: 110,notectthu: 111,notectfri: 112,notectsat: 113],
                        [sun: 14,mon: 15,tue: 16,wed: 17,thu: 18,fri: 19,sat: 20,
                        notectsun: 114,notectmon: 115,notecttue: 116,notectwed: 117,notectthu: 118,notectfri: 119,notectsat: 120]

                        css: style sheet -------------
                        .noteData{color: #2222ff; font-size: 14; font-weight: bold; font-style: italic;}
                        .noNoteData{color: #000000; font-size: 14;}

                        custom: item renderer ---------
                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Label xmlns:mx=" http://www.adobe.com/2006/mxml" preinitialize="init()">
                        <mx:Script><![CDATA[
                        import mx.controls.dataGridClasses.DataGridListData;

                        private var colField:Array = ["sun","mon","tue","wed","thu","fri","sat"]; // <== data field pointers

                        public function init():void
                        {addEventListener("dataChange", handleDataChanged);}
                        public function handleDataChanged(event:Event):void
                        {var myListData:DataGridListData = DataGridListData(listData); // <== secret sauce
                        var f:String = "notect" + colField[myListData.columnIndex];
                        var note:String = data[f] > 1 ? " notes": " note";
                        styleName = data[f] > 0 ? "noteData": "noNoteData";
                        toolTip = data[f] > 0 ? String(data[f]) + note: ""; // <== custom tooltip
                        }
                        ]]></mx:Script></mx:Label>

                        main application --------------
                        (ActionScript ----------------)
                        private function dfEntry(o:Object,data:DataGridColumn):String // <== custom label to format
                        {return dfFormat.format(o[data.dataField]);}

                        (MXML ------------------------)
                        <mx:DataGrid dataProvider="{ds}">
                        <mx:columns>
                        <mx:DataGridColumn dataField="sun" labelFunction="dfEntry" itemRenderer="custom" headerText="Sun"/>
                        <mx:DataGridColumn dataField="mon" labelFunction="dfEntry" itemRenderer="custom" headerText="Mon"/>
                        <mx:DataGridColumn dataField="tue" labelFunction="dfEntry" itemRenderer="custom" headerText="Tue"/>
                        <mx:DataGridColumn dataField="wed" labelFunction="dfEntry" itemRenderer="custom" headerText="Wed"/>
                        <mx:DataGridColumn dataField="thu" labelFunction="dfEntry" itemRenderer="custom" headerText="Thu"/>
                        <mx:DataGridColumn dataField="fri" labelFunction="dfEntry" itemRenderer="custom" headerText="Fri"/>
                        <mx:DataGridColumn dataField="sat" labelFunction="dfEntry" itemRenderer="custom" headerText="Sat"/>
                        </mx:columns>
                        </mx:DataGrid>

                        <mx:NumberFormatter id="dfFormat" precision="2"/>

                        The above works pretty much like I envisioned with the exception of how to access number versus note editing access. I still have not figured out how to gain keyboard information when accessing grid cell data. I have an external checkbox to put the matirix into either number mode or note mode. It works ok but the ideal solution would be to have ctrl, shift or alt depressed and then click on a cell to change modes. The current user experience seems ok so maybe someday I'll figure that out.

                        Thanks again, ... for the support. Hopefully, someone in the future that may read the above set of posts will can gain ideas and solve their design concerns.

                        Best wishes,
                        Brent