Ext .net grid cell back color value change

[Strikers]

Hi
I am using Ext .net 2.5.3
At server side I am creating dynamic/custom columns. I am assigning JavaScript function name at server side which will call at the time of render.

gridCol.Renderer.Handler = "return CustomDataRenderer(value, metadata,'" + dataFormat + "'," + (int)this.GridInfo.Measure + ");";

At client side, I have created JavaScript function,

 var CustomDataRenderer = function (value, meta, format, measure) {
           
                 var returnValue = value;
                 if(format.indexOf("%") > -1 ) {
                     returnValue = parseFloat(value) * 100.0;
                 }
                 if (returnValue < 0) {
                     meta.css = 'red-cls'
                 } else {
                     meta.css = 'black-cls'
                 }

                ////Change Back color
                     meta.style = "background-color:white;";
             
                     if(meta.column.dataIndex.indexOf('Data1')>-1)
                     {
                         meta.tdStyle  = "background-color:" + document.getElementById('BackGroundColorData1').value + ";";
                     }
                     else if(meta.column.dataIndex.indexOf('Data2')>-1)
                     {
                         meta.tdStyle  = "background-color:" + document.getElementById('BackGroundColorData2').value + ";";
                     }
            
                 returnValue = (value >= 0) ? Ext.util.Format.number(returnValue, format) : "(" + Ext.util.Format.number(returnValue * -1, format) + ")";
            
                 return returnValue;
         };

This code works fine when asp .net page loaded first time. It changed cell back color based on 'Data1'. I can see cell back color changed fine. But when I clicked on any ext .net button then I have Direct event get called which again created dynamic column and same javascript function rendered again. But in that case I am changing back color based on 'Data2'. Now Data2 has different color but I cannot see changed color for grid cell. However, I can see same old Data1 color which was displayed very first time when page loaded.

[fabricio.murta]

Hello @Strikers! Welcome to Ext.NET forums!

I believe you are missing a IsPostBack and/or IsAjaxRequest check in your Page_Load. Look at the Page_Load() method on the two examples below to see usage.

- Example using IsPostBack: Export data using full post back.
- Example using IsAjaxRequest: Simple Array Grid.

I hope this helps!

[Strikers]

Hi
Can you let me know how can I change grid cell back color at server side ?
Please provide me code sample.

[fabricio.murta]

Hello @Strikers! We'd be pleased to help you! But can you create a new thread with this question?

We just want to keep different subjects on different threads so it is easier for people to reference the questions in the future.

Thanks for understanding.

[Strikers]

I have months columns which are dynamically created at server side. Based on filter value on UI, I have sometime 3 months columns created or sometime 5 months columns created dynamically at server side. So I have to recreate column all the time irrespective of IsPostback or IsAjaxRequest

As per initial example posted, I can see my values are multiplied with 100 but cell back color is not set ?

[fabricio.murta]

Hello @Strikers!

Please provide us a running test case reproducing the issue you are facing and we will be able to give you a more accurate response as for how to overcome it.

If in doubt on how to come up with a simple runnable example, please refer to these posts:
- Forum Guidelines For Posting New Topics
- More information required

[ogironap]

<ext:Column Header="Saldo Remoto" DataIndex="SaldoRemoto" ColumnID="SaldoRemoto" Width="90px" Css="background-color: PaleGoldenRod ;">

<Renderer Fn="function (v) {return v.formatMoney(2, ',', '.');}" />
</ext:Column>
<ext:Column Header="Fecha Banco" DataIndex="feccontrolBanco" ColumnID="feccontrolBanco" Width="80" Tooltip="Fecha Último apunte del Banco" Css="background-color: PaleGoldenRod ;">

<Renderer Fn="Ext.util.Format.dateRenderer('d-m-Y')" />
</ext:Column>

[ogironap]

THE SCRIPT:
var colorRendererDatosBanco = function (value, metadata, record, rowIndex, colIndex, store) {

metadata.attr = "style='background-color: PaleGoldenRod; font-size:11px; '";

if (metadata.id == "feccontrolBanco") {
var MyDateString = ('0' + value.getDate()).slice(-2) + '/'
+ ('0' + (value.getMonth() + 1)).slice(-2) + '/'
+ value.getFullYear();

return MyDateString;
}
else {
if (metadata.id == "SaldoRemoto") {

if (record.data.SaldoContable > 0 && record.data.SaldoRemoto != record.data.SaldoContable) {
metadata.attr = "style='background-color: PaleGoldenRod; font-size:11px; color: red; '";
}
return value.formatMoney(2, ',', '.');
}
}
return value;

};

IN THE COLUMN GRID:
<ext:Column Header="Saldo Remoto" DataIndex="SaldoRemoto" ColumnID="SaldoRemoto" Width="90px" Css="background-color: PaleGoldenRod ;">
<Renderer Fn="colorRendererDatosBanco" />

</ext:Column>

[pazaman4]

useful information