4 Replies Latest reply on Sep 15, 2009 4:13 AM by zakabalt

    Put in bold some lines in a dataGrid

    zakabalt

      Hello, I'm using a datagrid and I want to put bold some lines. I have one date and if it's 'T' y want to put bold all the line and if it's 'F' I don't want change. How can I do that? I want to use to print read and unread message like on thunderbird or outlook or another similar aplication.

       

      Here the columns and the dates to see better mi datagrid.

      private var columnas:ArrayCollection = new ArrayCollection([
                                  {headerText: 'R', dataField: 'leido', textAlign: 'left',  renderType:'text', width: '5' },
                                  {headerText: 'Asunto', dataField: 'subject', textAlign: 'left',  renderType:'text', width: '100' },
                                  {headerText: 'Remitente', dataField: 'from', textAlign: 'left',  renderType:'text', width: '70' },
                                  {headerText: 'Fecha', dataField: 'date', textAlign: 'left',  renderType:'text', width: '35' },
                                  {headerText: 'Prioridad', dataField: 'prioridad', textAlign: 'left',  renderType:'text', width: '40' },
                                  {headerText: 'Adj', dataField: 'adjunto', textAlign: 'right',  renderType:'text', width: '10' },
                                  ]);

      private var datosEjemplo:ArrayCollection = new ArrayCollection([
                     {leido:'T', subject:"Seguimiento", from:"tes", date:"08/09/2009 11:09", prioridad:"Muy baja", adjunto:"C"},
                     {leido:"F", subject:"Test ", from:"test@", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:"C"},
                     {leido:"F", subject:"Elementos", from:"test@a", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:""}
                     {leido:"F", subject:"Re: RE: Mañana", from:"prueba@", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:""},
                     {leido:"T", subject:"Mañana", from:"test@", date:"08/09/2009 11:09", prioridad:"Muy alta", adjunto:""},
                     {leido:"F", subject:"Video tutorial de Flex", from:"test@", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:"C"},
                     {leido:"F", subject:"Ejemplos", from:"prueba@.com", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:""},
                     {leido:"T", subject:"Presentaciónr", from:"test@.com", date:"08/09/2009 11:09", prioridad:"Muy alta", adjunto:""},
                     {leido:"F", subject:"Código", from:"test@", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:""},
                     {leido:"F", subject:"Documentación", from:"prueba@iametza.com", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:"C"},
                     {leido:"T", subject:"Nuevos ", from:"test@", date:"08/09/2009 11:09", prioridad:"Muy alta", adjunto:""},]);

       

      Thanks

        • 1. Re: Put in bold some lines in a dataGrid
          atta707 Level 2

          Please take a look at custom iterm renderers.

          • 2. Re: Put in bold some lines in a dataGrid
            babo_ya Level 3

            Here is a custom renderer..

             

             

            <?xml version="1.0" encoding="utf-8"?>

            <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="140">

             

             

             

             

            <mx:Script>

            <![CDATA[

             

             

             

            public override function set data(value:Object):void

            {

            trace("Value : " + value.leido);

             

            if(value.leido == "T")

            {

            txt.setStyle("fontWeight", "bold");

            }

            else

            {

            txt.setStyle("fontWeight", "normal");

            }

            txt.text = value.leido;

             

            super.data = value;

             

            }

             

            ]]>

            </mx:Script>

             

             

            <mx:Label text="{data.leido}" id="txt" />

             

             

             

            </mx:Canvas>

             

             

             

            and the the DG...

            <?xml version="1.0" encoding="utf-8"?>

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

                 <mx:Script>

                      <![CDATA[

                      import mx.collections.ArrayCollection;

                     

                     

                         private var columnas:ArrayCollection = new ArrayCollection([

                                        {headerText: 'R', dataField: 'leido', textAlign: 'left',  renderType:'text', width: '5' },

                                        {headerText: 'Asunto', dataField: 'subject', textAlign: 'left',  renderType:'text', width: '100' },

                                        {headerText: 'Remitente', dataField: 'from', textAlign: 'left',  renderType:'text', width: '70' },

                                        {headerText: 'Fecha', dataField: 'date', textAlign: 'left',  renderType:'text', width: '35' },

                                        {headerText: 'Prioridad', dataField: 'prioridad', textAlign: 'left',  renderType:'text', width: '40' },

                                        {headerText: 'Adj', dataField: 'adjunto', textAlign: 'right',  renderType:'text', width: '10' },

                                        ]);

            private var datosEjemplo:ArrayCollection = new ArrayCollection([

                           {leido:'T', subject:"Seguimiento", from:"tes", date:"08/09/2009 11:09", prioridad:"Muy baja", adjunto:"C"},

                           {leido:"F", subject:"Test ", from:"test@", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:"C"},

                           {leido:"F", subject:"Elementos", from:"test@a", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:""},

                           {leido:"F", subject:"Re: RE: Ma–ana", from:"prueba@", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:""},

                           {leido:"T", subject:"Ma–ana", from:"test@", date:"08/09/2009 11:09", prioridad:"Muy alta", adjunto:""},

                           {leido:"F", subject:"Video tutorial de Flex", from:"test@", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:"C"},

                           {leido:"F", subject:"Ejemplos", from:"prueba@.com", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:""},

                           {leido:"T", subject:"Presentaci—nr", from:"test@.com", date:"08/09/2009 11:09", prioridad:"Muy alta", adjunto:""},

                           {leido:"F", subject:"C—digo", from:"test@", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:""},

                           {leido:"F", subject:"Documentaci—n", from:"prueba@iametza.com", date:"08/09/2009 11:09", prioridad:"Normal", adjunto:"C"},

                           {leido:"T", subject:"Nuevos ", from:"test@", date:"08/09/2009 11:09", prioridad:"Muy alta", adjunto:""},]);

                      ]]>

                 </mx:Script>

             

             

            <mx:DataGrid dataProvider="{datosEjemplo}" height="500">

             

            <mx:columns>

            <mx:DataGridColumn dataField="leido" itemRenderer="src.CustomRenderer" />

            <mx:DataGridColumn dataField="subject" />

            <mx:DataGridColumn dataField="from" />

            <mx:DataGridColumn dataField="date" />

            <mx:DataGridColumn dataField="prioridad" />

            <mx:DataGridColumn dataField="adjunto" />

             

            </mx:columns>

             

            </mx:DataGrid>

             

             

            </mx:Application>

             

             

             

             

            hope this helps,

             

            please mark as such if this post answer your question..

             

            BaBo,

            1 person found this helpful
            • 3. Re: Put in bold some lines in a dataGrid
              zakabalt Level 1

              I must to create another class with the itemRenderer? I can't create a function inside my component in the <script>? In your example you're creatig another dataGridColumn.. but I have my columns in one array. I can put it {headerText: 'R', dataField: 'leido', textAlign: 'left', itemRenderer:src.customRenderer, renderType:'text', width: '5' }, it's the same, not?

               

              I don't understand completly your code because you're using another label, another datagridcolumn....(I don't need another label, only change my line label style). And I think that in your code you're only put in bold one cell in all the line not? Or I'm wrong?

              • 4. Re: Put in bold some lines in a dataGrid
                zakabalt Level 1

                I got it with your code, but do you know if I can do the same if I declare my columns in a array? I don't use DataGrid, I use a expecial DataGrid(mine, with more proprties) and I normaly use it declaring the columns in a array, I can't use <columns> in my component, I have to use the array. I don't know how can I do to join your customRender in my columns declaration.

                 

                I init my DataGrid here:

                private function onComplete():void {
                                dgList.setColumns(columnas);
                                dgList.dataProvider = datosEjemplo;
                                dgList.width = 950;
                                dgList.height = 330;
                            }

                 

                <general:DataGridWidget id="dgList"/>

                 

                 

                And I put the the two arrays(dataprovider and serColumns) in the first post