[CLOSED] Version 2.0 Grid not displaying in TabPanel with ViewPort

  1. #1

    [CLOSED] Version 2.0 Grid not displaying in TabPanel with ViewPort

    I am having an issue with the Grid not being displayed when I display it in a TabPanel in a ViewPort


    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <%--<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />--%>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var addTab = function (tabPanel, id, url, menuItem, tabTitle) {
                    var tab = tabPanel.getComponent(id);
    
                    if (!tab) {
                        tab = tabPanel.add({
                            id: id,
                            title: tabTitle,
                            closable: true,
                            menuItem: menuItem,
                            loader: {
                                url: url,
                                rendered: "frame",
                                loadMask: {
                                    showMask: true,
                                    msg: "Loading " + url + "..."
                                }
                            }
                        });
                        tab.on("activate", function(tab){
                            #{MenuPanel1}.setSelection(tab.menuItem);
                            });
                    }
                    tabPanel.setActiveTab(tab);
                }
            </script>
        </ext:XScript>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server"  />
        <div>
            <ext:Viewport ID="viewPort1" runat="server" StyleSpec="background-color: transparent;"  Layout="BorderLayout">
                <Items>
                    <ext:Panel 
                        Id="pnlTop"
                        runat="server"
                        Region="North"
                        Border="false">
                        <Items>
                        <ext:Toolbar ID="tbMain" runat="server" Cls="customToolbar">
                        <Items>
                            <ext:ToolbarFill />
    
                            <ext:ToolbarSeparator />
                            <ext:Button ID="bLogin" runat="server" Text="Sign-In" Icon="Lock" Cls="blue" >
                            </ext:Button>
                        </Items>
                        </ext:Toolbar>
                        </Items>
                    </ext:Panel>
    
    
                    <ext:MenuPanel 
                        ID="MenuPanel1" 
                        runat="server" 
                        Width="200" 
                        Region="West">
                        <Menu ID="Menu1" runat="server">
                            <Items>
                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Test Page 1">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, 'idClt', 'TestPage1.aspx', this, 'Test Page 1');" />
                                    </Listeners>
                                </ext:MenuItem>
                                
                                <ext:MenuSeparator />
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
    
    
                <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" Margins="0 4 4 0" 
                EnableTabScroll="true"                
                    Cls="tabs"
                    MinTabWidth="115">
                    <Items>
                        <ext:Panel ID="Panel2"
                            BodyStyle="background-color: transparent;" 
                            runat="server"
                            Title="Home"
                            Border="false">
                                <Loader ID="Loader1" runat="server" Url="../Views/Home/Default.aspx"  Mode="Frame" >
                        
                                </Loader>
    
                        </ext:Panel>
                    </Items>
                    </ext:TabPanel>
    
    
    
                    <ext:Panel ID="pnlSouth" runat="server" Region="South" Height="30" Border="false" Header="false" BodyStyle="background-color: transparent;" HideBorders="true">
    
                    <BottomBar>
                            <ext:Toolbar ID="Toolbar1" runat="server" HideBorders="true" Cls="customToolbar" >
                                <Items>
                                    <ext:Label ID="Label1" runat="server">
                                        <Content>
                                            Powered by <a href="#" class="topbaruserinfo">TestSolution.com</a> Copyrighted 2012 all rights reserved.
                                        </Content>
                                    </ext:Label>
                                    <ext:ToolbarSeparator />
                                    <ext:ToolbarFill />
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button1" Icon="Help" Text="Help" runat="server"  />
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="Button3" Icon="Information" Text="Privacy" runat="server">
    
                                    </ext:Button>
                                </Items>
                                
                            </ext:Toolbar>
                    </BottomBar>
    
                    </ext:Panel>
    
    
                </Items>
            </ext:Viewport>
        
        </div>
        </form>
    </body>
    </html>
    here is the code for the TestPage1.aspx page:

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Store1_RefreshData(object sender, StoreReadDataEventArgs e)
        {
            List<object> data = FiltersTestData.Data;
    
            string s = e.Parameters[this.GridFilters1.ParamPrefix];
            //or with hardcoding - string s = e.Parameters["filter"];;
            
            
            //-- start filtering ------------------------------------------------------------
            if (!string.IsNullOrEmpty(s))
            {
                FilterConditions fc = new FilterConditions(s);
    
                foreach (FilterCondition condition in fc.Conditions)
                {
                    Comparison comparison = condition.Comparison;
                    string field = condition.Field;
                    FilterType type = condition.Type;
                    
                    object value;
                    switch(condition.Type)
                    {
                        case FilterType.Boolean:
                            value = condition.Value<bool>();
                           break;
                        case FilterType.Date:
                            value = condition.Value<DateTime>();
                            break;
                        case FilterType.List:
                            value = condition.List;
                            break;
                        case FilterType.Numeric:
                            if (data.Count > 0 && data[0].GetType().GetProperty(field).PropertyType == typeof(int))
                            {
                                value = condition.Value<int>();
                            }
                            else
                            {
                                value = condition.Value<double>();
                            }
                            
                            break;
                        case FilterType.String:
                            value = condition.Value<string>();
                            break;
                        default:
                            throw new ArgumentOutOfRangeException();
                    }
                    
                    data.RemoveAll(
                        item =>
                            {
                                object oValue = item.GetType().GetProperty(field).GetValue(item, null);
                                IComparable cItem = oValue as IComparable;
                                
                                switch (comparison)
                                {
                                    case Comparison.Eq:
                                        
                                        switch(type)
                                        {
                                            case FilterType.List:
                                                return !(value as List<string>).Contains(oValue.ToString());
                                            case FilterType.String:
                                                return !oValue.ToString().StartsWith(value.ToString());
                                            default:
                                                return !cItem.Equals(value);
                                        }
                                        
                                    case Comparison.Gt:
                                        return cItem.CompareTo(value) < 1;
                                    case Comparison.Lt:
                                        return cItem.CompareTo(value) > -1;
                                    default:
                                        throw new ArgumentOutOfRangeException();
                                }
                            }
                    );
                }
            }
            //-- end filtering ------------------------------------------------------------
    
    
            //-- start sorting ------------------------------------------------------------
            if (e.Sort.Length > 0)
            {
                data.Sort(delegate(object x, object y)
                {
                    object a;
                    object b;
    
                    int direction = e.Sort[0].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;
    
                    a = x.GetType().GetProperty(e.Sort[0].Property).GetValue(x, null);
                    b = y.GetType().GetProperty(e.Sort[0].Property).GetValue(y, null);
                    return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
                });
            }
            //-- end sorting ------------------------------------------------------------
    
    
            //-- start paging ------------------------------------------------------------
            var limit = e.Limit;
            
            if ((e.Start + e.Limit) > data.Count)
            {
                limit = data.Count - e.Start;
            }
    
            List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
            //-- end paging ------------------------------------------------------------
    
            //The Total can be set in RefreshData event as below
            //or (Store1.Proxy.Proxy as PageProxy).Total in anywhere
            //Please pay attention that the Total make a sence only during DirectEvent because
            //the Store with PageProxy get/refresh data using ajax request
    
            e.Total = data.Count;
            
            this.GridPanel1.GetStore().DataSource = rangeData;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>GridPanel with Remote Filtering, Sorting and Paging - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>GridPanel with Remote Filtering, Sorting and Paging</h1>
            
            <p>Please see column header menu for apllying filters</p>
            
            <ext:Window 
                ID="Window1" 
                runat="server" 
                Width="700" 
                Height="400" 
                Closable="false"
                Collapsible="true" 
                Title="Example"
                Maximizable="true"
                Layout="Fit">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" Border="false">
                        <Store>
                            <ext:Store 
                                runat="server" 
                                RemoteSort="true" 
                                OnReadData="Store1_RefreshData" 
                                PageSize="10">
                                <Proxy>
                                    <ext:PageProxy />
                                </Proxy>
                                <Model>
                                    <ext:Model runat="server" IDProperty="Id">
                                        <Fields>
                                            <ext:ModelField Name="Id" Type="Int" />
                                            <ext:ModelField Name="Company" Type="String" />
                                            <ext:ModelField Name="Price" Type="Float" />
                                            <ext:ModelField Name="Date" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
                                            <ext:ModelField Name="Size" Type="String" />
                                            <ext:ModelField Name="Visible" Type="Boolean" />
                                        </Fields>
                                    </ext:Model>
                                </Model>                            
                                <Sorters>
                                    <ext:DataSorter Property="Company" Direction="ASC" />
                                </Sorters>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column runat="server" Text="ID" DataIndex="Id" />
                                <ext:Column runat="server" Text="Company" DataIndex="Company" />
                                <ext:Column runat="server" Text="Price" DataIndex="Price">
                                    <Renderer Format="UsMoney" />
                                </ext:Column>                        
                                <ext:DateColumn runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd" />
                                <ext:Column runat="server" Text="Size" DataIndex="Size" />
                                <ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
                                    <Renderer Handler="return (value) ? 'Yes':'No';" />
                                </ext:Column>
                            </Columns>
                        </ColumnModel>                    
                        <Features>
                            <ext:GridFilters ID="GridFilters1" runat="server">
                                <Filters>
                                    <ext:NumericFilter DataIndex="Id" />
                                    <ext:StringFilter DataIndex="Company" />
                                    <ext:NumericFilter DataIndex="Price" />
                                    <ext:DateFilter DataIndex="Date">
                                        <DatePickerOptions runat="server" TodayText="Now" />
                                    </ext:DateFilter>
                                    <ext:ListFilter DataIndex="Size" Options="extra small,small,medium,large,extra large" />
                                    <ext:BooleanFilter DataIndex="Visible" />
                                </Filters>
                            </ext:GridFilters>
                        </Features>
                        <BottomBar>
                            <ext:PagingToolbar runat="server" />
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Window>    
        </form>
    </body>
    </html>
    This code is from your Ext.net Examples project.

    When I click the MenuItem, the page is loaded into the TabPanel, however, the grid does not display.

    Your assistance is greatly appreciated.
    Last edited by Daniil; Aug 09, 2012 at 4:15 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi,

    Please replace
    rendered: "frame"
    with
    renderer: "frame"
  3. #3

    Thanks.

    Quote Originally Posted by Daniil View Post
    Hi,

    Please replace
    rendered: "frame"
    with
    renderer: "frame"
    Thanks, that solved the problem.

Similar Threads

  1. Replies: 0
    Last Post: May 16, 2012, 11:29 PM
  2. [CLOSED] Layout Problem with ViewPort, TabPanel and UserControls
    By niceguymattx in forum 1.x Legacy Premium Help
    Replies: 16
    Last Post: Nov 08, 2010, 12:25 PM
  3. Add TabPanel Main Page with Viewport
    By Maia in forum 1.x Help
    Replies: 4
    Last Post: Dec 10, 2009, 10:41 PM
  4. Grid rendering within Viewport>TabPanel control
    By Marius.Serban in forum 1.x Help
    Replies: 6
    Last Post: Jan 24, 2009, 11:57 AM
  5. Replies: 7
    Last Post: Oct 03, 2008, 10:32 AM

Tags for this Thread

Posting Permissions