What's New?

[CLOSED] Impossible to show horizontal scroll in gridpanel

Page 1 of 2 12 LastLast
  1. #1
    Jul 18, 2011, 11:21 AM

    [CLOSED] Impossible to show horizontal scroll in gridpanel

    Hi,

    If I set a GridPanel (in my case the second one) inside a FieldSet the horizontal scroll never appears, Why?

    Thank you very much.

    
                            <ext:Panel ID="AgencyPaymentTab" runat="server" Title="<%$ Resources: AgencyPaymentTab.Title %>"
                                Icon="Money" BodyStyle="padding:5px;" AutoScroll="true" >
                                <Content>
                                    <ext:FieldSet ID="FieldSet1" runat="server" CheckboxToggle="false" Title="<%$ Resources: AgencyPaymentOwner.Title %>"
                                        Height="180" Collapsed="false">
                                        <Content>
                                            <ext:GridPanel Header="false" ID="GridPaymentOwner" StripeRows="true" runat="server"
                                                StoreID="storePaymentTypesOwner" TrackMouseOver="true" Height="150" Width="500">
                                                <ColumnModel ID="ColumnModel12" runat="server">
                                                    <Columns>
                                                        <ext:Column ColumnID="DescriptionColumn" Width="300" Header="<%$ Resources: PaymentTypeDescriptionColumn.Header %>"
                                                            Sortable="true" DataIndex="Description">
                                                        </ext:Column>
                                                        <ext:Column ColumnID="RefundAmountColumn" Width="150" Header="<%$ Resources: RefundAmountColumn.Header %>"
                                                            Sortable="false" DataIndex="RefundAmount">
                                                        </ext:Column>
                                                    </Columns>
                                                </ColumnModel>
                                            </ext:GridPanel>
                                        </Content>
                                    </ext:FieldSet>
                                    <ext:FieldSet ID="FieldSet3" runat="server" CheckboxToggle="true" Title="<%$ Resources: AgencyPayment.Title %>"
                                        Collapsed="true">
                                        <Content>
                                            <ext:GridPanel Header="false" ID="GridPaymentAgency" StripeRows="true" runat="server" AutoScroll="true"
                                                StoreID="storePaymentTypesAgency" TrackMouseOver="true" Height="200" Width="500">
                                                <ColumnModel ID="ColumnModel2" runat="server">
                                                    <Columns>
                                                        <ext:Column ColumnID="DescriptionColumn" Width="300" Header="<%$ Resources: PaymentTypeDescriptionColumn.Header %>"
                                                            Sortable="true" DataIndex="Description">
                                                        </ext:Column>
                                                        <ext:Column ColumnID="RefundAmountColumn" Width="150" Header="<%$ Resources: RefundAmountColumn.Header %>"
                                                            Sortable="false" DataIndex="RefundAmount" Align="Right">
                                                            <Editor>
                                                                <ext:NumberField runat="server" ID="NbAmount" AllowDecimals="true" DecimalSeparator="."
                                                                    AllowNegative="false" SelectOnFocus="true" />
                                                            </Editor>
                                                        </ext:Column>
                                                    </Columns>
                                                </ColumnModel>
                                                <SelectionModel>
                                                    <ext:CheckboxSelectionModel runat="server" ID="chkPaymentTypeAgency" />
                                                </SelectionModel>
                                            </ext:GridPanel>
                                        </Content>
                                    </ext:FieldSet>
                                </Content>
                            </ext:Panel>
    Last edited by Daniil; Jul 20, 2011 at 11:42 AM. Reason: [CLOSED]
  2. #2
    Jul 18, 2011, 11:44 AM
    Hi,

    Please set up AutoScroll="true" for the FieldSet-s.
  3. #3
    Jul 18, 2011, 12:16 PM
    I have set up AutoScroll="true" for each FieldSet but it doesn't work.
    Any suggestion please?
  4. #4
    Jul 18, 2011, 12:31 PM
    What browser do you test under?
  5. #5
    Jul 18, 2011, 12:41 PM
    I'm using Firefox.
  6. #6
    Jul 18, 2011, 12:41 PM
    I've discovered that it doesn't work under FF, but works under IE.

    Anyway, I'd suggest another solution, please see the example.

    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>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:FieldSet runat="server" Width="500">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" AnchorHorizontal="100%">
                    <Store>
                        <ext:Store runat="server" />
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column Header="Test" DataIndex="test" Width="600" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Items>
        </ext:FieldSet>
    </form>
