[CLOSED] Gridpanel - group header - Dyamically change background color

Page 2 of 2 FirstFirst 12
  1. #11
    Hi Daniil,
    As mentioned earlier "We are using Asp.Net MVC razor engine."

    please share a MVC razor engine sample.
  2. #12
    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?
  3. #13
    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>
    Last edited by Daniil; Jul 23, 2013 at 11:43 AM. Reason: Please use [CODE] tags
  4. #14
    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>
  5. #15
    Thanks Daniil,
    It's working
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Change GridPanel Cell background color
    By mis@adphk.com in forum 2.x Help
    Replies: 1
    Last Post: Mar 19, 2013, 1:43 AM
  2. [CLOSED] Change TreePanel background color and toolbar color
    By jchau in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  3. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  4. Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Tags for this Thread

Posting Permissions