[CLOSED] Fully color gridpanel cell

  1. #1

    [CLOSED] Fully color gridpanel cell

    Hi!
    I have a little problem.
    I would fully color a grid panel cell; I have tried with render:

    <ext:Column ID="ColumnSTATO_VEICOLO" runat="server" Width="105" Text="Stato veicolo" DataIndex="STATO_VEICOLO">
        <Renderer Handler="return Ext.String.format('<span style=background-color:green; height:100%; padding:0px; width:100%;>{0}</span>', record.data.STATO_VEICOLO)" />
    </ext:Column>
    But I get only this result: Click image for larger version. 

Name:	stato_veicoli.jpg 
Views:	76 
Size:	42.6 KB 
ID:	24504
    where the cells are only partially colored.

    Does anyone have any idea?
    Thank you!
    Last edited by fabricio.murta; Mar 16, 2016 at 2:21 PM.
  2. #2
    Now I have try this:

    <ext:Column ID="ColumnSTATO_VEICOLO" runat="server" Width="105" Text="Stato veicolo" DataIndex="STATO_VEICOLO">
        <Renderer Handler="return Ext.String.format('<div style=background-color:green; height:100%; padding:0px; width:100%;>{0}</div>', record.data.STATO_VEICOLO)" />
    </ext:Column>

    and the result is almost perfect:

    Click image for larger version. 

Name:	stato_veicoli_ok.jpg 
Views:	63 
Size:	52.4 KB 
ID:	24505


    but remain a little white padding space...
  3. #3
    I found the solution and I want share it with the community:

    Javascript:

    <script type="text/javascript">
    var ChangevLivUrgenzaColorMetaData = function (value, metaData) {
    
            var color = '#66ff66';
    
            if (value.indexOf('0') > -1) {
                color = '#d9d9d9';  //grey  
            }
            else if (value.indexOf('1') > -1) {
                color = '#66ff66';  //green 
            }
            else if (value.indexOf('2') > -1) {
                color = '#ffff80';   //yellow  
            }
            else if (value.indexOf('3') > -1) {
                color = '#ff9900';  //orange  
            }
            else if (value.indexOf('4') > -1) {
                color = '#ff4d4d';  //red 
            }
    
            metaData.style = "background-color:" + color;
            return value;
        }

    Aps.Net

    <ext:Column ID="ColumnLIV_URGENZA" runat="server" Text="Livello urgenza" DataIndex="LIV_URGENZA" Width="150">
        <Renderer Fn="ChangevLivUrgenzaColorMetaData" />                                        
    </ext:Column>
    The trick is to use:
    metaData.style
    The result is:

    Click image for larger version. 

Name:	stato_veicoli_ok_ok.jpg 
Views:	82 
Size:	33.8 KB 
ID:	24506



    You can mark this as closed.

    Stefano
    Last edited by metatronix; Mar 16, 2016 at 1:27 PM.
  4. #4
    Hello @metatonix!

    Awesome, you not only added an interesting question but shared your much elegant solution to it! We really appreciate it! Often people show up on forums wanting to color a full cell and your option seems very concise!

    Thanks for sharing the outcome!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Change GridPanel Cell background color
    By mis@adphk.com in forum 2.x Help
    Replies: 1
    Last Post: Mar 19, 2013, 1:43 AM
  2. Replies: 3
    Last Post: Feb 14, 2013, 10:35 AM
  3. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  4. [CLOSED] How to set color text of the gridPanel cell
    By tactime10 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 19, 2012, 3:49 PM
  5. Gridpanel cell color
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Nov 20, 2008, 11:00 AM

Tags for this Thread

Posting Permissions