[CLOSED] Gridpanel enable horizontal scrollbars

[tlfdesarrollo]

Hi,

I want to enable horizontal scrollbar in the gridpanel, but without disable autoheight. If i enable autoheight the scrollbars don´t appears. I don´t need vertical scrollbar just the horizontal.
I tried to put my grid into a Panel but the results were the same.

Here is my code:

<ext:Panel ID="Panel1" runat="server" Region="Center" Layout="fit">
        <Items>
            <ext:GridPanel ID="grdGenerica" runat="server" Cls="x-grid-custom" Header="false"
                Border="true" StripeRows="true" TrackMouseOver="true" AutoScroll="true" AutoHeight="true" MonitorResize="true"
                MonitorWindowResize="true" AutoRender="true">
                <TopBar>
                </TopBar>
                <Store>
                    <ext:Store ID="storeGenerico" runat="server" OnSubmitData="storeGenerico_Submit"
                        OnRefreshData="storeGenerico_RefreshData">
                        <DirectEventConfig IsUpload="true" />
                        <Reader>
                            <ext:JsonReader />
                        </Reader>
                        <Listeners>
                            <Remove Handler="if (typeof(#{grdGenerica})=='undefined') {return};var grid = #{grdGenerica}; grid.getEl().setVisibilityMode(Ext.Element.DISPLAY);var label= #{lblMessage}; if (store.data.length>0) { grid.getEl().show();label.hide()} else {grid.getEl().hide();label.show();}" />
                            <DataChanged Handler="if (typeof(#{grdGenerica})=='undefined') {return};var grid = #{grdGenerica};grid.getEl().setVisibilityMode(Ext.Element.DISPLAY);var label= #{lblMessage}; if (store.data.length>0) { grid.getEl().show();label.hide()} else {grid.getEl().hide();label.show();}" />
                        </Listeners>
                    </ext:Store>
                </Store>
                <Listeners>
                    <AfterRender Handler="if(item.getStore().data.length==0){item.getEl().setVisibilityMode(Ext.Element.DISPLAY);item.getEl().hide();}" />
                </Listeners>
                <LoadMask Msg="Cargando datos..." ShowMask="true" />
                <DirectEvents>
                    <Command OnEvent="GridCommandButtonClick" Buffer="250">
                        <EventMask ShowMask="true" />
                        <ExtraParams>
                            <ext:Parameter Name="command" Value="command" Mode="Raw" />
                            <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
                            <ext:Parameter Name="URL" Value="record.id" Mode="Raw" />
                        </ExtraParams>
                    </Command>
                </DirectEvents>
                <View>
                    <ext:GridView ID="grvGenerica" runat="server">
                    </ext:GridView>
                </View>
            </ext:GridPanel>
        </Items>
    </ext:Panel>

[Daniil]

Hi,

FitLayout stretches a container's item to its width and height. So, it's inconsistent with AutoHeight="true" and scrolling.

To get horizontal scrolling you should:

1. Remove Layout="fit" for the Panel1.

2. Set up AutoScroll="true" for the Panel1.

3. Set up fixed Width for the GridPanel.

[tlfdesarrollo]

I did the changes but the horizontal scrollbar didn´t show

 <ext:Panel ID="Panel1" runat="server" Region="Center" AutoScroll="true" >
        <Items>
            <ext:GridPanel ID="grdGenerica" runat="server" Cls="x-grid-custom" Header="false"
                Border="true" StripeRows="true" TrackMouseOver="true" AutoScroll="true" AutoHeight="true" MonitorResize="true"
                MonitorWindowResize="true" AutoRender="true" width="1000px">
                <TopBar>
                </TopBar>
                <Store>
                    <ext:Store ID="storeGenerico" runat="server" OnSubmitData="storeGenerico_Submit"
                        OnRefreshData="storeGenerico_RefreshData">
                        <DirectEventConfig IsUpload="true" />
                        <Reader>
                            <ext:JsonReader />
                        </Reader>
                        <Listeners>
                            <Remove Handler="if (typeof(#{grdGenerica})=='undefined') {return};var grid = #{grdGenerica}; grid.getEl().setVisibilityMode(Ext.Element.DISPLAY);var label= #{lblMessage}; if (store.data.length>0) { grid.getEl().show();label.hide()} else {grid.getEl().hide();label.show();}" />
                            <DataChanged Handler="if (typeof(#{grdGenerica})=='undefined') {return};var grid = #{grdGenerica};grid.getEl().setVisibilityMode(Ext.Element.DISPLAY);var label= #{lblMessage}; if (store.data.length>0) { grid.getEl().show();label.hide()} else {grid.getEl().hide();label.show();}" />
                        </Listeners>
                    </ext:Store>
                </Store>
                <Listeners>
                    <AfterRender Handler="if(item.getStore().data.length==0){item.getEl().setVisibilityMode(Ext.Element.DISPLAY);item.getEl().hide();}" />
                </Listeners>
                <LoadMask Msg="Cargando datos..." ShowMask="true" />
                <DirectEvents>
                    <Command OnEvent="GridCommandButtonClick" Buffer="250">
                        <EventMask ShowMask="true" />
                        <ExtraParams>
                            <ext:Parameter Name="command" Value="command" Mode="Raw" />
                            <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
                            <ext:Parameter Name="URL" Value="record.id" Mode="Raw" />
                        </ExtraParams>
                    </Command>
                </DirectEvents>
                <View>
                    <ext:GridView ID="grvGenerica" runat="server">
                    </ext:GridView>
                </View>
            </ext:GridPanel>
        </Items>
    </ext:Panel>

[Daniil]

Please edit the post wrapping the code in [CODE ] tags, see:
Forum Guidelines For Posting New Topics

[tlfdesarrollo]

Sorry, now the post is well formatted

[Daniil]

What browser do you test with?

[tlfdesarrollo]

Google Chrome 16.0.912.77 m

[Daniil]

Thanks. I have tested under Chrome as well and horizontal scrolling appears in my test case.

Please provide your test case.

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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            store.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:Panel 
            runat="server" 
            Layout="BorderLayout" 
            Height="200" 
            Width="200">
            <Items>
                <ext:Panel runat="server" Region="Center" AutoScroll="true">
                    <Items>
                        <ext:GridPanel 
                            ID="GridPanel1" 
                            runat="server" 
                            AutoHeight="true" 
                            Width="300">
                            <Store>
                                <ext:Store runat="server">
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="test1" />
                                                <ext:RecordField Name="test2" />
                                                <ext:RecordField Name="test3" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column Header="Test1" DataIndex="test1" />
                                    <ext:Column Header="Test2" DataIndex="test2" />
                                    <ext:Column Header="Test3" DataIndex="test3" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Panel>
    </form>
</body>
</html>