</body>
</html>
  7. #7
    Jul 18, 2011, 12:52 PM
    My problem is that the second grid use to have a lot of records so I need to show the scrollbar. Your solution is to set AnchorHorizontal="100%"?I have test it but the scroll doesn't appear.


    
                            <ext:Panel ID="AgencyPaymentTab" runat="server" Title="<%$ Resources: AgencyPaymentTab.Title %>"
                                Icon="Money" BodyStyle="padding:5px;">
                                <Content>
                                    <ext:FieldSet ID="FieldSet1" runat="server" CheckboxToggle="false" Title="<%$ Resources: AgencyPaymentOwner.Title %>"
                                        Height="180" Collapsed="false" AutoScroll="true">
                                        <Content>
                                            <ext:GridPanel Header="false" ID="GridPaymentOwner" StripeRows="true" runat="server"
                                                StoreID="storePaymentTypesOwner" TrackMouseOver="true" Height="150" Width="500">
                                                <ColumnModel ID="ColumnModel12" runat="server">
                                                    <Columns>
                                                        <ext:Column ColumnID="DescriptionColumn" Width="300" Header="<%$ Resources: PaymentTypeDescriptionColumn.Header %>"
                                                            Sortable="true" DataIndex="Description">
                                                        </ext:Column>
                                                        <ext:Column ColumnID="RefundAmountColumn" Width="150" Header="<%$ Resources: RefundAmountColumn.Header %>"
                                                            Sortable="false" DataIndex="RefundAmount">
                                                        </ext:Column>
                                                    </Columns>
                                                </ColumnModel>
                                            </ext:GridPanel>
                                        </Content>
                                    </ext:FieldSet>
                                    <ext:FieldSet ID="FieldSet3" runat="server" CheckboxToggle="true" Title="<%$ Resources: AgencyPayment.Title %>"
                                        Collapsed="true">
                                        <Content>
                                            <ext:GridPanel Header="false" ID="GridPaymentAgency" StripeRows="true" runat="server" AnchorHorizontal="100%"
                                                StoreID="storePaymentTypesAgency" TrackMouseOver="true" Height="200" Width="500">
                                                <ColumnModel ID="ColumnModel2" runat="server">
                                                    <Columns>
                                                        <ext:Column ColumnID="DescriptionColumn" Width="300" Header="<%$ Resources: PaymentTypeDescriptionColumn.Header %>"
                                                            Sortable="true" DataIndex="Description">
                                                        </ext:Column>
                                                        <ext:Column ColumnID="RefundAmountColumn" Width="150" Header="<%$ Resources: RefundAmountColumn.Header %>"
                                                            Sortable="false" DataIndex="RefundAmount" Align="Right">
                                                            <Editor>
                                                                <ext:NumberField runat="server" ID="NbAmount" AllowDecimals="true" DecimalSeparator="."
                                                                    AllowNegative="false" SelectOnFocus="true" />
                                                            </Editor>
                                                        </ext:Column>
                                                    </Columns>
                                                </ColumnModel>
                                                <SelectionModel>
                                                    <ext:CheckboxSelectionModel runat="server" ID="chkPaymentTypeAgency" />
                                                </SelectionModel>
                                            </ext:GridPanel>
                                        </Content>
                                    </ext:FieldSet>
                                </Content>
                            </ext:Panel>
  8. #8
    Jul 18, 2011, 2:17 PM
    I have provided you a runnable example which works fine.

    Could you provide your runnable test case as well?
  9. #9
    Jul 19, 2011, 10:32 AM
    The page has only a button, when you click the first time the scrollbar for second grid is not visible.

    Thanks.

    
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CopyManageAgencies.aspx.cs"
    Inherits="Acris.Web.Agencies.CopyManageAgencies" EnableViewState="false" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="Ext.Net.Utilities" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1" runat="server">
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server">
    </ext:ResourcePlaceHolder>
