PDA

View Full Version : [CLOSED] Gridpanel - group header - Dyamically change background color



PriceRightHTML5team
Jul 19, 2013, 7:10 AM
Hi,
We have a grid panel which has a grouped column.
We wish to dynamically change group headers background color as per one of the columns value.

Daniil
Jul 19, 2013, 11:13 AM
Hi @PriceRightHTML5team,

Maybe, this way.


<style>
.my-grouped-header {
background-color: green;
background-image: none;
}
</style>


var c = App.GridPanel1.groupingFeature.getGroupedHeader();

c.addCls('my-grouped-header');
//c.removeCls('my-grouped-header');

PriceRightHTML5team
Jul 19, 2013, 11:26 AM
Hi Daniil

The color is to be set as per a columns value for that respective record in the store.
Thus, where can we write the script / code (on which event)? We want the color be shown on page load.

We are using Asp.Net MVC razor engine.

Also how to access the group header for each record.

Daniil
Jul 19, 2013, 11:50 AM
Please try a GridPanel's ViewReady listener.

PriceRightHTML5team
Jul 19, 2013, 1:16 PM
But how to access each group header individually. considering it's member records

Daniil
Jul 19, 2013, 2:02 PM
I don't quite understand. Please elaborate.

PriceRightHTML5team
Jul 22, 2013, 5:43 AM
Hi Daniil


I wish to know a mechanism using which I can travers the groups and it's records of a gridpanel

in that I will be checking for each record's certain column value and set the css class accordingly for eg;

if (App.Gridnm.store.getAt(i).get('Isxcolumn') == true) {
groupheader.addCls('my-grouped-headerX');
}
else{
groupheader.addCls('my-grouped-headerY');
}

Hope this makes it understandable.

Daniil
Jul 22, 2013, 7:23 AM
There is a single group header for all the groups. You are talking about headers for each groups. So, we are probably talking about the different things.

Please provide a screenshot with circled things which you need to change the background of.

PriceRightHTML5team
Jul 22, 2013, 7:51 AM
6581

Yes there is one group header. Attached is the snapshot of the grid.
I have marked the group header row which is to be colored with red border.

Daniil
Jul 22, 2013, 4:54 PM
For this requirement I think you should use a Grouping's GroupHeaderTpl.

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[] { "group1", "1", "1" },
new object[] { "group1", "11", "11" },
new object[] { "group1", "111", "111" },
new object[] { "group2", "2", "2" },
new object[] { "group2", "22", "22" },
new object[] { "group2", "222", "222" }
};
}
}
</script>

<!DOCTYPE html>

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

<style>
.highlight-group {
background-color: red;
}
</style>

<script>
var isX = function (groupValue, records) {
var i,
isX = groupValue === "group2" ? true : false; // just for demonstration

for (i = 0; i < records.length; i++) {
// here you are getting access to each record of a current group
}

return isX;
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server" GroupField="groupId">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="groupId" />
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="GroupId" DataIndex="groupId" />
<ext:Column runat="server" Text="Test1" DataIndex="test1" />
<ext:Column runat="server" Text="Test2" DataIndex="test2" />
</Columns>
</ColumnModel>
<Features>
<ext:Grouping runat="server">
<GroupHeaderTpl runat="server">
<Html>
<div <tpl if="this.isX(groupValue, children)" groupId === 'group2'">class="highlight-group"</tpl>>Group: {name}</div>
</Html>
<Functions>
<ext:JFunction Name="isX" Fn="isX" />
</Functions>
</GroupHeaderTpl>
</ext:Grouping>
</Features>
</ext:GridPanel>
</form>
</body>
</html>

PriceRightHTML5team
Jul 23, 2013, 6:27 AM
Hi Daniil,
As mentioned earlier "We are using Asp.Net MVC razor engine."

please share a MVC razor engine sample.

Daniil
Jul 23, 2013, 6:32 AM
I am a bit more fluent in ASPX syntax than in Razor, therefore, commonly, I am providing samples with ASPX.

Please clarify where exactly are you in trouble to port this example to Razor?

PriceRightHTML5team
Jul 23, 2013, 6:45 AM
Kindly provide equivalent of following in razor


<GroupHeaderTpl runat="server">
<Html>
<div <tpl if="this.isX(groupValue, children)" groupId === 'group2'">class="highlight-group"</tpl>>Group: {name}</div>
</Html>
<Functions>
<ext:JFunction Name="isX" Fn="isX" />
</Functions>
</GroupHeaderTpl>

Daniil
Jul 23, 2013, 12:09 PM
A Razor builder for GrouperHeaderTpl was missed. It has been fixed in SVN, please update.

I ported to Razor the entire example.

Example

@{
var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>

<style>
.highlight-group {
background-color: red;
}
</style>

<script>
var isX = function (groupValue, records) {
var i,
isX = groupValue === "group2" ? true : false; // just for demonstration

for (i = 0; i < records.length; i++) {
// here you are getting access to each record of a current group
}

return isX;
};
</script>
</head>
<body>
@Html.X().ResourceManager()

@(X.GridPanel()
.Store(X.Store()
.GroupField("groupId")
.Model(X.Model().Fields("groupId", "test1", "test2"))
.DataSource(new object[]
{
new object[] { "group1", "1", "1" },
new object[] { "group1", "11", "11" },
new object[] { "group1", "111", "111" },
new object[] { "group2", "2", "2" },
new object[] { "group2", "22", "22" },
new object[] { "group2", "222", "222" }
})
)
.ColumnModel(
X.Column().Text("GroupId").DataIndex("groupId"),
X.Column().Text("Test1").DataIndex("test1"),
X.Column().Text("Test2").DataIndex("test2")
)
.Features(
X.Grouping().GroupHeaderTpl(X.XTemplate()
.Functions(fs => fs.Add(new JFunction() { Name = "isX", Fn = "isX"}))
.Html(@"<div <tpl if=""this.isX(groupValue, children)"" groupId === 'group2'"">class=""highlight-group""</tpl>>
Group: {name}
</div>")
)
)
)
</body>
</html>

PriceRightHTML5team
Jul 24, 2013, 12:37 PM
Thanks Daniil,
It's working