PDA

View Full Version : [CLOSED] Scroll bar not showing in GridPanel with huge records



speedstepmem4
Aug 10, 2015, 8:12 AM
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; }
}
}

Daniil
Aug 10, 2015, 5:41 PM
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.