[CLOSED] Scroll bar not showing in GridPanel with huge records

  1. #1

    [CLOSED] Scroll bar not showing in GridPanel with huge records

    Hello,


    We have created popup window in our appliction, in this window we have set 3 regions North, Center and South. In North and Center area we have fixed the hight, but for South area we have set fitlayout in Gridpanel. If gridpanel data overflow scroll bar is not displayed, we have provided all property for gridpanel but scrollbar still not displayed.


    Please check the code and advise where we made mistake...


    Please refer the below mentioned code part and the screenshot attached!!


    .aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScrollBarSample.aspx.cs" Inherits="ScrollBarSample" %>
     
    <%@ OutputCache CacheProfile="default" %>
    <!DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <cb:Include ID="siteCssCtrl" runat="server" SetName="siteCss" />
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ScriptManager1" runat="server">
            </ext:ResourceManager>
            <ext:Store ID="stSample" runat="server" IgnoreExtraFields="true" AutoLoad="true">
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="ID">
                        <Fields>                        
                            <ext:ModelField Name="Name" />
                            <ext:ModelField Name="Description1" />
                            <ext:ModelField Name="Description2" />
                            <ext:ModelField Name="Description3" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
                <Content>
                    <ext:Container ID="BorderLayout1" runat="server" Border="false">
                        <Content>
                            <ext:Panel ID="Panel1" runat="server" Region="North" Height="230">
                                <Items>
                                    <ext:Panel ID="pnlTopBar" runat="server" Border="false" Height="70">
                                        <Content>
                                            <div class="Popup_ContentPane_CircleLogo">
                                                <div class="Popup_WindowLogo">
                                                    <div style="padding: 3px 0px 0px 1px">
                                                        <img class="Popup_WindowLogo Popup_WindowLogo_Icon_ArticleGroup" src="../css/pop/blank.gif"
                                                            border="0" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="img_td" runat="server" align="left" class="toolpopup">
                                                <img src="../images/srm_pop.png" runat="server" id="Img1" height="20" />
                                            </div>
                                            <div id="midle" class="toolpad toolbar toolbarborder" style="height: 32px; width: 100%;">
                                                <ul>
                                                    <ul>
                                                        <li id="LiNew">
                                                            <ext:ImageButton AutoPostBack="false" runat="server" SkinID="tbarNewItem"
                                                                ID="Img_New">
                                                            </ext:ImageButton>
                                                        </li>
                                                        <li id="LiEdit" runat="server">
                                                            <ext:ImageButton AutoPostBack="false" runat="server" SkinID="tbarEditItem"
                                                                ID="Img_Edit">
                                                            </ext:ImageButton>
                                                        </li>
                                                        <li id="LiSave" runat="server">
                                                            <ext:ImageButton AutoPostBack="false" runat="server" SkinID="tbarSaveItem"
                                                                ID="Img_Save">
                                                            </ext:ImageButton>
                                                        </li>
                                                        <li id="LiSaveClose" runat="server">
                                                            <ext:ImageButton AutoPostBack="false" runat="server" SkinID="tbarSaveAndCloseItem"
                                                                ID="Img_SaveClose">
                                                            </ext:ImageButton>
                                                        </li>
                                                        <li id="LiDelete" runat="server">
                                                            <ext:ImageButton AutoPostBack="false" runat="server" SkinID="tbarDeleteItem"
                                                                ID="Img_Delete">
                                                            </ext:ImageButton>
                                                        </li>
                                                        <li id="LiCancel" runat="server">
                                                            <ext:ImageButton AutoPostBack="false" runat="server" SkinID="tbarCancelEditItem"
                                                                ID="Img_Cancel">
                                                            </ext:ImageButton>
                                                        </li>
                                                        <li id="Li3">
                                                            <img src='../images/blank.png' class='line' alt='' /></li>
                                                        <li id="LiExportExcel" runat="server">
                                                            <ext:ImageButton runat="server" ID="imgbtnExcel" SkinID="tbarExportExcel"
                                                                IDMode="Static">
                                                                <Listeners>
                                                                    <Click Handler="GetExportData(1);" />
                                                                </Listeners>
                                                            </ext:ImageButton>
                                                        </li>
                                                        <li id="LiExportScv" runat="server">
                                                            <ext:ImageButton runat="server" ID="imgbtnCSV" SkinID="tbarExportCSV"
                                                                IDMode="Static">
                                                            </ext:ImageButton>
                                                        </li>
                                                        <li id="LiExportPdf" runat="server">
                                                            <ext:ImageButton runat="server" ID="imgbtnPDF" SkinID="tbarExportPDF"
                                                                IDMode="Static">
                                                            </ext:ImageButton>
                                                        </li>
                                                        <li id="LiClose" runat="server">
                                                            <ext:ImageButton AutoPostBack="false" runat="server" SkinID="tbarExit"
                                                                ID="Img_Exit">
                                                            </ext:ImageButton>
                                                        </li>
                                                    </ul>
                                                </ul>
                                            </div>
                                        </Content>
                                    </ext:Panel>
                                    <ext:FormPanel ID="pnlCenter" runat="server" Border="true" Height="160">
                                        <Items>
                                            <ext:Container ID="Container1" runat="server" Layout="FormLayout" Margin="10">
                                                <Items>
                                                    <ext:Container ID="Container2" runat="server" Layout="ColumnLayout" Height="22">
                                                        <Items>
                                                            <ext:NumberField ID="txt_Number" runat="server" AllowDecimals="false" MaxLength="10" AllowBlank="false"
                                                                Cls="edit-form-manitatory" Width="200" HideTrigger="true" MinValue="0" EnforceMaxLength="true">
                                                            </ext:NumberField>
                                                            <ext:Checkbox runat="server" ID="chk_IsActive" Cls="edit-form" MarginSpec="0 0 0 182"></ext:Checkbox>
                                                        </Items>
                                                    </ext:Container>
                                                    <ext:Container ID="Container3" runat="server" Layout="FormLayout">
                                                        <Items>
                                                            <ext:TextField ID="txt_Description" runat="server" AllowBlank="false" MaxLength="30" EnforceMaxLength="true"
                                                                Cls="edit-form-manitatory" Width="500">
                                                            </ext:TextField>
                                                            <ext:TextField ID="TextField1" runat="server" AllowBlank="false" MaxLength="30" EnforceMaxLength="true"
                                                                Cls="edit-form-manitatory" Width="500">
                                                            </ext:TextField>
                                                            <ext:TextField ID="TextField2" runat="server" AllowBlank="false" MaxLength="30" EnforceMaxLength="true"
                                                                Cls="edit-form-manitatory" Width="500">
                                                            </ext:TextField>
                                                        </Items>
                                                    </ext:Container>
                                                    <ext:Container ID="Container4" runat="server" Layout="ColumnLayout">
                                                        <Items>
                                                            <ext:TextField ID="TextField3" runat="server" AllowBlank="false" MaxLength="30" EnforceMaxLength="true"
                                                                Cls="edit-form-manitatory" Width="500">
                                                            </ext:TextField>
                                                            <ext:TextField ID="txt_Buyer" runat="server" Width="300" MaxLength="30" ReadOnly="true">
                                                            </ext:TextField>
                                                        </Items>
                                                    </ext:Container>
                                                </Items>
                                            </ext:Container>
                                        </Items>
                                    </ext:FormPanel>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="pnlSouth" runat="server" Region="Center" Border="false" Layout="FitLayout" AutoHeight="True">
                                <Items>
                                    <ext:GridPanel ID="grdSample" runat="server" StoreID="stSample" AutoHeight="True" Border="false" AutoScroll="true">
                                        <ColumnModel ID="ColumnModel1" runat="server">
                                            <Columns>
                                                <ext:Column ID="Name" ColumnID="Name" runat="server" DataIndex="Name" Text="Name" Width="150"></ext:Column>
                                                <ext:Column ID="Description1" ColumnID="Description1" runat="server" DataIndex="Description1" Text="Description1" Width="250" />
                                                <ext:Column ID="Description2" ColumnID="Description2" runat="server" DataIndex="Description2" Text="Description2" Width="250" />
                                                <ext:Column ID="Description3" ColumnID="Description3" runat="server" DataIndex="Description3" Text="Description3" Width="250" />
                                            </Columns>
                                        </ColumnModel>
                                        <SelectionModel>
                                            <ext:CheckboxSelectionModel ID="chk_Selection" runat="server">
                                                <Listeners>
                                                </Listeners>
                                            </ext:CheckboxSelectionModel>
                                        </SelectionModel>
                                        <Features>
                                            <ext:GridFilters runat="server" ID="GridFilter1" Local="true">
                                                <Filters>
                                                </Filters>
                                            </ext:GridFilters>
                                        </Features>
                                        <View>
                                            <ext:GridView ID="GridView1" runat="server" StripeRows="true" TrackOver="true" />
                                        </View>
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>
                        </Content>
                    </ext:Container>
                </Content>
            </ext:Viewport>
        </form>
    </body>
    </html>


    .aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class ScrollBarSample : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            List<SampleClass> sampleData = new List<SampleClass>();
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
            sampleData.Add(new SampleClass("Test1", "Desc1", "Desc1", "Desc1"));
     
            stSample.DataSource = sampleData;
            stSample.DataBind();
        }
    }
     
    public class SampleClass
    {
        public SampleClass(string Name, string Description1, string Description2, string Description3)
        {
            _Name = Name;
            _Description1 = Description1;
            _Description2 = Description2;
            _Description3 = Description3;
        }
     
        private string _Name;
     
        public string Name
        {
            get { return _Name; }
            set { _Name = value; }
        }
     
        private string _Description1;
     
        public string Description1
        {
            get { return _Description1; }
            set { _Description1 = value; }
        }
     
        private string _Description2;
     
        public string Description2
        {
            get { return _Description2; }
            set { _Description2 = value; }
        }
     
        private string _Description3;
     
        public string Description3
        {
            get { return _Description3; }
            set { _Description3 = value; }
        }
    }
    Attached Thumbnails Click image for larger version. 

Name:	Scrollbar.png 
Views:	45 
Size:	65.7 KB 
ID:	24135  
    Last edited by Daniil; Aug 18, 2015 at 8:52 AM. Reason: [CLOSED]
  2. #2
    Hi @speedstepmem4,

    It is a layout configuration issue.

    You should remove
    <ext:Container ID="BorderLayout1" runat="server" Border="false">
        <Content>
    
        </Content>
    </ext:Container>
    Otherwise, the regions (North, Center, South) are not actually treated as regions of the Viewport's BorderLayout.
    Last edited by Daniil; Aug 18, 2015 at 8:52 AM.

Similar Threads

  1. Replies: 0
    Last Post: May 14, 2013, 10:05 AM
  2. Gid Panel Not showing all the records
    By aspnet_9 in forum 2.x Help
    Replies: 3
    Last Post: Jan 14, 2013, 8:02 PM
  3. Replies: 14
    Last Post: May 22, 2012, 5:29 PM
  4. Replies: 1
    Last Post: Jan 08, 2012, 5:10 AM
  5. [CLOSED] LoadMask while loading huge data in gridpanel
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 26, 2010, 8:01 AM

Posting Permissions