[CLOSED] How to change the width of GridPanel in RowExpander?

  1. #1

    [CLOSED] How to change the width of GridPanel in RowExpander?

    HI Ext.net Team,

    How to change the width of GridPanel in RowExpander?

    <%@ Page Language="C#" %>
    <%@ 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)
        {
            if (X.IsAjaxRequest)
            {
                //We do not need to DataBind on an DirectEvent
                return;
            }
            
            List<object> data = new List<object>();
            
            for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = "S" + i, Name = "Supplier " + i});
            }
            
            this.Store1.DataSource = data;
            this.Store1.DataBind();
        }
        
        [DirectMethod]
        public static string GetGrid(Dictionary<string, string> parameters)
        {
            // string id = parameters["id"];
            
            List<object> data = new List<object>();
            
            for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = "P" + i, Name = "Product " + i });
            }
    
            GridPanel grid = new GridPanel
            {
                Height = 150,
                EnableColumnHide = false,
                Store = 
                { 
                    new Store 
                    { 
                        Model = {
                            new Model {
                                IDProperty = "ID",
                                Fields = 
                                {
                                    new ModelField("ID"),
                                    new ModelField("Name")
                                }
                            }
                        },
                        DataSource = data
                    }
                },
                ColumnModel =
                {
                    Columns = 
                    { 
                        new Column { Text = "Products's Name", DataIndex = "Name" }
                    }
                }
            };
    
            return ComponentLoader.ToConfig(grid);
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>RowExpander with GridPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:GridPanel ID="GridPanel1" 
                runat="server"             
                Title="Expander Rows with GridPanel"
                Collapsible="true"
                AnimCollapse="true" 
                Icon="Table" 
                Width="600"
                Height="450"
                DisableSelection="true">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" />
                                    <ext:ModelField Name="Name" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">               
                    <Columns>       
                        <ext:Column ID="Column1" runat="server" Text="Supplier" DataIndex="Name" Flex="1" />
                    </Columns>
                </ColumnModel>            
                <Plugins>
                    <ext:RowExpander ID="RowExpander1" runat="server">
                        <Loader ID="Loader1" runat="server" DirectMethod="#{DirectMethods}.GetGrid" Mode="Component">
                            <LoadMask ShowMask="true" />
                            <Params>
                                <ext:Parameter Name="id" Value="this.record.getId()" Mode="Raw" />
                            </Params>
                        </Loader>
                    </ext:RowExpander>
                </Plugins>            
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Click image for larger version. 

Name:	2013-09-26-GridofExt.png 
Views:	21 
Size:	17.3 KB 
ID:	6939

    Any advice?
    Thanks
    Last edited by Daniil; Sep 27, 2013 at 5:56 AM. Reason: [CLOSED]
  2. #2
    Hi @capbarbell,

    I think you can:

    1. Set up some Width for the inner GridPanel:
    Width = 200
    2. Return the following from the GetGrid method:
    return ComponentLoader.ToConfig(new Container()
    {
        Items = { grid }
    });
  3. #3
    Quote Originally Posted by Daniil View Post

    1. Set up some Width for the inner GridPanel:
    Width = 200
    2. Return the following from the GetGrid method:
    return ComponentLoader.ToConfig(new Container()
    {
        Items = { grid }
    });
    HI Daniil,

    That solved it.
    Thank you.

Similar Threads

  1. Replies: 2
    Last Post: Jan 31, 2013, 4:56 PM
  2. Replies: 1
    Last Post: Jun 11, 2012, 11:59 AM
  3. Replies: 6
    Last Post: Jun 11, 2010, 12:47 PM
  4. Replies: 1
    Last Post: Oct 06, 2009, 10:58 AM
  5. Replies: 4
    Last Post: Aug 04, 2009, 11:37 AM

Posting Permissions