Ext.Net 3.2 - Fully color gridpanel cell

0
votes

I would fully color a grid panel cell with Ext.Net 3.2 framework; 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)" />

But I get only this result:enter image description here

where the cells are only partially colored.

Does anyone have any idea?

2
extjsextjs3ext.netgridpanel

2 Answers

1
votes

I don't know about Ext.net, but what you are doing would be as follows in plain ExtJS:

renderer:function(value, metaData, record) {
  return Ext.String.format('<span style=background-color:green; height:100%; padding:0px; width:100%;>{0}</span>', record.data.STATO_VEICOLO);
}

and what you really want to do, in plain ExtJS, is as follows:

renderer:function(value,metaData) {
  metaData.style="background-color:green";
  return value;
}

You would "just" have to turn that into Ext.net code.

1
votes

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;
    }

Asp.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:

enter image description here