[CLOSED] GridPanel align center and buttons should display on bottom of the page.

[iansriley]

Hi,

I have a gridpanel with Grouping feature and buttons. The gridpanel should be align center of the page, for this i tried with different layouts but no luck.
With FitLayout, the gridPanel displaying on whole page and buttons are visible, if we remove layout type then the grid is displaying on center but buttons are going bottom and not visible.

In 1.7 with Layout="Center" for Viewport is worked but what have set the layout in 2.5?

When grouping field data contains double quotes (") then collapse and expand is not working. ex: "TestGroup".

The grid should be look as like attached screen shot.

Thank you.

<%@ 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\"",      100, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      101, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      102, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      103, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      104, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      105, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      106, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      107, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      108, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      109, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, DateTime.Parse("06/24/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      110, "Implement AnchorLayout", 4, 150, 0, DateTime.Parse("06/25/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      111, "Add support for multiple types of anchors", 4, 150, 0, DateTime.Parse("06/27/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      112, "Testing and debugging", 8, 0, 0, DateTime.Parse("06/29/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      113, "Add required rendering \"hooks\" to GridView", 6, 100, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      114, "Extend GridView and override rendering functions", 6, 100, 0, DateTime.Parse("07/03/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      115, "Extend Store with grouping functionality", 4, 100, 0, DateTime.Parse("07/04/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      116, "Default CSS Styling", 2, 100, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(100, "\"Ext Forms: Field Anchoring\"",      117, "Testing and debugging", 6, 100, 0, DateTime.Parse("07/06/2007",ci)),
            
            new Project(102, "Ext Grid: Summary Rows",          118, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          119, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          120, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          121, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          122, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          123, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          124, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          125, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          126, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          127, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          128, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          129, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          130, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          131, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          132, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          133, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          134, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          135, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          136, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          137, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          138, "Testing and debugging", 8, 125, 0, DateTime.Parse("07/15/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          139, "Ext Grid plugin integration", 4, 125, 0, DateTime.Parse("07/01/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          140, "Summary creation during rendering phase", 4, 125, 0, DateTime.Parse("07/02/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          141, "Dynamic summary updates in editor grids", 6, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          142, "Remote summary integration", 4, 125, 0, DateTime.Parse("07/05/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          143, "Summary renderers and calculators", 4, 125, 0, DateTime.Parse("07/06/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          144, "Integrate summaries with GroupingView", 10, 125, 0, DateTime.Parse("07/11/2007",ci)),
            new Project(102, "Ext Grid: Summary Rows",          145, "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 runat="server">
    <title>Grouping Paging - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
    <script>
        Ext.view.Table.override({
            indexInStore: function (node) {
                node = (node && node.isCollapsedPlaceholder) ? this.getNode(node) : this.getNode(node, false);

                if (!node && node !== 0) {
                    return -1;
                }

                var recordIndex = node.getAttribute('data-recordIndex');

                if (recordIndex) {
                    return parseInt(recordIndex, 10);
                }

                return this.dataSource.indexOf(this.getRecord(node));
            }
        });
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server"/>
           <ext:Viewport runat="server" ID="ViewPort1" Layout="FitLayout">
        <Content>  
        <center>
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Width="800"
            AutoScroll="true"
            ButtonAlign="Center">
            <Store>
                <ext:Store ID="Store1" runat="server" GroupField="Name">
                   
                    <Model>
                        <ext:Model 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>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column                        
                        runat="server"
                        TdCls="task"
                        Text="Task"                       
                        Sortable="true"
                        DataIndex="Description"
                        Hideable="false"
                        Flex="1"
                        />
                     
                 
                </Columns>                
            </ColumnModel>            
            <Features>
                <ext:Grouping 
                    ID="Group1" 
                    runat="server" 
                    GroupHeaderTplString="{name}" 
                    HideGroupedHeader="true" 
                    EnableGroupingMenu="false" 
                    />
            </Features>
           <Buttons>
           <ext:Button runat="server" Text="Button1" />
           <ext:Button ID="Button1" runat="server" Text="Button2" />
           </Buttons>
        </ext:GridPanel>
         </center></Content>
    </ext:Viewport>
    </form>
  </body>
</html>

[Daniil]

Hi @iansriley,

Please see #73:
https://examples2.ext.net/#/Getting_...AKING_CHANGES/

[iansriley]

Thanks for your help. With HBoxLayout and Align="Strech" , Pack="Center" the issue has been resolved.

Please tell me fix for GroupField contains double quote (") then once the group is collapsed, it is not expanding again.

Thank you.

[Daniil]

Please keep one topic per thread. Starting a new thread is appreciated.