[CLOSED] Grouping View Custom Template

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Grouping View Custom Template

    How do I define a custom template for the grouping headers in a grid? I want to style the entire header, which includes ".x-grid-group-hd div" (the div that contains the expander image).

    When I tried this:

    
    
    
    gv.GroupTextTpl = "{text} ({[values.rs.length]} {[values.rs.length > 1 ? ""funds"" : ""fund""]})"
    it only styled the inner portion, which is not what I want.
    I want each different grouping header to be a different color, and that color comes from the DB store.
  2. #2

    RE: [CLOSED] Grouping View Custom Template

    Hi Peter,

    I was able to get this working by adding the "colorcode" to a simple within the header, then grabbing that code out after the groups load. It's a bit awkward, but it does work well.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>GridPanel GroupingView with EnableRowBody - Coolite Toolkit Example</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <script type="text/javascript">
                // This "setGroupStyle" function is called when the GroupingView is refreshed.
                // See <Refresh> Listener on the <ext:GroupingView>
                var setGroupStyle = function(view) {
                    // get an instance of the Groups
                    var groups = view.getGroups();
    
                    for (var i = 0; i < groups.length; i++) {
                        // Loop through the Groups, the do a query to find the  with our ColorCode
                        // Get the "id" from the  and split on the "-", the second array item should be our ColorCode
                        var color = "#" + Ext.query("span", groups[i])[0].id.split("-")[1];
    
                        // Set the "background-color" of the original Group node. 
                        Ext.get(groups[i]).setStyle("background-color", color);
                    }
                }
            </script>
            
            <ext:Store runat="server" ID="Store1" AutoLoad="true" GroupField="Light">
                <Proxy>
                    <ext:HttpProxy Method="POST" Url="../../Shared/PlantService.asmx/Plants" />
                </Proxy>
                <Reader>
                    <ext:XmlReader Record="Plant">
                        <Fields>
                            <ext:RecordField Name="Common" />
                            <ext:RecordField Name="Botanical" />
                            <ext:RecordField Name="Zone" Type="Int" />
                            <ext:RecordField Name="ColorCode" />
                            <ext:RecordField Name="Light" />
                            <ext:RecordField Name="Price" Type="Float" />
                            <ext:RecordField Name="Availability" Type="Date" />
                            <ext:RecordField Name="Indoor" Type="Boolean" />
                        </Fields>
                    </ext:XmlReader>
                </Reader>
                <SortInfo Field="Common" Direction="ASC" />
            </ext:Store>
            
            <ext:GridPanel
                ID="GridPanel1"
                runat="server" 
                Collapsible="true" 
                Width="600" 
                Height="350" 
                AutoExpandColumn="Common" 
                Title="Plants" 
                Frame="true" 
                StoreID="Store1">
                <ColumnModel runat="server">
                <Columns>
                    <ext:Column ColumnID="Common" Header="Common Name" DataIndex="Common" Width="220" Sortable="true" />
                    <ext:Column Header="Light" DataIndex="Light" Width="130" Sortable="true" />
                    <ext:Column Header="Price" DataIndex="Price" Width="70" Align="right" Sortable="true" Groupable="false">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column Header="Available" DataIndex="Availability" Width="95" Sortable="true" Groupable="false">
                        <Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
                    </ext:Column>
                    <ext:Column Header="Indoor?" DataIndex="Indoor" Width="55" Sortable="true" />
                </Columns>
                </ColumnModel>
                <LoadMask ShowMask="true" />
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" />
                </SelectionModel>
                <View>
                    <ext:GroupingView  
                        ID="GroupingView1"
                        HideGroupedColumn="true"
                        runat="server" 
                        ForceFit="true"
                        StartCollapsed="true"
                        GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                        EnableRowBody="true">
                        <Listeners>
                            <Refresh Fn="setGroupStyle" />
                        </Listeners>
                        <GetRowClass Handler="var d = record.data; rowParams.body = String.format('<div style=\'padding:0 5px 5px 5px;\'>The {0} [{1}] requires light conditions of {2}.<br />Price: {3}
    ', d.Common, d.Botanical, d.Light, Ext.util.Format.usMoney(d.Price));" />
                    </ext:GroupingView>
                </View>
                <Buttons>
                    <ext:Button 
                        ID="btnToggleGroups" 
                        runat="server" 
                        Text="Expand/Collapse Groups"
                        Icon="TableSort"
                        Style="margin-left: 6px;"
                        AutoPostBack="false">
                        <Listeners>
                            <Click Handler="#{GridPanel1}.getView().toggleAllGroups();" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Also note that the "Groupable" property has been added to the <ext:Column>. If "false", that particular Column can not be grouped.

    Hope this helps.

    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: [CLOSED] Grouping View Custom Template

    That looks like it might work, but I have a problem. I need to add the listener in code-behind. The whole grouping view is created in code.

        Protected Function MakeNewGroupingView() As GroupingView
            Dim gv As GroupingView = New GroupingView()
            gv.HideGroupedColumn = True
            gv.ForceFit = True
            gv.AutoFill = True
            gv.EnableGroupingMenu = False
            gv.StartCollapsed = False
            gv.ShowGroupName = False
            If sLang = "EN" Then
                gv.GroupTextTpl = "{[values.rs[0].data.FundGroupNameComplex]} ({[values.rs.length]} {[values.rs.length > 1 ? ""funds"" : ""fund""]})"
            Else
                gv.GroupTextTpl = "{[values.rs[0].data.FundGroupNameComplex]} ({[values.rs.length]} {[values.rs.length > 1 ? ""fond"" : ""fonds""]})"
            End If
            gv.AddListener("Refresh", "setGroupStyle")
            Return gv
        End Function
    P.S. I replaced dash with underscore in the JavaScript also.

    When I run this, I get an error in Firebug's console:
    "XML descendants internal method called on incompatible XPCCrossOriginWrapper"
  4. #4

    RE: [CLOSED] Grouping View Custom Template

    That looks like it might work, but I have a problem. I need to add the listener in code-behind. The whole grouping view is created in code.
    You should be able to just set the .Refresh Listeners .Fn property.


    Example


    this.GroupingView1.Listeners.Refresh.Fn = "setGroupStyle";

    Geoffrey McGill
    Founder & CEO
  5. #5

    RE: [CLOSED] Grouping View Custom Template

    Ok that almost worked.

    See the screen grab, it colors too much, the color affects the rows themselves, which is not what I want. I only want to affect the grouping rows.

  6. #6

    RE: [CLOSED] Grouping View Custom Template

    Mark this one CLOSED
    I used .firstChild and it's done

            <script type="text/javascript">
            // This "setGroupStyle" function is called when the GroupingView is refreshed.            
            // See <Refresh> Listener on the <ext:GroupingView>            
            var setGroupStyle = function(view) {                
                // get an instance of the Groups                
                var groups = view.getGroups();                
                for (var i = 0; i < groups.length; i++) {  
                    // Loop through the Groups, the do a query to find the  with our ColorCode                    
                    // Get the "id" from the  and split on the "-", the second array item should be our ColorCode                    
                    var color = "#" + Ext.query("span", groups[i])[0].id.split("_")[1];                    
                    // Set the "background-color" of the original Group node.                     
                    Ext.get(groups[i].firstChild).setStyle("background-color", color);      
                    Ext.get(groups[i].firstChild).setStyle("color", "#fff");           
                }            
            }    
            </script>
  7. #7

    RE: [CLOSED] Grouping View Custom Template

    Hi Peter,

    Thanks for the update! [CLOSED]


    I think you might be able to tighten up the two lines into one by using .applyStyles().


    Example


    Ext.get(groups[i].firstChild).applyStyles({"backgroud-color": color, "color": "#fff"});

    See http://extjs.com/deploy/dev/docs/?cl...er=applyStyles


    Hope this helps.


    Geoffrey McGill
    Founder & CEO
  8. #8

    RE: [CLOSED] Grouping View Custom Template



    Thanks, but one more thing came up...

    I have a TabPanel with a number of tabs, each with its own gridpanel. The TabPanel is defined with DeferredRender="True"


    When I load the page, the refresh event is called on the first, VISIBLE grid in tab #0 but then when I tab over to the other grids, there is no refresh event and the styles do not get applied.

    I tried trapping the tab's activate event but that fires before the gridpanel is rendered. That means there is no grid panel, and no view either.

    I tried other listeners but none of them seem to fire after the grid is created the first time.

    Why is not refresh event fired for views that are hidden?

  9. #9

    RE: [CLOSED] Grouping View Custom Template

    Why is not refresh event fired for views that are hidden?
    If the GridPanel is inside a Tab this not active and DeferredRender="true", then the GridPanel basically does not exist on the Page. The DOM objects will not be created until the Tab becomes active and the Page refreshes. At that point the Refresh event should fire.


    Geoffrey McGill
    Founder & CEO
  10. #10

    RE: [CLOSED] Grouping View Custom Template



    Well as you can clearly see here: http://204.225.175.213/fundlist.aspx it does not fire.
    Only the first tab ("Overview") has the styles applied.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] [1.0] Grouping view with Row Editor?
    By state in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 02, 2011, 4:33 PM
  2. [CLOSED] Using custom template in a ComboBox
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 28, 2011, 3:06 PM
  3. grouping view sort or order
    By [WP]joju in forum 1.x Help
    Replies: 3
    Last Post: Jul 22, 2009, 9:11 AM
  4. How to add grouping view from code behind
    By anand in forum 1.x Help
    Replies: 7
    Last Post: May 26, 2009, 11:34 AM
  5. [CLOSED] Custom Template From CodeBehind
    By Immobilmente in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 10, 2009, 9:35 AM

Posting Permissions