PDA

View Full Version : [CLOSED] How to apply a css style from a render function in Javascriot?



feanor91
Sep 26, 2012, 2:17 PM
Hello

I have to fix hte style of a cell in a grid depending of a boolean returned into a JSON file

I write my column like that :



<ext:Column Runat="server" ID="Column21" DataIndex="STR_Location" MenuDisabled="True" Groupable="False" Hideable="False" Resizable="False" Sortable="False" Width="110" Text="Emplacement">
<Renderer Fn="RenderColorInvestigate" />
</ext:Column>


The RenderColorInvestigate function :


RenderColorInvestigate = function (value, p, record, a, ColumnNumber, c)
{
var template = '????{0}>';

if (record.data.BOOL_Investigation)
return Ext.String.format(template, value);
else
return value;
}

The question is what I have to put in the template to have all my row colored in one way and others not?

I see that playin on that CSS make what I want, but on all the grid :



.x-grid-with-col-lines .x-grid-cell {
border-right-color: #1050FF;
border-left-color: #1050FF;
border-bottom-color:#1050FF;
}

I create that to apply only on the row I need:



.x-grid-with-col-lines-investigation .x-grid-cell-investigation {
border-right-color: #1050FF;
border-left-color: #1050FF;
border-bottom-color:#1050FF;
}

But how to use in it the JS function?

Daniil
Sep 26, 2012, 7:31 PM
Hi,

I think using GetRowClass is better in your case.
http://examples2.ext.net/#/GridPanel/Miscellaneous/Marking_Records/

feanor91
Sep 27, 2012, 7:04 AM
works flawlessly, thanks a lot.

What if I have to apply the same things to only one cell (and to melt the 2 : the row in one color and one of the cell in another)? I will have to do that, because I points data in the grid with color code to pick u attention of people.

Like that:

4836

Daniil
Sep 27, 2012, 9:27 AM
For separate cells Renderer is better.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer

I would use the metadata tdCls or style options.

feanor91
Sep 27, 2012, 9:37 AM
OK, I will try to investigate, I will return if problem. Thanks

feanor91
Sep 27, 2012, 12:38 PM
It works, I use this example:

http://jsfiddle.net/molecule/tPB8Z/

but I have some difficulties, because it use the getRowClass to, so how can I combine the 2 retur,n value in hte function?


var getRowClass = function (record)
{
if (record.data.BOOL_Investigation)
{
return "investigation-row";
}
if (record.data.BOOL_Warranty)
{
return "warranty-cell";
}
}


through the renderer, I didn't see how to apply class to the cell

Daniil
Sep 27, 2012, 12:54 PM
but I have some difficulties, because it use the getRowClass to, so how can I combine the 2 retur,n value in hte function?


This way:

return "class1 class2";



through the renderer, I didn't see how to apply class to the cell

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
.cell1 {
background-color: Green !important;
}

.cell2 {
background-color: Yellow !important;
}

.cell3 {
background-color: Blue !important;
color: White;
}
</style>

