PDA

View Full Version : [CLOSED] RowExpander plugin, set expanded row color; add icon to column header



betamax
Jan 29, 2014, 2:27 PM
I have a simple grid with alternating row colows. I am using the row expander plugin, and I would like to set the expander color, or the display field it contains, background color to match the row it is associated with.
I am calling a function when the row is expanded:

<Listeners>
<Expand Fn="getOverrideRsn"></Expand>
</Listeners>

and that function has access to the "item" object


function getOverrideRsn(item,record){
item.component.setValue(record.data.override_reaso n);
item.component.ctCls = getRowClass(record);
}

var getRowClass = function(record){
if (record.index % 2 == 0){
return "even-row";
}
return "odd-row";
};

Is there a way to get to what I need through the "item" object. I cannot find the property I need in fireburg

Daniil
Jan 30, 2014, 4:03 AM
Hi @betamax,

I suggest to add CSS classes to a RowExpander's body in its Expand listener.

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[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
}
}
</script>

<!DOCTYPE html>

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

<script>
var getRowClass = function(record){
if (record.index % 2 == 0){
return "even-row";
}

return "odd-row";
};
</script>

<style>
.odd-row td.x-grid-cell, .odd-row div.x-grid-rowbody {
background-color: green;
}

.even-row td.x-grid-cell, .even-row div.x-grid-rowbody {
background-color: yellow;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<GetRowClass Fn="getRowClass" />
</ext:GridView>
</View>
<Plugins>
<ext:RowExpander runat="server">
<Component>
<ext:DisplayField runat="server" Text="Test" />
</Component>
<Listeners>
<Expand Handler="body.addCls(rowIndex % 2 == 0 ? 'even-row' : 'odd-row');" />
</Listeners>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

betamax
Jan 30, 2014, 5:18 PM
I appreciate you putting together that example Daniil.
I am not seeing it work as expected though (in IE & FF); I've attached a screen shot of what I am seeing.
In words, the row turns to Ext blue when selected, when the expander is clicked, the expansion is Ext blue as well.

I am setting the text of the display field, and trying to set a Class name in a function called on the RowExdpander "Expand" event.


function getOverrideRsn(item,record){
item.component.setValue(record.data.override_reaso n);
var classNm = getRowClass(record).toString();
item.component.ctCls = classNm;
}

And heres my RowExpander:

<ext2:RowExpander ID="RowExpander1" ClientIDMode="Static" runat="server" ExpandOnEnter="True" ExpandOnDblClick="False" SelectRowOnExpand="True" >
<Listeners>
<Expand Handler="getOverrideRsn" />
</Listeners>
<Component>
<vms:VmsDisplayField ID="dfOverrideText" ClientIDMode="Static" runat="server" LabelCls="gridrowComponent" Label="Reason for Override" LabelWidth="130"/>
</Component>
<Renderer Handler="if(record.data.override_reason == ''){ return false;}" />
</ext2:RowExpander>


I can see my class name in the container table of the rowexpander, but it is not apparently inherited by it's children.
I tried modifying your example to mimic this behavior, but get the same results.

Daniil
Jan 31, 2014, 5:33 AM
I tested with the latest Ext.NET and could not reproduce the behavior that you described.

Please clarify what Ext.NET version are you using?

betamax
Feb 03, 2014, 1:26 PM
We are stuck at 2.2 for the moment. We will not be able to move forward until after the next release's regression testing is complete.

Daniil
Feb 03, 2014, 4:07 PM
"!important" helps.


.odd-row td.x-grid-td, .odd-row div.x-grid-rowbody {
background-color: green !important;
}

.even-row td.x-grid-td, .even-row div.x-grid-rowbody {
background-color: yellow !important;;
}