Layout issue: Show Gridpanel in gridpanel with rowexpander

Page 1 of 2 12 LastLast
  1. #1

    Layout issue: Show Gridpanel in gridpanel with rowexpander

    Hi,

    This example is based on the dynamic gridpanels with rowexpander.
    When you expand a row, a gridpanel is shown for that row expander. Now i've expanded the example with multiple columns and column headers and then you can see in attachment that the column values are not displayed exactly under the correct column header anymore. The column headers are shifting to the left.

    Full code:
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic"%>
    <%@ Import Namespace="ListView=Ext.Net.ListView"%>
    <%@ 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, General = "Supplier " + i, Name1 = "Name1", Name2 = "Name2", Name3 = "Name3", Name4 = "Name4", Name5 = "Name5", Name6 = "Name6" });
            }
            
            this.Store1.DataSource = data;
            this.Store1.DataBind();
        }
        
        private void RemoveFromCache(string id)
        {
            X.Js.Call("removeFromCache", id);
        }
        private void AddToCache(string id)
        {
            X.Js.Call("addToCache", id);
        }
        protected void BeforeExpand(object sender, DirectEventArgs e)
        {
            string id = e.ExtraParams["id"];
            
            Store store = new Store { ID = "StoreRow_"+id };
            JsonReader reader = new JsonReader();
            reader.IDProperty = "ID";
            reader.Fields.Add("ID", "General", "Name1", "Name2", "Name3", "Name4", "Name5", "Name6");
            store.Reader.Add(reader);
            List<object> data = new List<object>();
            
            for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = "P" + i, General = "Product " + i, Name1 = "Name1", Name2 = "Name2", Name3 = "Name3", Name4 = "Name4", Name5 = "Name5", Name6 = "Name6" });
            }
            store.DataSource = data;
            this.RemoveFromCache(store.ID);
            store.Render();
            this.AddToCache(store.ID);
            
            GridPanel grid = new GridPanel{
                 ID = "GridPanelRow_"+id,
                 StoreID = "{raw}StoreRow_" + id,
                 Height = 200
            };
            grid.ColumnModel.Columns.Add(new Column { Header = "General", DataIndex = "General" });
            grid.ColumnModel.Columns.Add(new Column { Header = "Name1", DataIndex = "Name1" });
            grid.ColumnModel.Columns.Add(new Column { Header = "Name2", DataIndex = "Name2" });
            grid.ColumnModel.Columns.Add(new Column { Header = "Name3", DataIndex = "Name3" });
            grid.ColumnModel.Columns.Add(new Column { Header = "Name4", DataIndex = "Name4" });
            grid.ColumnModel.Columns.Add(new Column { Header = "Name5", DataIndex = "Name5" });
            grid.ColumnModel.Columns.Add(new Column { Header = "Name6", DataIndex = "Name6" });
            
            grid.ColumnModel.ID = "GridPanelRowCM_" + id;
            Ext.Net.GridView gdView = new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true };
            HeaderGroupRow HGR = new Ext.Net.HeaderGroupRow();
            HGR.Columns.Add(new HeaderGroupColumn { ColSpan=1, Header=""});
            HGR.Columns.Add(new HeaderGroupColumn { ColSpan=2, Header="Name1 & Name2"});
            HGR.Columns.Add(new HeaderGroupColumn { ColSpan=2, Header="Name3 & Name4"});
            HGR.Columns.Add(new HeaderGroupColumn { ColSpan=2, Header="Name5 & Name6"});
            gdView.HeaderGroupRows.Add(HGR);
            grid.View.Add(gdView);
            //important
            X.Get("row-" + id).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick"}, true);
            this.RemoveFromCache(grid.ID);
            grid.Render("row-" + id, RenderMode.RenderTo);
            this.AddToCache(grid.ID);
        }
        
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>RowExpander with GridPanel - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
        <ext:ResourcePlaceHolder runat="server" Mode="Script" />
        
        <script type="text/javascript">
            window.lookup = [];
            
            var clean = function () {
                if (window.lookup.length > 0) {
                    RowExpander1.collapseAll();
                    
                    Ext.each(window.lookup, function (control) {
                        if (control) {
                            control.destroy();
                        }
                    });
                    
                    window.lookup = [];
                }            
            };
            var removeFromCache = function(c) {
                var c = window[c];
                window.lookup.remove(c);
                
                if (c) {
                    c.destroy();
                }
            };
            var addToCache = function(c) {
                window.lookup.push(window[c]);
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>Row Expander Plugin with GridPanel</h1>
            
            <p>The caching is presented, GridPanel renders once only (until view refresh)</p>
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="ID">
                        <Fields>
                            <ext:RecordField Name="ID" />
                            <ext:RecordField Name="General" />
                            <ext:RecordField Name="Name1" />
                            <ext:RecordField Name="Name2" />
                            <ext:RecordField Name="Name3" />
                            <ext:RecordField Name="Name4" />
                            <ext:RecordField Name="Name5" />
                            <ext:RecordField Name="Name6" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                TrackMouseOver="false"
                Title="Expander Rows with ListView" 
                Collapsible="true"
                AnimCollapse="true" 
                Icon="Table" 
                Width="600" 
                Height="600">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Supplier" DataIndex="General" />
                        <ext:Column Header="Name1" DataIndex="Name1" />
                        <ext:Column Header="Name2" DataIndex="Name2" />
                        <ext:Column Header="Name3" DataIndex="Name3" />
                        <ext:Column Header="Name4" DataIndex="Name4" />
                        <ext:Column Header="Name5" DataIndex="Name5" />
                        <ext:Column Header="Name6" DataIndex="Name6" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server" ForceFit="true">
                        <Listeners>
                            <BeforeRefresh Fn="clean" />
                        </Listeners>
                        <HeaderGroupRows>
                            <ext:HeaderGroupRow>
                                <Columns>
                                    <ext:HeaderGroupColumn ColSpan="1" />
                                    <ext:HeaderGroupColumn ColSpan="1" />
                                    <ext:HeaderGroupColumn ColSpan="2" Header="Name1 & Name2" />
                                    <ext:HeaderGroupColumn ColSpan="2" Header="Name3 & Name4" />
                                    <ext:HeaderGroupColumn ColSpan="2" Header="Name5 & Name6" />
                                </Columns>
                            </ext:HeaderGroupRow>
                        </HeaderGroupRows>
                    </ext:GridView>
                </View>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" />
                </SelectionModel>
                <Plugins>
                    <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
                        <Template runat="server">
                            <Html>
           <div id="row-{ID}" style="background-color:White;"></div>
          </Html>
                        </Template>
                        <DirectEvents>
                            <BeforeExpand 
                                OnEvent="BeforeExpand" 
                                Before="return !body.rendered;" 
                                Success="body.rendered=true;">
                                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
                                <ExtraParams>
                                    <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
                                </ExtraParams>
                            </BeforeExpand>
                        </DirectEvents>
                    </ext:RowExpander>
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	screen.PNG 
Views:	380 
Size:	34.0 KB 
ID:	1963  
  2. #2
    Hi,

    Confirmed.

    Will the issue persist if you will create a GridPanel via code-behind without RowExpander?
  3. #3
    What do you mean without rowexpander?
    The purpose is to display a grid under a grid under a grid, ....

    So as you can see in the attachment, how deeper the grid level, how more the columns are shifted to the left and the values are not displayed under the right column anymore.
    Attached Thumbnails Click image for larger version. 

Name:	screen.PNG 
Views:	254 
Size:	31.7 KB 
ID:	1966  
    Last edited by Birgit; Nov 30, 2010 at 5:17 PM.
  4. #4
    Quote Originally Posted by Birgit View Post
    What do you mean without rowexpander?
    Hi,

    I just asked you for your help to localize the problem.

    Quote Originally Posted by Birgit View Post
    The purpose is to display a grid under a grid under a grid, ....

    So as you can see in the attachment, how deeper the grid level, how more the columns are shifted to the left and the values are not displayed under the right column anymore.
    I was able to align header via applying the following css rules.

    Css rules to fix
    .x-grid3-row td {
        padding-left: 0px;
        padding-right: 0px;
    }
    Also the GridView's ScrollOffset property can help you to get a grid looks better.

    Example
    <ext:GridView runat="server" ForceFit="true" ScrollOffset="0">
  5. #5
    During working on the issue I have faced to a header issue.

    Sample to reproduce
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" Width="600" AutoHeight="true">
            <Store>
                <ext:Store runat="server" />
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />    
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" ForceFit="true" ScrollOffset="0" />
            </View>
        </ext:GridPanel>
        </form>
    </body>
    </html>
    Fixing this issue also can improve the appearance of your grid. But I have not fixed it yet.
  6. #6
    Regarding the issue in the previous post.

    ForceFit causes this issue. This sets the most possible height for header's cells and some space leaves at the edge.

    I wrote "adjusting" function.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <ext:ResourcePlaceHolder runat="server" />
        <script type="text/javascript">
            var getDiff = function(grid) {
                var mainHd = grid.getView().mainHd,
                    headersHeight = mainHd.getWidth(),
                    headersOffsetHeight = mainHd.child(".x-grid3-header-offset").getWidth();
                return headersHeight - headersOffsetHeight;
            }
    
            var adjustHeaders = function(grid, diff) {
                var mainHd = grid.getView().mainHd,
                    headerCells = mainHd.dom.getElementsByTagName('td'),
                    i = 0;
    
                while (diff-- > 0) {
                    hcell = Ext.fly(headerCells[i++]);
                    hcell.setWidth(hcell.getWidth() + 1);
                }
            }
            
            Ext.onReady(function () {
                var grid = GridPanel1,
                    diff = getDiff(grid);
                if (confirm('Adjust?') && diff > 0) {
                    grid.on('viewready', function() { adjustHeaders(this, diff) });
                    grid.getView().on('refresh', function() { adjustHeaders(grid, diff) });
                }
            });
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            AutoHeight="true" 
            Width="500">
            <Store>
                <ext:Store runat="server" />
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                    <ext:Column Header="Test" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" ForceFit="true" ScrollOffset="0" />
            </View>
            <Plugins>
                <ext:RowExpander />
            </Plugins>
            <Listeners>
            </Listeners>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  7. #7
    Thanx a lot! I think you're almost there. Now the headergroupcolumns are adjusted, but my header columns not

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head id="Head1" runat="server">     
        <title>Ext.Net Example</title>       
        
        <script runat="server">
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
                Store1.DataSource = New System.Object() {New System.Object() {"bla", "1", "2", "3", "4", "5", "6"}}
                Store1.DataBind()
            End Sub
            
            <DirectMethod()> _
            Public Sub AddGrid(ByVal Expander As System.Object)
                Dim _GridPanel As GridPanel
                Dim _Store As Store = Nothing
                Dim _JsonReader As JsonReader
                Dim _GridView As Ext.Net.GridView
                Dim _HGR2 As HeaderGroupRow
                Dim _renderEl As System.String
                
                _GridPanel = New Ext.Net.GridPanel
                _GridView = New Ext.Net.GridView()
                _Store = New Store
                _JsonReader = New JsonReader
                _HGR2 = New HeaderGroupRow
                
                _GridPanel.StoreID = "Store1"
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "general"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "firstName"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "second"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "third"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "fourth"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "fifth"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "sixth"})
                
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = ""})
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = ""})
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = "First & Second"})
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = "Third & Fourht"})
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = "Fifth & Sixth"})
                _GridView.HeaderGroupRows.Add(_HGR2)
                
                _GridPanel.View.Add(_GridView)
                
                Ext.Net.X.Get("row-1").SwallowEvent(New System.String() {"click", "mousedown", "mouseup", "dblclick"}, True)
                _GridPanel.Render("row-1", RenderMode.RenderTo)
            End Sub
            
        </script>
        
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" /> 
        
        <script type="text/javascript">
            var getDiff = function(grid) {
                var mainHd = grid.getView().mainHd,
                headersHeight = mainHd.getWidth(),
                headersOffsetHeight = mainHd.child(".x-grid3-header-offset").getWidth();
                return headersHeight - headersOffsetHeight;
            }
            var adjustHeaders = function(grid, diff) {
                var mainHd = grid.getView().mainHd,
                headerCells = mainHd.dom.getElementsByTagName('td'),
                i = 0;
                while (diff-- > 0) {
                    hcell = Ext.fly(headerCells[i++]);
                    hcell.setWidth(hcell.getWidth() + 1);
                }
            }
            Ext.onReady(function() {
                var grid = GridPanel1,
                diff = getDiff(grid);
                if (confirm('Adjust?') && diff > 0) {
                    grid.on('viewready', function() {
                        adjustHeaders(this, diff)
                    });
                    grid.getView().on('refresh', function() { adjustHeaders(grid, diff) });
                }
            }); 
            
            var LoadGrid = function(expander, record, body, row) {
                if (body.rendered) {
                    return;
                }
                mLevels.AddGrid(expander.id, { eventMask: {
                    showMask: true,
                    tartget: "customtarget",
                    customTarget: expander.grid.body
                },
                    success: function() {
                        body.rendered = true;
                    }
                });
            }
            
        var renderCombo = function(grid) {
            var el = grid.getView().el.child(".x-grid3-td-1");
            el.update("");
        
            new Ext.form.ComboBox({
                id: "ComboBox1",
                renderTo: el,
                displayField: "state",
                triggerAction: "all",
                valueField: "abbr",
                store: new Ext.data.Store({
                    autoLoad: true,
                    reader: new Ext.data.ArrayReader({
                    fields: [{ name: "abbr" },{ name: "state" },{ name: "nick"}]}),
                    proxy: new Ext.data.MemoryProxy(
                    [
                        [60, "Alabama", "The Heart of Dixie"],
                        [1, "Alaska", "The Land of the Midnight Sun"],
                        [0, "Arizona", "The Grand Canyon State"],
                        [3, "Arkansas", "The Natural State"]
                    ],
                    false)
                })
            });
        }     
        </script>   
    </head> 
    <body>     
        <form id="Form1" runat="server">     
            <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="mLevels">         
                <Listeners>             
                    <DocumentReady Handler="ComboBox1 = null;"/>         
                </Listeners>     
            </ext:ResourceManager>     
            
            <ext:GridPanel ID="GridPanel1" runat="server" Layout="Fit" Height="200">         
                <Store>
                <ext:Store ID="Store1" runat="server">  
                    <Reader>                     
                        <ext:ArrayReader>                         
                            <Fields>                             
                                <ext:RecordField Name="general" />                             
                                <ext:RecordField Name="FirstName" />                             
                                <ext:RecordField Name="SecondName" />                             
                                <ext:RecordField Name="ThirdName" />                             
                                <ext:RecordField Name="FourthName" />                             
                                <ext:RecordField Name="FifthName" />                             
                                <ext:RecordField Name="SixthName" />                         
                            </Fields>                     
                        </ext:ArrayReader>                 
                    </Reader>             
                </ext:Store>         
                </Store>         
            <ColumnModel ID="ColumnModel1" runat="server">             
                <Columns>                 
                    <ext:Column DataIndex="general" Header="general" />                 
                    <ext:Column DataIndex="FirstName" Header="First Name" />                 
                    <ext:Column DataIndex="SecondName" Header="Second Name" />                 
                    <ext:Column DataIndex="ThirdName" Header="Third Name" />                 
                    <ext:Column DataIndex="FourthName" Header="Fourth Name" />                 
                    <ext:Column DataIndex="FifthName" Header="Fifth Name" />                 
                    <ext:Column DataIndex="SixthName" Header="Sixth Name" />             
                </Columns>         
            </ColumnModel>         
            <SelectionModel>             
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />         
            </SelectionModel>         
            <Plugins>             
                <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">         
                    <Listeners>
                        <BeforeExpand Fn="LoadGrid" />
                    </Listeners>
                    <Template ID="Template1" runat="server">
                        <Html>
          <div id="row-{ID}" style="background-color:White;"></div>
         </Html>
                    </Template>                
                </ext:RowExpander>
            </Plugins>         
            <View>             
                <ext:GridView ID="GridView1" runat="server" ForceFit="true">                 
                    <HeaderGroupRows>                     
                        <ext:HeaderGroupRow>                         
                            <Columns>                             
                                <ext:HeaderGroupColumn ColSpan="1" />                             
                                <ext:HeaderGroupColumn ColSpan="1" />                             
                                <ext:HeaderGroupColumn Header="First & Second" ColSpan="2" Align="Center" />                             
                                <ext:HeaderGroupColumn Header="Thirth & Fourth" ColSpan="2" Align="Center" />                             
                                <ext:HeaderGroupColumn Header="Fifth & Sixth" ColSpan="2" Align="Center" />                         
                            </Columns>                     
                        </ext:HeaderGroupRow>                 
                    </HeaderGroupRows>                 
                    <Listeners>                     
                        <Refresh Handler="  if (ComboBox1) {                                             
                                                if (Ext.isIE) {                                                 
                                                    ComboBox1.destroy();                                                 
                                                    renderCombo(this.grid);                                                 
                                                } else {                                                 
                                                    var el = this.grid.getView().el.child('.x-grid3-hd-inner.x-grid3-hd-1');                                                 
                                                        el.replaceWith(ComboBox1.getEl().parent().dom);                                             
                                                    }                                         
                                                }"/>                     
                    </Listeners>                             
                </ext:GridView>         
            </View>         
            <Listeners>             
                <ViewReady Handler="renderCombo(this);" />         
            </Listeners>     
        </ext:GridPanel>     
        
    </form> 
    </body> 
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	screen.PNG 
Views:	148 
Size:	7.4 KB 
ID:	1984  
  8. #8
    Are you that the code you provided causes the issue?

    I have executed the page and got the adjusted headers (group and common).

    Attachment 1985
  9. #9
    Hi Daniil,

    I think i found my problem.
    In my production version i have the addToCache and removeFromCache, when i leave this code, then columns are displayed well.
    Can you please look at it one more time how it comes?

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head id="Head1" runat="server">     
        <title>Ext.Net Example</title>       
        
        <script runat="server">
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
                Store1.DataSource = New System.Object() {New System.Object() {"bla", "1", "2", "3", "4", "5", "6"}}
                Store1.DataBind()
            End Sub
            
            <DirectMethod()> _
            Public Sub AddGrid()
                Dim _GridPanel As GridPanel
                Dim _Store As Store = Nothing
                Dim _JsonReader As JsonReader
                Dim _GridView As Ext.Net.GridView
                Dim _HGR2 As HeaderGroupRow
                Dim _renderEl As System.String
                
                _GridPanel = New Ext.Net.GridPanel
                _GridView = New Ext.Net.GridView()
                _Store = New Store
                _JsonReader = New JsonReader
                _HGR2 = New HeaderGroupRow
                
                _GridPanel.StoreID = "Store1"
                _GridPanel.ID = "GridPanel2"
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "general"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "firstName"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "second"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "third"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "fourth"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "fifth"})
                _GridPanel.ColumnModel.Columns.Add(New Column() With {.Header = "sixth"})
                
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = ""})
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = ""})
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = "First & Second"})
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = "Third & Fourht"})
                _HGR2.Columns.Add(New HeaderGroupColumn() With {.Header = "Fifth & Sixth"})
                _GridView.HeaderGroupRows.Add(_HGR2)
                
                _GridPanel.View.Add(_GridView)
                Dim renderEL As System.String = "row-1"
                Ext.Net.X.Get(renderEL).SwallowEvent(New System.String() {"click", "mousedown", "mouseup", "dblclick"}, True)
                Me.RemoveFromCache("GridPanel2", GridPanel1.ID)
                _GridPanel.Render(renderEL, RenderMode.RenderTo)
                Me.AddToCache("GridPanel2", GridPanel1.ID)
                
            End Sub
            
            Private Sub RemoveFromCache(ByVal ID As System.String, ByVal ParentID As System.String)
                Me.ResourceManager1.AddScript("removeFromCache({0}, {1});", JSON.Serialize(ID), JSON.Serialize(ParentID))
            End Sub
            Private Sub AddToCache(ByVal ID As System.String, ByVal ParentID As System.String)
                Me.ResourceManager1.AddScript("addToCache({0}, {1});", JSON.Serialize(ID), JSON.Serialize(ParentID))
            End Sub
        </script>
        
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" /> 
        
        <script type="text/javascript">
            window.lookup = {};
            
            var clean = function(view, isDestroy) {
                var controls = window.lookup[view.grid.id] || {},
                    ids = [];
                for (var c in controls) {
                    ids.push(controls[c].id || controls[c].storeId);
                }
                if (ids.length > 0) {
                    if (isDestroy !== true) {
                        view.grid.getRowExpander().collapseAll();
                    }
                    for (var i = 0; i < ids.length; i++) {
                        removeFromCache(ids[i], view.grid.id);
                    }
                }
            };
            
            var addToCache = function(c, parent) {
                window.lookup[parent] = window.lookup[parent] || {};
                window.lookup[parent][c] = window[c];
            }
            var removeFromCache = function(c, parent) {
                window.lookup[parent] = window.lookup[parent] || {};
                var ctrl = window.lookup[parent][c];
                delete window.lookup[parent][c];
                if (ctrl) {
                    if (ctrl.view) {
                        clean(ctrl.view, true);
                    }
                    ctrl.destroy();
                }
            }
            var getDiff = function(grid) {
                var mainHd = grid.getView().mainHd,
                headersHeight = mainHd.getWidth(),
                headersOffsetHeight = mainHd.child(".x-grid3-header-offset").getWidth();
                return headersHeight - headersOffsetHeight;
            }
            var adjustHeaders = function(grid, diff) {
                var mainHd = grid.getView().mainHd,
                headerCells = mainHd.dom.getElementsByTagName('td'),
                i = 0;
                while (diff-- > 0) {
                    hcell = Ext.fly(headerCells[i++]);
                    hcell.setWidth(hcell.getWidth() + 1);
                }
            }
            Ext.onReady(function() {
                var grid = GridPanel1,
                diff = getDiff(grid);
                if (confirm('Adjust?') && diff > 0) {
                    grid.on('viewready', function() {
                        adjustHeaders(this, diff)
                    });
                    grid.getView().on('refresh', function() { adjustHeaders(grid, diff) });
                }
            });
            var LoadGrid = function(expander, record, body, row) {
                if (body.rendered) {
                    return;
                }
                alert(record.id);
                mLevels.AddGrid({ eventMask: {
                    showMask: true,
                    tartget: "customtarget",
                    customTarget: expander.grid.body
                },
                    success: function() {
                        body.rendered = true;
                    }
                });
            }
            
        var renderCombo = function(grid) {
            var el = grid.getView().el.child(".x-grid3-td-1");
            el.update("");
        
            new Ext.form.ComboBox({
                id: "ComboBox1",
                renderTo: el,
                displayField: "state",
                triggerAction: "all",
                valueField: "abbr",
                store: new Ext.data.Store({
                    autoLoad: true,
                    reader: new Ext.data.ArrayReader({
                    fields: [{ name: "abbr" },{ name: "state" },{ name: "nick"}]}),
                    proxy: new Ext.data.MemoryProxy(
                    [
                        [60, "Alabama", "The Heart of Dixie"],
                        [1, "Alaska", "The Land of the Midnight Sun"],
                        [0, "Arizona", "The Grand Canyon State"],
                        [3, "Arkansas", "The Natural State"]
                    ],
                    false)
                })
            });
        }     
        </script>   
    </head> 
    <body>     
        <form id="Form1" runat="server">     
            <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="mLevels">         
                <Listeners>             
                    <DocumentReady Handler="ComboBox1 = null;"/>         
                </Listeners>     
            </ext:ResourceManager>     
            
            <ext:GridPanel ID="GridPanel1" runat="server" Layout="Fit" Height="200">         
                <Store>
                <ext:Store ID="Store1" runat="server">  
                    <Reader>                     
                        <ext:ArrayReader>                         
                            <Fields>                             
                                <ext:RecordField Name="general" />                             
                                <ext:RecordField Name="FirstName" />                             
                                <ext:RecordField Name="SecondName" />                             
                                <ext:RecordField Name="ThirdName" />                             
                                <ext:RecordField Name="FourthName" />                             
                                <ext:RecordField Name="FifthName" />                             
                                <ext:RecordField Name="SixthName" />                         
                            </Fields>                     
                        </ext:ArrayReader>                 
                    </Reader>             
                </ext:Store>         
                </Store>         
            <ColumnModel ID="ColumnModel1" runat="server">             
                <Columns>                 
                    <ext:Column DataIndex="general" Header="general" />                 
                    <ext:Column DataIndex="FirstName" Header="First Name" />                 
                    <ext:Column DataIndex="SecondName" Header="Second Name" />                 
                    <ext:Column DataIndex="ThirdName" Header="Third Name" />                 
                    <ext:Column DataIndex="FourthName" Header="Fourth Name" />                 
                    <ext:Column DataIndex="FifthName" Header="Fifth Name" />                 
                    <ext:Column DataIndex="SixthName" Header="Sixth Name" />             
                </Columns>         
            </ColumnModel>         
            <SelectionModel>             
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />         
            </SelectionModel>         
            <Plugins>             
                <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">         
                    <Listeners>
                        <BeforeExpand Fn="LoadGrid" />
                    </Listeners>
                    <Template ID="Template1" runat="server">
                        <Html>
          <div id="row-{ID}" style="background-color:White;"></div>
         </Html>
                    </Template>                
                </ext:RowExpander>
            </Plugins>         
            <View>             
                <ext:GridView ID="GridView1" runat="server" ForceFit="true">                 
                    <HeaderGroupRows>                     
                        <ext:HeaderGroupRow>                         
                            <Columns>                             
                                <ext:HeaderGroupColumn ColSpan="1" />                             
                                <ext:HeaderGroupColumn ColSpan="1" />                             
                                <ext:HeaderGroupColumn Header="First & Second" ColSpan="2" Align="Center" />                             
                                <ext:HeaderGroupColumn Header="Thirth & Fourth" ColSpan="2" Align="Center" />                             
                                <ext:HeaderGroupColumn Header="Fifth & Sixth" ColSpan="2" Align="Center" />                         
                            </Columns>                     
                        </ext:HeaderGroupRow>                 
                    </HeaderGroupRows>                 
                    <Listeners>                     
                        <Refresh Handler="  if (ComboBox1) {                                             
                                                if (Ext.isIE) {                                                 
                                                    ComboBox1.destroy();                                                 
                                                    renderCombo(this.grid);                                                 
                                                } else {                                                 
                                                    var el = this.grid.getView().el.child('.x-grid3-hd-inner.x-grid3-hd-1');                                                 
                                                        el.replaceWith(ComboBox1.getEl().parent().dom);                                             
                                                    }                                         
                                                }"/>                     
                    </Listeners>                             
                </ext:GridView>         
            </View>         
            <Listeners>             
                <ViewReady Handler="renderCombo(this);" />         
            </Listeners>     
        </ext:GridPanel>     
        
    </form> 
    </body> 
    </html>
    Last edited by Birgit; Dec 02, 2010 at 12:36 PM.
  10. #10
    Hi Daniil,

    Please forget my last post.
    I have now a great example to test with. It's the one on the example explorer, but i extended it with multiple columns and with headergrouprows. Then you can see the problem and layout issues.

    <%@ Page Language="C#" %>
    <%@ Import Namespace="Ext.Net.Utilities"%>
    <%@ Import Namespace="System.Collections.Generic"%>
    <%@ Import Namespace="ListView=Ext.Net.ListView"%>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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 (X.IsAjaxRequest)
            {
                //We do not need to DataBind on an DirectEvent
                return;
            }
            
            //Build first level
            this.BuildLevel(1, "r0", "g0");
        }
        [DirectMethod]
        public void BuildLevel(int level, string recId, string gridId)
        {
            var storeId = "L".ConcatWith(level, "_", recId, "_Store");
            var newGridId = "L".ConcatWith(level, "_", recId, "_Grid");
            
            // build store
            var store = new Store{ID = storeId};
            var reader = new JsonReader {IDProperty = "ID"};
            reader.Fields.Add("ID", "General", "Name1", "Name2", "Name3", "Name4", "Name5", "Name6");
            reader.Fields.Add(new RecordField
                                  {
                                      Name = "Level",
                                      Convert = {Handler = "return ".ConcatWith(level, ";")}
                                  });
            store.Reader.Add(reader);
            store.CustomConfig.Add(new ConfigItem("level", level.ToString(), ParameterMode.Raw));
            // bind store
            var data = new List<object>();
            for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = recId.ConcatWith("_R", i), General = "General", Name1 = "Level".ConcatWith(level, ": Row " + i), Name2 = "Level".ConcatWith(level, ": Row " + i), Name3 = "Level".ConcatWith(level, ": Row " + i), Name4 = "Level".ConcatWith(level, ": Row " + i), Name5 = "Level".ConcatWith(level, ": Row " + i), Name6 = "Level".ConcatWith(level, ": Row " + i) });
            }
            
            //build grid
            var grid = new GridPanel
                                 {
                                     ID = newGridId,
                                     Store = { 
                                        store
                                     },
                                     AutoHeight = true,
                                     HideHeaders = false
                                 };
            
            //build columns
            grid.ColumnModel.Columns.Add(new Column { DataIndex = "General", Header = "General" });
            grid.ColumnModel.Columns.Add(new Column { DataIndex = "Name1", Header = "Name1" });
            grid.ColumnModel.Columns.Add(new Column { DataIndex = "Name2", Header = "Name2" });
            grid.ColumnModel.Columns.Add(new Column { DataIndex = "Name3", Header = "Name3" });
            grid.ColumnModel.Columns.Add(new Column { DataIndex = "Name4", Header = "Name4" });
            grid.ColumnModel.Columns.Add(new Column { DataIndex = "Name5", Header = "Name5" });
            grid.ColumnModel.Columns.Add(new Column { DataIndex = "Name6", Header = "Name6" });
            grid.ColumnModel.ID = newGridId + "_CM";
            
            // build view
            var view = new Ext.Net.GridView
                                        {
                                            ID = newGridId + "_View",
                                            ForceFit = true
                                        };
            var headerGrouprow = new Ext.Net.HeaderGroupRow();
            headerGrouprow.Columns.Add(new HeaderGroupColumn { Header = "", ColSpan = 2, Align = Alignment.Center });
            headerGrouprow.Columns.Add(new HeaderGroupColumn { Header = "Name 1 & Name 2", ColSpan = 2, Align = Alignment.Center });
            headerGrouprow.Columns.Add(new HeaderGroupColumn { Header = "Name 3 & Name 4", ColSpan = 2, Align = Alignment.Center });
            headerGrouprow.Columns.Add(new HeaderGroupColumn { Header = "Name 5 & Name 6", ColSpan = 2, Align = Alignment.Center });
            view.HeaderGroupRows.Add(headerGrouprow);
                
            grid.View.Add(view);
            
            // build selection model
            var sm = new RowSelectionModel { ID = newGridId + "_SM" };
            grid.SelectionModel.Add(sm);
            
            // add expander for all levels except last (last level is 5)
            if (level < 5)
            {
                view.Listeners.BeforeRefresh.Fn = "clean";
                var re = new RowExpander
                                     {
                                         ID = newGridId + "_RE",
                                         EnableCaching = true,
                                         Template = { ID = newGridId + "_TPL", Html = "<div id=\"row_{ID}\" style=\"background-color:white;\"></div>" }
                                     };
                re.Listeners.BeforeExpand.Fn = "loadLevel";
                
                grid.Plugins.Add(re);
            }
            store.DataSource = data;
            store.DataBind();  
            
            if (level == 1)
            {
                grid.Title = "MultiLevel grid";
                grid.Width = 1000;
                grid.Height = 600;
                grid.AutoHeight = false;            
                this.Form.Controls.Add(grid);
                
                grid.Plugins.Add(new PanelResizer());            
            }
            else
            {
                var renderEl = "row_" + recId;
                X.Get(renderEl).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick" }, true);
                this.RemoveFromCache(newGridId, gridId);
                grid.Render(renderEl, RenderMode.RenderTo);
                this.AddToCache(newGridId, gridId);
            }  
        }
        
        private void RemoveFromCache(string id, string parentId)
        {
            ResourceManager1.AddScript("removeFromCache({0}, {1});", JSON.Serialize(id), JSON.Serialize(parentId));
        }
        private void AddToCache(string id, string parentId)
        {
            ResourceManager1.AddScript("addToCache({0}, {1});", JSON.Serialize(id), JSON.Serialize(parentId));
        }
        
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>MultiLevel GridPanel - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        
        <script type="text/javascript">
            window.lookup = {};
            
            var clean = function (view, isDestroy) {
                var controls = window.lookup[view.grid.id] || {},
                    ids = [];            
                
                for(var c in controls){
                    ids.push(controls[c].id || controls[c].storeId);
                }
                
                if (ids.length > 0){
                    if (isDestroy !== true){
                        view.grid.getRowExpander().collapseAll();
                    }
                    
                    for(var i=0; i<ids.length;i++){
                        removeFromCache(ids[i], view.grid.id);
                    }
                }
            };
            
            var addToCache = function(c, parent){
                window.lookup[parent] = window.lookup[parent] || {};
                window.lookup[parent][c] = window[c];      
            }
            
            var removeFromCache = function(c, parent){             
                window.lookup[parent] = window.lookup[parent] || {};
                
                var ctrl = window.lookup[parent][c];
                delete window.lookup[parent][c];
                if (ctrl){
                    if (ctrl.view){
                        clean(ctrl.view, true);
                    }
                    ctrl.destroy();                
                }       
            }
            
            var loadLevel = function(expander, record, body, row){
                if (body.rendered){
                    return;
                }
                
                var recId = record.id,
                    gridId = expander.grid.id,
                    level = record.data.Level;
                
                mLevels.BuildLevel(level+1, recId, gridId, {
                    eventMask: {
                        showMask: true,
                        tartget: "customtarget",
                        customTarget: expander.grid.body
                    },
                    
                    success: function(){
                        body.rendered = true;
                    }
                });
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="mLevels" />
            
            <h1>MultiLevel GridPanel</h1>
            
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	screen.PNG 
Views:	226 
Size:	43.5 KB 
ID:	1989  
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] GridPanel Layout Issue
    By alliedwallet.com in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 27, 2011, 6:53 PM
  2. Replies: 1
    Last Post: Jun 15, 2011, 9:01 AM
  3. [CLOSED] RowExpander: GridPanel button doesn't show
    By capecod in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 03, 2010, 3:36 PM
  4. Gridpanel layout issue in IE8
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 24, 2009, 1:12 PM
  5. [CLOSED] Issue with gridpanel rendering within a fit layout
    By Dave.Sanders in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 22, 2008, 6:42 PM

Tags for this Thread

Posting Permissions