</head>
<body>
    <form id="form" runat="server">
    <ext:ResourceManager ID="sm" runat="server" DisableViewState="true" StateProvider="None" />
    <ext:Store ID="storePaymentTypesOwner" runat="server">
        <Reader>
            <ext:ArrayReader IDProperty="UniqueId">
                <Fields>
                    <ext:RecordField Name="UniqueId" Type="Int" />
                    <ext:RecordField Name="Description" />
                    <ext:RecordField Name="RefundAmount" Type="Float" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
        <SortInfo Field="Description" />
    </ext:Store>
    <ext:Store ID="storePaymentTypesAgency" runat="server">
        <Reader>
            <ext:ArrayReader IDProperty="UniqueId">
                <Fields>
                    <ext:RecordField Name="UniqueId" Type="Int" />
                    <ext:RecordField Name="Description" />
                    <ext:RecordField Name="RefundAmount" Type="Float" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
        <SortInfo Field="Description" />
    </ext:Store>
    
    <ext:Button ID="btnOpenWindow" runat="server" Text="Open window" Width="100">
        <DirectEvents>
            <Click OnEvent="btnOpenWindow_Click" />
        </DirectEvents>
    </ext:Button>
    
    <ext:Window ID="windowAgency" Hidden="true" runat="server" Height="550" Width="800"
        Maximizable="true" Collapsible="false" Icon="UserMature"
        Shadow="None">
        <Items>
            <ext:FitLayout runat="server">
                <Items>
                    <ext:TabPanel ID="TabGeneral" runat="server" Border="false" Height="500" DeferredRender="false"
                        LayoutOnTabChange="false">
                        <Items>
                            <ext:Panel ID="AgencyPaymentTab" runat="server" Title="Tab"
                                Icon="Money" BodyStyle="padding:5px;">
                                <Content>
                                    <ext:FieldSet ID="FieldSet1" runat="server" CheckboxToggle="false" Title="FieldSet 1"
                                        Height="180" Collapsed="false">
                                        <Content>
                                            <ext:GridPanel Header="false" ID="GridPaymentOwner" StripeRows="true" runat="server"
                                                StoreID="storePaymentTypesOwner" TrackMouseOver="true" Height="150" Width="500">
                                                <ColumnModel ID="ColumnModel12" runat="server">
                                                    <Columns>
                                                        <ext:Column ColumnID="DescriptionColumn" Width="300" Header="Description"
                                                            Sortable="true" DataIndex="Description">
                                                        </ext:Column>
                                                        <ext:Column ColumnID="RefundAmountColumn" Width="150" Header="Amount"
                                                            Sortable="false" DataIndex="RefundAmount">
                                                        </ext:Column>
                                                    </Columns>
                                                </ColumnModel>
                                            </ext:GridPanel>
                                        </Content>
                                    </ext:FieldSet>
                                    <ext:FieldSet ID="FieldSet3" runat="server" CheckboxToggle="true" Title="FieldSet 2"
                                        Collapsed="true">
                                        <Content>
                                            <ext:GridPanel Header="false" ID="GridPaymentAgency2" StripeRows="true" runat="server" AnchorHorizontal="100%"
                                                StoreID="storePaymentTypesAgency" TrackMouseOver="true" Height="200" Width="500">
                                                <ColumnModel ID="ColumnModel2" runat="server">
                                                    <Columns>
                                                        <ext:Column ColumnID="DescriptionColumn" Width="300" Header="Description"
                                                            Sortable="true" DataIndex="Description">
                                                        </ext:Column>
                                                        <ext:Column ColumnID="RefundAmountColumn" Width="150" Header="Amount"
                                                            Sortable="false" DataIndex="RefundAmount" Align="Right">
                                                            <Editor>
                                                                <ext:NumberField runat="server" ID="NbAmount" AllowDecimals="true" DecimalSeparator="."
                                                                    AllowNegative="false" SelectOnFocus="true" />
                                                            </Editor>
                                                        </ext:Column>
                                                    </Columns>
                                                </ColumnModel>
                                                <SelectionModel>
                                                    <ext:CheckboxSelectionModel runat="server" ID="chkPaymentTypeAgency2" />
                                                </SelectionModel>
                                            </ext:GridPanel>
                                        </Content>
                                    </ext:FieldSet>
                                </Content>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:FitLayout>
        </Items>
        <Buttons>
            <ext:Button runat="server" ID="btnCancel" Text="Close"
                Icon="Cancel">
                <Listeners>
                    <Click Handler="#{windowAgency}.hide();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Window>
    </form>
</body>
</html>

public partial class CopyManageAgencies : BasePage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
            }
        }


        protected void btnOpenWindow_Click(object sender, DirectEventArgs e)
        {
            storePaymentTypesOwner.DataSource = new object[]
                {
                    new object[] { 1, "Owner amount 1", 71.72 },
                    new object[] { 2, "Owner amount 2", 29.01 },
                    new object[] { 3, "Owner amount 3", 83.81 },
                };
            storePaymentTypesOwner.DataBind();


            storePaymentTypesAgency.DataSource = new object[]
                {
                    new object[] { 1, "Agency amount 1", 71.72 },
                    new object[] { 2, "Agency amount 2", 29.01 },
                    new object[] { 3, "Agency amount 3", 83.81 },
                    new object[] { 4, "Agency amount 4", 71.72 },
                    new object[] { 5, "Agency amount 5", 29.01 },
                    new object[] { 6, "Agency amount 6", 83.81 },
                    new object[] { 7, "Agency amount 7", 71.72 },
                    new object[] { 8, "Agency amount 8", 29.01 },
                    new object[] { 9, "Agency amount 9", 83.81 },
                };
            storePaymentTypesAgency.DataBind();


            FieldSet3.Expand();


            windowAgency.Show();
        }
    }
  10. #10
    Jul 19, 2011, 11:11 AM
    Well, I guess you need vertical scrolling, right?

    If so, please set up Layout="ContainerLayout" for the FieldSet.
Page 1 of 2 12 LastLast

Similar Threads

  1. No Horizontal Scroll bar in GridPanel
    By fangmdu in forum 1.x Help
    Replies: 2
    Last Post: Jul 05, 2012, 9:53 PM
  2. [CLOSED] Why GridPanel is showing horizontal scroll bar even AutoExpand Column exists?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: May 22, 2012, 5:29 PM
  3. Why has every page in IE6 horizontal scroll bar
    By benti in forum 1.x Help
    Replies: 2
    Last Post: Aug 18, 2011, 2:11 PM
  4. MenuPanel - Horizontal Scroll
    By rsaldanhabr in forum 1.x Help
    Replies: 1
    Last Post: Aug 05, 2011, 2:45 PM
  5. Listview horizontal scroll bar
    By wh0urdady in forum 1.x Help
    Replies: 1
    Last Post: Jun 23, 2010, 10:41 PM

Posting Permissions