What's New?

[CLOSED] grid rowexpander template

  1. #1
    Sep 08, 2009, 4:48 AM

    [CLOSED] grid rowexpander template

    Hi can you point me to a sample. I tried looking at the Xtemplate sample but I can't figure out one thing.

    I have a grid with ProgramID and ProgramCode. I need to build the list of items that get displayed in the template when you click on the row expander based on the parent ProgramID.

    Do I need to use AjaxEvent and how do I pass the programID when the rowexpander is click.

    if you need more information, please let me know.

    Thank you in advance

    idriss
  2. #2
    Sep 08, 2009, 6:28 AM

    RE: [CLOSED] grid rowexpander template

    Hi,

    Please see the following sample
    https://examples1.ext.net/#/GridPane...pander_Remote/


    For remote creation that list you need use BeforeExpand ajax event and pass required fields from record. On server side you should to create html content which will be dispayed in row expander. Success handler calls setRaw function which to insert html content inside row expander
  3. #3
    Sep 08, 2009, 4:04 PM

    RE: [CLOSED] grid rowexpander template

    thanks, that's what I was looking for.

    I am assuming that in this case (when using BeforeExpand event), If I have a list of items to display, I will have to build html for each item before assigning to e.ExtraParamsResponse["content"]. is it possible to use the tpl tag and the for operator.

    thanks

    idriss

  4. #4
    Sep 09, 2009, 6:47 AM

    RE: [CLOSED] grid rowexpander template

    Hi,

    You can use XTemplate and apply data from server
    <%@ 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">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if(Ext.IsAjaxRequest)
        {
            //We do not need to DataBind on an AjaxEvent
            return;
        }
        
        this.Store1.DataSource = new object[]
            {
                new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am", "Manufacturing"},
                new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am", "Manufacturing"},
                new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am", "Manufacturing"},
                new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am", "Finance"},
                new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am", "Services"},
                new object[] {"AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am", "Services"},
                new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am", "Manufacturing"},
                new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am", "Services"},
                new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am", "Finance"},
                new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am", "Manufacturing"},
                new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am", "Manufacturing"},
                new object[] {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am", "Manufacturing"},
                new object[] {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am", "Automotive"},
                new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am", "Computer"},
                new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am", "Manufacturing"},
                new object[] {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am", "Computer"},
                new object[] {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am", "Computer"},
                new object[] {"Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am", "Medical"},
                new object[] {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am", "Finance"},
                new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am", "Food"},
                new object[] {"Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am", "Medical"},
                new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am", "Computer"},
                new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am", "Medical"},
                new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am", "Food"},
                new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am", "Retail"},
                new object[] {"The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am", "Manufacturing"},
                new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am", "Computer"},
                new object[] {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am", "Services"},
                new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am", "Retail"}
            };

        this.Store1.DataBind();
    }

    protected void BeforeExpand(object sender, AjaxEventArgs e)
    {
        e.ExtraParamsResponse["content"] =
            "("+JSON.Serialize(new {Company = e.ExtraParams["company"], RowIndex = e.ExtraParams["index"], Date = DateTime.Now.ToShortTimeString()})+")";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>RowExpander with AjaxEvent - Coolite Toolkit Examples</title>
    <ext:ScriptContainer runat="server" />
    
    <style type="text/css">
        .template {
            color: #fff;
            background-color: gray;
        }
    </style>

    <script type="text/javascript">

        var setRaw = function (response, result, expander, type, action, params) {
            var content = Tpl1.apply(eval(result.extraParamsResponse.content));
            expander.bodyContent[params.id] = content;
            
            var row = expander.grid.view.getRow(params.index);
            var body = Ext.DomQuery.selectNode('tr div.x-grid3-row-body', row);
            body.innerHTML = content;

            expander.grid.store.getById(params.id).cached = true;            
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <ext:Store ID="Store1" runat="server" IgnoreExtraFields="false">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="company" />
                        <ext:RecordField Name="price" Type="Float" />
                        <ext:RecordField Name="change" Type="Float" />
                        <ext:RecordField Name="pctChange" Type="Float" />
                        <ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
                        <ext:RecordField Name="industry" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        
        <ext:XTemplate ID="Tpl1" runat="server">
            <tpl for=".">
                Company: {Company}, Row ?: {RowIndex}, Server Date: {Date}
            </tpl>
        </ext:XTemplate>
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            StoreID="Store1" 
            TrackMouseOver="true"
            Title="Expander Rows with server side template, Collapse and Force Fit" 
            Collapsible="true"
            AnimCollapse="true" 
            Icon="Table" 
            Width="600" 
            Height="300">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Company" Width="40" Sortable="true" DataIndex="company" />
                    <ext:Column Header="Price" Width="20" Sortable="true" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column Header="Change" Width="20" Sortable="true" DataIndex="change"/>
                    <ext:Column Header="Change" Width="20" Sortable="true" DataIndex="pctChange"/>
                    <ext:Column Header="Last Updated" Width="20" Sortable="true" DataIndex="lastChange">
                        <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
            </View>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <Plugins>
                <ext:RowExpander ID="RowExpander" runat="server">
                    <AjaxEvents>
                        <BeforeExpand 
                            OnEvent="BeforeExpand"
                            Success="setRaw(response, result, el, type, action, extraParams);"
                            Before="return !record.cached;">
                            <EventMask ShowMask="true" MinDelay="1000" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
                            <ExtraParams>
                                <ext:Parameter Name="company" Value="record.data['company']" Mode="Raw" />
                                <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
                                <ext:Parameter Name="index" Value="rowIndex" Mode="Raw" />
                            </ExtraParams>
                        </BeforeExpand>
                    </AjaxEvents>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>
  5. #5
    Sep 10, 2009, 2:01 AM

    RE: [CLOSED] grid rowexpander template

    thanks. exactly what I was looking for.
    idriss

Similar Threads

  1. content inside rowexpander template won't update
    By [WP]joju in forum 1.x Help
    Replies: 12
    Last Post: Mar 03, 2010, 10:34 AM
  2. [CLOSED] [1.0] GridPanel RowExpander Template
    By state in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 13, 2010, 8:36 AM
  3. Rowexpander - refresh field in template from gridpanel change?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Oct 06, 2009, 10:58 AM
  4. GridPanel - RowExpander - Possible to Use Editor in Template?
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Sep 23, 2009, 5:49 PM
  5. Rowexpander - update template values on GP save/reload
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Apr 28, 2009, 8:43 PM

Posting Permissions