[CLOSED] Command Button not rendering in Collapsed Group in Grid

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Command Button not rendering in Collapsed Group in Grid

    Hi,
    In the following example, I have group set to startCollapsed=true and have 2 command buttons. They do not render. I have to use grid.view.refreshNode(index) to render the whole row again and then they appear. What should I do to make them render by default.

    PHENAZOPYRIDINE HYDROCHLORIDE                                      -  phenazopyridine hydrochloride tablet Unit Dose Services      <%@ Page Language="C#" %>
     
    <%@ Import Namespace="System.Globalization" %>
    <%@ Import Namespace="System.Collections.Generic" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            CultureInfo ci = new CultureInfo("en-US");
    
    
            Store store = this.GridPanel1.GetStore();
            
            store.DataSource = new List<Project> 
            { 
                new Project(100, "Ext Forms: Field Anchoring",      112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
                new Project(100, "Ext Forms: Field Anchoring",      113, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
                new Project(100, "Ext Forms: Field Anchoring",      114, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
                new Project(100, "Ext Forms: Field Anchoring",      115, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
                new Project(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
                new Project(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
                new Project(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
                new Project(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
                new Project(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
                new Project(102, "Ext Grid: Summary Rows",          105, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
                new Project(102, "Ext Grid: Summary Rows",          106, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
                new Project(102, "Ext Grid: Summary Rows",          107, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
                new Project(102, "Ext Grid: Summary Rows",          108, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
                new Project(102, "Ext Grid: Summary Rows",          109, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
                new Project(102, "Ext Grid: Summary Rows",          110, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
                new Project(102, "Ext Grid: Summary Rows",          111, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci))
            };
     
            store.DataBind();
        }
     
        public class Project
        {
            public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
            {
                this.ProjectID = projectId;
                this.Name = name;
                this.TaskID = taskId;
                this.Description = description;
                this.Estimate = estimate;
                this.Rate = rate;
                this.Due = due;
            }
     
            public int ProjectID { get; set; }
            public string Name { get;set; }
            public int TaskID { get; set; }
            public string Description { get;set; }
            public int Estimate { get;set; }
            public double Rate { get; set; }
            public double Cost { get; set; }
            public DateTime Due { get; set; }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head id="Head1" runat="server">
        <title>GroupingSummary Plugin with Summary row - Ext.NET Examples</title>
        
        <link href="/resources/css/examples.css" rel="stylesheet" />
        
        <style>       
                     
            .x-grid-body .x-grid-cell-Cost {
                background-color : #f1f2f4;
            }
             
            .x-grid-row-summary .x-grid-cell-Cost .x-grid-cell-inner{
                background-color : #e1e2e4;
            }    
    
    
            .task .x-grid-cell-inner {
                padding-left: 15px;
            }
    
    
            .x-grid-row-summary .x-grid-cell-inner {
                font-weight: bold;
                font-size: 11px;
                background-color : #f1f2f4;
            }
    
    
            .total-field{
                background-color : #fff;            
                border           : solid 1px silver;
                padding          : 0px 1px 1px 1px;
                margin-right     : 1px;
                position: absolute;
            }
             
            .total-field .x-form-display-field{            
                font-weight      : bold !important;                       
                font-size        : 11px;
                font-family      : tahoma, arial, verdana, sans-serif;
                color            : #000;         
                padding          : 3px 0px 2px 5px;
            } 
        </style>
         
        <script>
            var updateTotal = function (grid, container) {
                if (!grid.view.rendered) {
                    return;
                }
    
    
                var field,
                    value,
                    width,
                    c,
                    cs = grid.headerCt.getVisibleGridColumns();
    
    
                container.suspendLayout = true;
                for (var i = 0; i < cs.length; i++) {
                    c = cs[i];
                    if (c.summaryType) {
                        value = App.Group1.getSummary(grid.store, c.summaryType, c.dataIndex);
                    }
                    else {
                        value = "-";
                    }
    
    
                    field = container.down('component[name="' + c.dataIndex + '"]');
    
    
                    container.remove(field, false);
                    container.insert(i, field);
                    width = c.getWidth();
                    field.setWidth(width - 1);
                    var r = c.summaryRenderer || simpleRenderer;
                    field.setValue(r(value, {}, c.dataIndex));
                }
    
    
                container.items.each(function (field) {
                    var column = grid.headerCt.down('component[dataIndex="' + field.name + '"]');
                    field.setVisible(column.isVisible());
                });
    
    
                container.suspendLayout = false;
                container.doLayout();
            };
    
    
            var simpleRenderer = function (v) {
                return v;
            };
    
    
            var totalCost = function (records) {
                var i = 0,
                    length = records.length,
                    total = 0,
                    record;
    
    
                for (; i < length; ++i) {
                    record = records[i];
                    total += record.get('Estimate') * record.get('Rate');
                }
                return total;
            };
        </script>
     
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server"/>
             
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Frame="true"
                Title="Sponsored Projects"            
                Icon="ApplicationViewColumns"
                Width="800"
                Height="450">
                <Store>
                    <ext:Store ID="Store1" runat="server" GroupField="Name">
                        <Sorters>
                            <ext:DataSorter Property="Due" Direction="DESC" />
                        </Sorters>
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="TaskID">
                                <Fields>
                                    <ext:ModelField Name="ProjectID" />
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="TaskID" />
                                    <ext:ModelField Name="Description" />
                                    <ext:ModelField Name="Estimate" Type="Int" />
                                    <ext:ModelField Name="Rate" Type="Float" />                                
                                    <ext:ModelField Name="Due" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1">
                        <Listeners>
                            <Edit Handler="this.view.refresh();" />
                        </Listeners>
                    </ext:CellEditing>
                </Plugins>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:SummaryColumn ID="SummaryColumn1"                        
                            runat="server"
                            TdCls="task"
                            Text="Task"                       
                            Sortable="true"
                            DataIndex="Description"
                            Hideable="false"
                            SummaryType="Count"
                            Flex="1">
                            <SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Tasks)' : '(1 Task)');" />                            
                        </ext:SummaryColumn>
                         
                        <ext:Column ID="Column1" runat="server" Text="Project" DataIndex="Name" Width="20" />
                         
                        <ext:SummaryColumn ID="SummaryColumn2"
                            runat="server"
                            Width="85"
                            Text="Due Date"
                            Sortable="true"
                            DataIndex="Due"
                            SummaryType="Max">
                            <Renderer Format="Date" FormatArgs="'m/d/Y'" />                        
                            <SummaryRenderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />                        
                            <Editor>
                                <ext:DateField ID="DateField1" runat="server" Format="MM/dd/yyyy" />
                            </Editor>
                        </ext:SummaryColumn>
     
                        <ext:SummaryColumn ID="SummaryColumn3"
                            runat="server"  
                            Width="75"
                            Text="Estimate"
                            Sortable="true"
                            DataIndex="Estimate"
                            SummaryType="Sum">
                            <Renderer Handler="return value +' hours';" />
                            <SummaryRenderer Handler="return value +' hours';" />
                            <Editor>
                                <ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
                            </Editor>
                        </ext:SummaryColumn>
                         
                        <ext:SummaryColumn ID="SummaryColumn4"
                            runat="server"
                            Width="75"
                            Text="Rate"
                            Sortable="true"
                            DataIndex="Rate"
                            SummaryType="Average">
                            <Renderer Format="UsMoney" />
                            <SummaryRenderer Fn="Ext.util.Format.usMoney" />
                             <Editor>
                                <ext:NumberField ID="NumberField2" runat="server" AllowBlank="false" AllowNegative="false" StyleSpec="text-align:left" />
                            </Editor>
                        </ext:SummaryColumn>
                         
                        <ext:SummaryColumn
                            runat="server"
                            Width="75"
                            ID="Cost"
                            Text="Cost"
                            Sortable="false"
                            Groupable="false"
                            DataIndex="Cost"
                            CustomSummaryType="totalCost">
                            <Renderer Handler="return Ext.util.Format.usMoney(record.data.Estimate * record.data.Rate);" />
                            <SummaryRenderer Fn="Ext.util.Format.usMoney" />
                        </ext:SummaryColumn>
                        <ext:CommandColumn runat="server">
                            <Commands>
                                <ext:GridCommand Text="Submit" Icon="Tick"></ext:GridCommand>
                                <ext:GridCommand Text="Delete" Icon="Delete"></ext:GridCommand>
                            </Commands>
                        </ext:CommandColumn>
                    </Columns>                
                </ColumnModel>
                <Listeners>
                    <ColumnResize Handler="updateTotal(this, #{Container1});" />                
                    <ColumnMove Handler="updateTotal(this, #{Container1});" /> 
                    <ColumnHide Handler="updateTotal(this, #{Container1});" />         
                </Listeners>
                <View>
                     <ext:GridView ID="GridView1" runat="server">
                        <Listeners>
                            <Refresh Handler="updateTotal(this.panel, #{Container1});" />
                        </Listeners>
                    </ext:GridView>
                </View>
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button1" runat="server" Text="Toggle Summary" ToolTip="Toggle the visibility of summary row">
                                <Listeners>
                                    <Click Handler="#{Group1}.toggleSummaryRow(!#{Group1}.showSummaryRow);#{Group1}.view.refresh();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Features>
                    <ext:GroupingSummary ID="Group1" runat="server" StartCollapsed="true" GroupHeaderTplString="{name}" HideGroupedHeader="true" EnableGroupingMenu="false">
                    </ext:GroupingSummary>
                </Features>
                <DockedItems>
                    <ext:Container ID="Container1" runat="server" Layout="HBoxLayout" Dock="Bottom" StyleSpec="margin-top:2px;">                    
                        <Defaults>
                            <ext:Parameter Name="height" Value="22" />
                        </Defaults>
                        <Items>
                            <ext:DisplayField ID="ColumnField1" runat="server" Name="Description" Cls="total-field" Text="-" />
                            <ext:DisplayField ID="ColumnField2" runat="server" Name="Due" Cls="total-field" Text="-"  />
                            <ext:DisplayField ID="ColumnField3" runat="server" Name="Estimate" Cls="total-field" Text="-"  />
                            <ext:DisplayField ID="ColumnField4" runat="server" Name="Rate" Cls="total-field" Text="-"  />
                            <ext:DisplayField ID="ColumnField5" runat="server" Name="Cost" Cls="total-field" Text="-"  />
                        </Items>
                    </ext:Container>                        
                </DockedItems>
            </ext:GridPanel>
        </form>
      </body>
    </html>
    Last edited by Daniil; Apr 09, 2013 at 4:12 AM. Reason: [CLOSED]
  2. #2
    Hi @amitpareek,

    First of all, please clarify what Ext.NET version are you using?
  3. #3
    I am using v2.1
  4. #4
    The official release?
  5. #5
    Downloaded last week from SVN.

    However, it was the same in release version too.
  6. #6
    Probably, you have updated from the branches/2.

    The latest Ext.NET is here:
    http://svn.ext.net/premium/trunk

    Running your sample with the latest Ext.NET there are the problems, but they differs from the one which you described.

    They are:

    1. StartCollapsed="true" doesn't work (if I am not wrong it doesn't work with v2.1 as well...). Here is a but report to Sencha.
    http://www.sencha.com/forum/showthread.php?238728

    There is a workaround (I have not tested yet).

    2. The updateTotal function causes a JavaScript error. We will investigate.
  7. #7
    I cannot use trunk as it uses ExtJS 4.2

    Can u just test ur case in v2.1 from branches/2.1? startCollapsed works but buttons dont appear after expand.
  8. #8
    Also just before I load data, I set it to startCollapsed=true because after loading data, for some reason, it is again reset to false. So I have to set it to true everytime I load data. But this issue is altogether a different issue than I am mentioning.

    The buttons do not render when group is collapsed by default.
  9. #9
    I cannot use trunk as it uses ExtJS 4.2
    What is reason for not using Ext JS 4.2?
    Geoffrey McGill
    Founder & CEO
  10. #10
    Hi Geoff,
    Our app is live and hence we cannot push 4.2 until we have thoroughly tested it. We may start looking at it probably in next 10-15 days. How stable it is now? We cannot take risks of unknown bugs coming up randomly.

    This issue is critical, as we have to render each row on groupClick event which slows down the UI when there are more than 200-300 items in a group and hence I am looking for an immediate fix, somekind of override which I can implement now.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] grid command group before text
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 14, 2012, 11:07 AM
  2. Replies: 1
    Last Post: May 29, 2012, 11:26 AM
  3. [CLOSED] Problem with focus and command in grid group
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 07, 2012, 11:26 AM
  4. group collapsed
    By maxdiable in forum 1.x Help
    Replies: 0
    Last Post: Aug 09, 2010, 5:53 PM
  5. How to disble a command button in Grid PAnel
    By ajaybabu.maddinani in forum 1.x Help
    Replies: 2
    Last Post: Feb 05, 2010, 10:52 AM

Posting Permissions