What's New?

[CLOSED] gridpanel - css set in ViewReady handler functions not getting applied

  1. #1
    Jul 24, 2013, 2:16 PM

    [CLOSED] gridpanel - css set in ViewReady handler functions not getting applied

    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)Click image for larger version.  Name: image 1.png  Views: 28  Size: 17.2 KB  ID: 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.
    Last edited by Daniil; Jul 30, 2013 at 4:11 AM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    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()
  4. #4
    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>

Similar Threads

  1. how to Attach Javascript functions to gridpanel combobox column selection change event..?
    By hemantpatil in forum 2.x Help
    Replies: 1
    Last Post: Dec 15, 2012, 6:41 AM
  2. Fit Layout not being applied to GridPanel on collapsed Panel/Tab
    By Travis in forum 1.x Help
    Replies: 2
    Last Post: Apr 19, 2012, 8:09 PM
  3. [CLOSED] After ViewReady event, gird panel will delay to update the content about 2 second
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 29
    Last Post: Feb 01, 2012, 4:58 PM
  4. [CLOSED] When page load, how to first a script after ViewReady event in GridPanel fire
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 10, 2012, 10:21 AM
  5. [CLOSED] GridPanel viewready event listener?
    By smmille1 in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Oct 12, 2010, 7:35 PM

Tags for this Thread

Posting Permissions