[CLOSED] grid rowexpander template

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [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

    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

    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

    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

    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. Replies: 1
    Last Post: Oct 06, 2009, 10:58 AM
  4. Replies: 2
    Last Post: Sep 23, 2009, 5:49 PM
  5. Replies: 5
    Last Post: Apr 28, 2009, 8:43 PM

Posting Permissions