What's New?

[CLOSED] Custom Grid Group Header Text

  1. #1
    May 17, 2013, 12:58 PM

    [CLOSED] Custom Grid Group Header Text

    Hello,

    I am trying to set grid group header text based on the group records' common values. In other words, let's say I am grouping the grid by an Event ID and I want to show a text derived depending on the Event ID whose details reside in another store. If I wanted to set a static text, I can do it using the Html tags of <GroupHeaderTpl ...><Html>Text Here</Html></GroupHeaderTpl> ... I also saw <Functions><ext:JFunction..../></Functions> which I hopefully thought might be helpful to do what I want.

    Below is a sample configuration. Can you direct me to a sample where I can set GroupHeader text depending on its {name} property?

                                    <Features>
                                    <ext:Grouping ID="Grouping1" runat="server" HideGroupedHeader="true" StartCollapsed="true">                                        
                                            <GroupHeaderTpl runat="server" Enabled="true">
                                                <Functions>
                                                    <ext:JFunction Handler="return 'i do not know how to call and set html';" Name="testMe"></ext:JFunction>                                                    
                                                </Functions>
                                                <Html>
                                                    static text is ok
                                                    {testMe()} // ???????
                                                </Html>
                                            </GroupHeaderTpl>                                                                                   
                                        </ext:Grouping>                                                                           
                                </Features>
    Thanks.
    Last edited by Daniil; May 17, 2013 at 3:44 PM. Reason: [CLOSED]
  2. #2
    May 17, 2013, 1:49 PM
    Hi @bayoglu,

    Please look at the example.

    Example
    <ext:Grouping runat="server">
    <GroupHeaderTpl runat="server">
        <Html>
            {[ this.testFn(/* pass parameters here if needed */) ]}
        </Html>
        <Functions>
            <ext:JFunction Name="testFn" Handler="return 'Hello!'; " />
        </Functions>
    </GroupHeaderTpl>
</ext:Grouping>
    See also
    http://docs.sencha.com/extjs/4.2.0/#...groupHeaderTpl
    http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.XTemplate
  3. #3
    May 17, 2013, 2:02 PM
    Hello @Daniil,

    Thanks for prompt response. I tried to pass {name} as parameter with no success. I tried like below. What is wrong with it? How can I reference group attributes like name, values.. in function parameters? Do I need to set value for Args attribute of ext:JFunction definition?

    {[ this.testFn(name) ]}
    {[ this.testFn({name}) ]}
                                                    <Functions>
                                                    <ext:JFunction Handler="return param1;" Name="testFn" Args="param1"></ext:JFunction>                                                    
                                                </Functions>

    The following is OK but I need to replace static 'test' value with group {name} attribute.

                                                <GroupHeaderTpl runat="server" Enabled="true">
                                                <Functions>
                                                    <ext:JFunction Handler="return param1;" Name="testFn" Args="param1">
                                                    </ext:JFunction>                                                    
                                                </Functions>
                                                <Html>
                                                    {[ this.testFn('test')]}
                                                </Html>
                                            </GroupHeaderTpl>
    HTML tags render {name} if it is used alone like below. I can not send {name} as a function parameter.

                                                <GroupHeaderTpl runat="server" Enabled="true">
                                                <Functions>
                                                    <ext:JFunction Handler="return param1;" Name="testFn" Args="param1">
                                                    </ext:JFunction>                                                    
                                                </Functions>
                                                <Html>
                                                    {name} // >>> That works.
                                                </Html>
                                            </GroupHeaderTpl>
    Thanks.
    Last edited by bayoglu; May 17, 2013 at 2:51 PM.
  4. #4
    May 17, 2013, 3:26 PM
    Please access the parameters within {[]} with the "values." prefix.

    <ext:Grouping runat="server">
    <GroupHeaderTpl runat="server">
        <Html>
            {[ this.testFn(values.name) ]}
        </Html>
        <Functions>
            <ext:JFunction Name="testFn" Handler="return name;" Args="name" />
        </Functions>
    </GroupHeaderTpl>
</ext:Grouping>
  5. #5
    May 17, 2013, 3:38 PM
    Thank you @Daniil, again...
    Please mark as closed.

Similar Threads

  1. [CLOSED] Grid group text
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 26, 2013, 9:02 PM
  2. [CLOSED] Change text in header group column.
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 09, 2011, 3:44 PM
  3. [CLOSED] [1.0] Grid column header group - span multiple rows
    By Neil_Walters in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 14, 2011, 11:11 PM
  4. group header text multiline problem
    By wp_joju in forum 1.x Help
    Replies: 0
    Last Post: Dec 21, 2010, 10:54 AM
  5. Header Group in Grid Panel
    By Rakeshkumar.a in forum 1.x Help
    Replies: 1
    Last Post: Dec 21, 2010, 9:59 AM

Posting Permissions