[CLOSED] GridPanel horizontal scrollbar

[jeybonnet]

Hi, on my page I have 2 gridpanels (GridPanelReservation and GridPanelQuotation) (according with a checkbox value one is hidden and the other is shown and viceversa). The gridpanel that is shown at the beginning, displays the horizontal scrollbar correctly. However, when the another gridpanel is shown (and the first gridpanel's hidden), no scrollbar displays. I adjust you my code:

(A simplified version of my) Aspx code:

<ext:Viewport ID="Viewport1" runat="server">
    <content>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North MarginsSummary="0 0 0 0">
                    <ext:Panel ID="PanelNorth" runat="server" AutoScroll="true" Frame="true" Border="false"
                        AutoHeight="true">
                        <Content>
                            <ext:Panel ID="FilterPanel" runat="server" AutoScroll="true" Frame="true" Border="false"
                                AutoHeight="true" Collapsible="true" Title="<%$ Resources: FilterPanel.Title %>"
                                TitleCollapse="true">
                                <Content>
                                    <ext:Radio ID="rbIsReservation" runat="server" BoxLabel="<%$ Resources: rbReservation %>" Name="rgOperationType" Checked="true" >
                                         <DirectEvents>
                                            <Check OnEvent="rgOperationType_Change" />
                                        </DirectEvents>
                                        </ext:Radio>
                                        </td>
                                        <td>
                                    <ext:Radio ID="rbIsQuotation" runat="server" BoxLabel="<%$ Resources: rbQuotation %>"  Name="rgOperationType" >
                                         <DirectEvents>
                                            <Check OnEvent="rgOperationType_Change" />
                                        </DirectEvents>
                                        </ext:Radio>
                                </Content>
                                <Listeners>
                                    <Expand Handler="#{Viewport1}.syncSize();#{FilterPanel}.doLayout();" />
                                    <Collapse Handler="#{Viewport1}.syncSize();#{FilterPanel}.doLayout();" />
                                </Listeners>
                            </ext:Panel>
                        </Content>
                    </ext:Panel>
                </North>
                <Center MarginsSummary="0 0 0 0">
                    <ext:Panel ID="panelData" runat="server" Title="" Layout="fit">
                        <Items>
                            <ext:GridPanel ID="GridPanelReservation" StripeRows="true" runat="server" Title="<%$ Resources: GridPanel.Title %>"
                                StoreID="storeReservationResult" Border="false" TrackMouseOver="true" Header="false">
                                <ColumnModel ID="ColumnModel1" runat="server">
                                    <Columns>
                                        <ext:Column ColumnID="UniqueId" Align="Center" Width="90" DataIndex="UniqueId" />
[more columns...]
                                    </Columns>
                                </ColumnModel>
                            </ext:GridPanel>
                            <ext:GridPanel ID="GridPanelQuotation" StripeRows="true" runat="server" Title="<%$ Resources: GridPanel.Title %>"
                                StoreID="storeQuotationResult" Border="false" TrackMouseOver="true" Header="false"
                                AutoHeight="true">
                                <ColumnModel ID="ColumnModel3" runat="server">
                                    <Columns>
                                        <ext:Column ColumnID="UniqueId" Align="Center" Width="90" DataIndex="UniqueId" />
[more columns...]
                                    </Columns>
                                </ColumnModel>
                            </ext:GridPanel>
                        </Items>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </content>
</ext:Viewport>

On the code-behind:

        protected void rgOperationType_Change(object sender, EventArgs e)
        {
            if (rbIsReservation.Checked)
            {
                GridPanelReservation.Show();
                GridPanelQuotation.Hide();
            }
            else
            {
                GridPanelReservation.Hide();
                GridPanelQuotation.Show();
            }
            Viewport1.SyncSize();
            FilterPanel.DoLayout();
        }

Note.- On my code, there is also logic for the panel FilterPanel on the panel north, to addapt this panel to a simplified view or an expert view, but it works fine. I have tested removing the attribute Layout="Fit" on the panelData with no success.

Thank you in advance

[Daniil]

Hi,

FitLayout supports only one item in Items collection.

I'd suggest you to use CardLayout.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "test11", "test12", "test13" },
                new object[] { "test12", "test22", "test23" },
                new object[] { "test13", "test32", "test33" }
            };
            this.Store1.DataBind();
        }
    }
</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 runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="test1" />
                    <ext:RecordField Name="test2" />
                    <ext:RecordField Name="test3" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:Panel 
        ID="Panel1" 
        runat="server" 
        Title="Test" 
        Layout="CardLayout" 
        Width="500"
        Height="300" 
        ActiveIndex="0">
        <Items>
            <ext:GridPanel runat="server" StoreID="Store1" Title="Grid 1">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" Width="300" />
                        <ext:Column Header="Test2" DataIndex="test2" Width="300" />
                        <ext:Column Header="Test3" DataIndex="test3" Width="300" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
            <ext:GridPanel runat="server" StoreID="Store1" Title="Grid 2">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" Width="300" />
                        <ext:Column Header="Test2" DataIndex="test2" Width="300" />
                        <ext:Column Header="Test3" DataIndex="test3" Width="300" />
                        <ext:Column Header="Test1" DataIndex="test1" Width="300" />
                        <ext:Column Header="Test2" DataIndex="test2" Width="300" />
                        <ext:Column Header="Test3" DataIndex="test3" Width="300" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </Items>
    </ext:Panel>
    <ext:RadioGroup runat="server" ColumnsNumber="1">
        <Items>
            <ext:Radio runat="server" BoxLabel="0" InputValue="={0}" Checked="true" />
            <ext:Radio runat="server" BoxLabel="1" InputValue="={1}" />
        </Items>
        <Listeners>
            <Change Handler="Panel1.layout.setActiveItem(checked.inputValue);" />
        </Listeners>
    </ext:RadioGroup>
    </form>
</body>
</html>

[Daniil]

Note.- On my code, there is also logic for the panel FilterPanel on the panel north, to addapt this panel to a simplified view or an expert view, but it works fine. I have tested removing the attribute Layout="Fit" on the panelData with no success.

Please keep one question (or tightly related questions) per one thread. So, please start a new thread.

[jeybonnet]

It works perfect. Thank you!