PDA

View Full Version : [CLOSED] gridpanel - css set in ViewReady handler functions not getting applied



PriceRightHTML5team
Jul 24, 2013, 2:16 PM
Hi
I have a gridpanel which has group headers.
Through GroupHeaderTpl () we have set css class to them.


X.Grouping().GroupHeaderTpl(X.XTemplate()
.Functions(fs => fs.Add(new JFunction() { Name = "isX", Fn = "isX" }))
.Html(@"<div <tpl if=""this.isX(groupValue, children)"">class=""clsnm""</tpl>>
Group: {name}
</div>")
)

it looks like (image 1)6613

I further wanna apply css class to the container div of our tpl div.

for this we have i have written following javascript fucntion

function setHeader() {
$('.clsnm').each(function (i, obj) {
obj.parentNode.parentNode.className += ' parentclsnm';
});
}

and have called this function in VewReady and AfterRender listeners of gridpanel.
But the css is not applied.

Daniil
Jul 24, 2013, 5:37 PM
Hi @PriceRightHTML5team,

Is this code line actually executed?

obj.parentNode.parentNode.className += ' parentclsnm';

Please try:

alert(obj.parentNode.parentNode.className);

What do you?

Can you see the "parentclsnm" class is actually applied to the HTML elements (you can inspect using IE or Chrome Developer Tools or FireFox FireBug)?

What is the parentclsnm definition?

Are you restricted to use jQuery? The same should be possible to implement using native ExtJS/Ext.NET things.

And, finally, I think applying CSS such a way in ViewReady is not a solid solution. I think it might be reset after a grid refresh. I will investigate a possible alternative, though I doubt there is a good one.

PriceRightHTML5team
Jul 25, 2013, 9:07 AM
This line is not getting extecuted

obj.parentNode.parentNode.className += ' parentclsnm';


"parentclsnm" is not getting applied


Following is the definition of parentclsnm

.parentclsnm {
background-color: #0066CC !important;
background-image: none;
color: #fff;
}


I changed jquery script

$('.somecls').each(function (i, obj) {
obj.parentNode.parentNode.className += ' parentclsnm';
alert(obj.parentNode.parentNode.className);
});

to javascript so as to debug within loop

var elements = document.getElementsByClassName('somecls');
for (var i = 0, length = elements.length; i < length; i++) {
elements[i].parentNode.parentNode.className += ' parentclsnm';
alert(elements[i].parentNode.parentNode.className);
}
but no success. The elements.Length is always zero i tried ViewReady and AfterRender event of gridpanel also tried Ext.onReady()

Daniil
Jul 25, 2013, 10:49 AM
Here is a working example using ExtJS/Ext.NET DOM API.

Though, there is a caveat. The "outer group" CSS disappears if collapse a group. It happens because if a group is collapsed, then its "inner group" elements are just not rendered.

Example

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

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

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

.highlight-group-outer {
background-color: green;
}
</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;
};

var applyClsForOuterGroup = function (view) {
var els = view.getEl().select(".highlight-group-inner"),
i;

els.each(function (el) {
el.parent(".x-grid-group-hd").addCls("highlight-group-outer");
});
};
</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-inner""</tpl>>
Group: {name}
</div>")
)
)
.View(X.GridView().Listeners(events => events.Refresh.Handler = "applyClsForOuterGroup(this);"))
)
</body>
</html>