PDA

View Full Version : Gridpanel cell color



speedstepmem4
Nov 20, 2008, 3:19 AM
hi,

i have one column field which name is color in gridpanel. i want to set the background color for color field every cells depends on the color values which is fetch from databace. how to set the cell background color in gridpanel. help me.

Thanks in advance

methode
Nov 20, 2008, 3:42 AM
Hi speedstepmen4,

have a look at this example:

https://examples1.ext.net/#/GridPanel/Miscellaneous/Custom_Column/

and at the js and style blocks.

In the Renderer you specicfy the Fn - function - you want to call to format the cell appereance.

Hope it helps

Matteo

speedstepmem3
Nov 20, 2008, 4:17 AM
hi,

i am seeing the examples but i cant understand. how to set the background color for particular cell in gridpanel. please give the sample code in c#.

methode
Nov 20, 2008, 5:47 AM
Hi,

well to set the background color is a bit more tricky, here is my code, maybe Geoff or Vlad can confirm or correct it.

Header block js code:




// in {0} prints the color, in {1} prints the value of the cell took from DB
var template = '<div style="height:20px; margin:1px; padding:0px; width:100%; background-color:{0};">{1}
';

//the function that model the template

var renderSequence = function(value)
{
color = '#FFFFFF';

switch (value)
{
case 1:
color = '#FF0000';
break;

case 2:
color = '#ABABAB';
break;

case 3:
color = '#5E9937';
break;
}

// color argument goes to {0} see upper, value argument goes to {1}
return String.format(template, color, value);

}




Header block style code.
Note the pattern for the style class is: .x-grid3-col-{columnID}, .x-grid3-td-{columnID}




<style type="text/css">
.x-grid3-col-clmSequence, .x-grid3-td-clmSequence {
display:block;
color: #000;
margin:0px;
padding:0px;
}
</style>



and in the GridPanel:




... other columns

<ext:Column ColumnID="clmSequence" Header="SEQUENCE" DataIndex="Sequence">
<Renderer Fn="renderSequence" />
</ext:Column>



Hope is clear

Matteo

speedstepmem4
Nov 20, 2008, 5:47 AM
Thank you for your reply

i saw the Example and i set the background color for gridpanel cells. i am able to set the same background color for particular column cells. i am unable to set different background color for particular column cells. i want to set different background color for cells, for example

header HName
cell1 red
cell2 blue
cell3 yellow
cell4 green

Likewise i want to background color for gridpanel cells in c#.

Thanks in advance.

speedstepmem4
Nov 20, 2008, 6:09 AM
Thank you

Good idea. but i have more than 1000 cells for a particular column. So the case structure is not used for me. can you give me the sample code in c#. how to render the cells using c#.

Thanks in advance

methode
Nov 20, 2008, 6:21 AM
well it should be easier, if I correctly understood, this is the code:





var renderSequence = function(value)
{
// let's assume value is #FF0000;
return String.format(template, value, value);

}



You can render the look like via JavaScript, and don't think it's possible to do it in code behind.

Let me know

Matteo

speedstepmem4
Nov 20, 2008, 6:39 AM
hi,
its not possible to do it in code behind. ok i will manage it. Is there any option to pass values from code behind(c#) to javascript function. if there is this option very helpful for me.

jchau
Nov 20, 2008, 11:00 AM
My recommendation is to have an extra Color field in your record. For example, let say your grid has 2 columns: Name, Value and you want to change the color of Value cell depending on some business logic. Your store's reader should then contain Name, Value, Color. The Color field value should be determined on the server side. Then in your javascript render function, you can set the Value cell's background color based on that Color field in the same record.