<script type="text/javascript">
var testRenderer = function (value, metadata) {
switch (value) {
case "test1" : metadata.tdCls = "cell1"; break;
case "test2" : metadata.tdCls = "cell2"; break;
case "test3" : metadata.tdCls = "cell3"; break;
}

return value;
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test">
<Renderer Fn="testRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>

feanor91
Sep 27, 2012, 1:49 PM
You'r example is working, I extend it with the getRowClass, because I tried it on my code and this solution didn't work. I have to understand why.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1","toto", "0"},
new object[] { "test2", "titi", "1"},
new object[] { "test3", "tutu", "0"},
new object[] { "test4", "tata", "1"}
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
.cell1 {
background-color: Green !important;
}

.cell2 {
background-color: Yellow !important;
}

.cell3 {
background-color: Blue !important;
color: White;
}
.investigation-row .x-grid-cell, .investigation-row .x-grid-rowwrap-div
{
background-color:Yellow;
}
</style>

<script type="text/javascript">
var testRenderer = function (value, metadata)
{
switch (value)
{
case "test1": metadata.tdCls = "cell1"; break;
case "test2": metadata.tdCls = "cell2"; break;
case "test3": metadata.tdCls = "cell3"; break;
}

return value;
};
var getRowClass = function (record, index)
{
if (record.data.test3=="0")
{
return "investigation-row";
}
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test" />
<ext:ModelField Name="test2" />
<ext:ModelField Name="test3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Test" DataIndex="test">
<Renderer Fn="testRenderer" />
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView7" runat="server">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
</ext:GridPanel>
</body>
</html>

Daniil
Sep 27, 2012, 1:57 PM
Seems the examples behaves as it should.

The first three cells of the first column are green, yellow, blue according to the Renderer.

The first and third cells of the second column are yellow according the GetRowClass.

Please clarify the requirement.

feanor91
Sep 27, 2012, 2:56 PM
there is no requirement, I just extend the example to use the getRowClass, because I am unable to make it works on my project (the renderer), I try a thousand things since you post the code, and I have not find why my damn program didn't work.

Daniil
Sep 27, 2012, 4:11 PM
Please clarify does the last your example work as you expect?

feanor91
Sep 27, 2012, 4:24 PM
The example yes, but when I apply the solution into my project it didn't. Tomorow, I will start from the example and construct on it step by step the same that in my project (used my json file, put the grid in a window...and so on) to see where is the proble (in my project)

Daniil
Sep 27, 2012, 4:31 PM
Ok. We are always here to help.

feanor91
Sep 28, 2012, 7:03 AM
Hello

I think the problem could be at store level. Here the code of my grid integrated into your example test :



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
//if (!X.IsAjaxRequest)
//{
// Store store = this.GridPanel1.GetStore();
// store.DataSource = new object[]
// {
// new object[] { "test1","toto", "0","B"},
// new object[] { "test2", "titi", "1","Y"},
// new object[] { "test3", "tutu", "0","G"},
// new object[] { "test4", "tata", "1","B"}
// };
// store.DataBind();
//}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
.cell1 {
background-color: Green !important;
}

.cell2 {
background-color: Yellow !important;
}

.cell3 {
background-color: Blue !important;
color: White;
}
.investigation-row .x-grid-cell, .investigation-row .x-grid-rowwrap-div
{
background-color:Yellow;
}
</style>

<script type="text/javascript">
var testRenderer = function (value, metadata, record)
{
if (record.data.BOOL_Warranty)
{
metadata.tdCls = "warranty-cell";
}
return value;
// switch (record.data.color)
// {
// case "G": metadata.tdCls = "cell1"; break;
// case "Y": metadata.tdCls = "cell2"; break;
// case "B": metadata.tdCls = "cell3"; break;
// }

};
var getRowClass = function (record, index)
{
if (record.data.BOOL_Investigation)
{
return "investigation-row";
}
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:GridPanel
ID="grdLateDevicesglobalProcess"
runat="server"
AutoScroll="False"
Title="Late devices on the global process "
TitleAlign="Center"
ColumnLines="True">
<store>
<ext:Store ID="stoLateDevicesglobalProcess" runat="server" >
<Proxy>
<ext:AjaxProxy Url="jsonDAL/returnJSONVisualManagementETTR.aspx" Json="false" Timeout="300000" >
<Reader>
<ext:JsonReader Root="Data" TotalProperty="TotalRecords" SuccessProperty="test">
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model16" runat="server">
<Fields>
<ext:ModelField Name="STR_Color" />
<ext:ModelField Name="STR_FirstCol" />
<ext:ModelField Name="STR_RMA" />
<ext:ModelField Name="STR_SerialNumber" />
<ext:ModelField Name="STR_Statut" />
<ext:ModelField Name="STR_UpdateDateStatus" />
<ext:ModelField Name="STR_Tech" />
<ext:ModelField Name="STR_Late" />
<ext:ModelField Name="STR_LateToDisplay" />
<ext:ModelField Name="BOOL_Investigation" />
<ext:ModelField Name="BOOL_Warranty" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</store>
<ColumnModel ID="ColumnModel6" runat="server">
<Columns>
<ext:Column Runat="server" ID="Column23" DataIndex="STR_FirstCol" MenuDisabled="True" Groupable="False" Hideable="False" Resizable="False" Sortable="False" Width="20" Text="" >
</ext:Column>
<ext:Column Runat="server" ID="colRMAVM" DataIndex="STR_RMA" MenuDisabled="True" Groupable="False" Hideable="False" Resizable="False" Sortable="False" Width="90" Text="RMA #" >
<Renderer Fn="testRenderer" ></Renderer>
</ext:Column>
<ext:Column Runat="server" ID="Column25" DataIndex="STR_SerialNumber" MenuDisabled="True" Groupable="False" Hideable="False" Resizable="False" Sortable="False" Width="105" Text="Serial #" Align="Center">
</ext:Column>
<ext:Column Runat="server" ID="Column26" DataIndex="STR_Statut" MenuDisabled="True" Groupable="False" Hideable="False" Resizable="False" Sortable="False" Width="80" Text="Status" Align="Center">
</ext:Column>
<ext:Column Runat="server" ID="Column27" DataIndex="STR_UpdateDateStatus" MenuDisabled="True" Groupable="False" Hideable="False" Resizable="False" Sortable="False" Width="140" Text="Status update time" Align="Center">
</ext:Column>
<ext:Column Runat="server" ID="Column28" DataIndex="STR_Tech" MenuDisabled="True" Groupable="False" Hideable="False" Resizable="False" Sortable="False" Width="70" Text="Tech." Align="Center">
</ext:Column>
<ext:Column Runat="server" ID="Column30" DataIndex="STR_LateToDisplay" MenuDisabled="True" Groupable="False" Hideable="False" Resizable="False" Sortable="False" Width="100" Text="ETTR" Align="Center">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel8" runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GridView ID="GridView7" runat="server">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
</ext:GridPanel>
</body>
</html>


The testRenderer function is well executed and the line "metadata.tdCls = "warranty-cell";" is well passed (I stop on it into debug) but the cells is not colored

The only difference between your's and mine is in the store and in the column model, so if you have any idea, your welcome.

In the mean time, I continue to search.

Daniil
Sep 28, 2012, 7:23 AM
I can't see the "warranty-cell" CSS class definition. Did you not miss it?

feanor91
Sep 28, 2012, 7:29 AM

Daniil
Sep 28, 2012, 7:38 AM
It is a CSS issue. The cell rule is overrode by the row rule.

Needs to strengthen the CSS rule.

.warranty-cell {
background-color: Aqua !important;
}

feanor91
Sep 28, 2012, 7:48 AM
INCREDIBLE!!!

I thought that "!important" was just a comment, I'm very very very poor in my CSS knowing, shame on me.

Very sorry, you are my saver, tanks a lot.

Daniil
Sep 28, 2012, 7:52 AM
You will become a CSS guru soon!:)

feanor91
Sep 28, 2012, 8:08 AM
Something is sure : I will have to... ;)