Horizontal scroll bar in Gridpanel containing Grid Totals row

**kavitha** · Mar 28, 2014, 11:21 AM

Hi Guys,

I have 40 columns in my grid panel and i added grid totals row using FieldContainer in bottom bar. I am unable to get the Horizontal scroll bar to both total row and grid panel i am getting Horizontal scroll for only grid panel.

Please suggest how to aplly only one Horizontal scroll for both Grid Panel and Totals row

Thanks In Advance
Kavitha

**Daniil** · Apr 01, 2014, 3:33 AM

Hi @kavitha,

See:
1. AutoScroll="true" for the FieldContainer.
2. The FieldContainer's AfterRender listener.
3. The GridView's BodyScroll listener.

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[] {"1", "1.1", "1.01"},
                new object[] {"2", "2.2", "2.02"},
                new object[] {"3", "3.3", "3.01"}
            };
            
            store.DataBind();
        }
    }
</script>
 
<!DOCTYPE html>
    
<html>
<head runat="server">
    <title>GridPanel with Total Row - Ext.Net Example</title>
    
    <script>        
        var updateTotal = function (grid, container) {
            if (!grid.view.rendered) {
                return;
            }

            var field,
                value,
                width,
                data = {test1: 0, test2: 0, test3: 0},
                c,
                cs = grid.headerCt.getVisibleGridColumns();
 
            for (var j = 0, jlen = grid.store.getCount(); j < jlen; j++) {
                var r = grid.store.getAt(j);
                
                for (var i = 0, len = cs.length; i < len; i++) {
                    c = cs[i];
                    if (c.dataIndex) {
                        data[c.dataIndex] += r.get(c.dataIndex);
                    }
                }
            }
            
            container.suspendLayout = true;
            for (var i = 0; i < cs.length; i++) {
                c = cs[i];
                value = data[c.dataIndex];
 
                field = container.down('component[name="'+c.dataIndex+'"]');              
                
                container.remove(field, false);
                container.insert(i, field);
                width = c.getWidth();
                field.setWidth(width - 1);
                field.setValue(c.renderer ? (c.renderer)(value, {}, {}, 0, i, grid.store, grid.view) : value);
            }

            container.items.each(function(field) {
                var column = grid.headerCt.down('component[dataIndex="'+field.name+'"]');
                field.setVisible(column.isVisible());
            });

            container.suspendLayout = false;
            container.updateLayout();
        };
    </script>
 
    <style>
        .total-field{
            background-color : #fff;                        
            padding          : 0px 1px 1px 1px;
            margin-right     : 1px;            
        }
         
        .total-field .x-form-display-field{            
            border           : solid 1px silver;
            font-weight      : bold !important;                       
            font-size        : 11px;
            font-family      : tahoma, arial, verdana, sans-serif;
            color            : #000;  
            padding          : 0px 0px 0px 5px;
            height           : 22px;
            margin-top       : 0px;            
            padding-top      : 3px;
        } 
    </style>
</head>
<body>
    <form runat="server">
        <h1>GridPanel with Total Row</h1>
        
        <ext:ResourceManager runat="server" />
        
        <ext:GridPanel ID="GridPanel1" runat="server" Width="150" Height="200">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" Type="Int"/>
                                <ext:ModelField Name="test2" Type="Float"/>
                                <ext:ModelField Name="test3" Type="Float"/>
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server">
                    <Listeners>
                        <Refresh Handler="updateTotal(this.panel, #{Container1});" />
                        <BodyScroll Handler="App.Container1.getOverflowEl().scrollTo('left', t.scrollLeft);" />
                    </Listeners>
                </ext:GridView>
            </View>
            <Listeners>
                <ColumnResize Handler="updateTotal(this, #{Container1});" />                
                <ColumnMove Handler="updateTotal(this, #{Container1});" /> 
                <ColumnHide Handler="updateTotal(this, #{Container1});" />                
            </Listeners>
            <DockedItems>
                <ext:FieldContainer 
                    ID="Container1" 
                    runat="server" 
                    Layout="HBoxLayout" 
                    Dock="Bottom" 
                    StyleSpec="margin-top:2px;overflow-x: hidden;" 
                    AutoScroll="true">
                    <Listeners>
                        <AfterRender Handler="this.getOverflowEl().setStyle({ 'overflow-x': 'hidden' })" />
                    </Listeners>
                    <Defaults>
                        <ext:Parameter Name="height" Value="22" />
                    </Defaults>
                    <Items>                                                
                        <ext:DisplayField
                            runat="server"
                            Name="test1"
                            Cls="total-field"
                            Text="-" 
                            />
                        <ext:DisplayField
                            runat="server"
                            Name="test2"
                            Cls="total-field"
                            Text="-" 
                            />
                        <ext:DisplayField
                            runat="server"
                            Name="test3"
                            Cls="total-field"
                            Text="-" 
                            />                                                    
                    </Items>
                </ext:FieldContainer>
            </DockedItems>
        </ext:GridPanel>
    </form>
</body>
</html>

**kavitha** · Apr 01, 2014, 6:34 AM

Hi Danill,

Thanks for your reply but the above code is working only after resizing any one of column in GridPanel.Horizontal Scroll is not working if we not resizing the column in Grid Panel, i.e., the Horizontal scroll is working only for Grid Panel not Field Container if we resize any one of column then only Horizontal scroll is working for both Grid Panel and Field Container.

Please suggest me to solve this issue.

Thanks
Kavitha

**Daniil** · Apr 01, 2014, 5:54 PM

It works for me before and after resizing the columns.

Though, maybe, I misunderstand something. Are you testing exactly my example or trying with your one?

**kavitha** · Apr 02, 2014, 5:18 AM

Hi Daniil,

Thanks for your reply, i am using same code as you send but Horizontal scroll is not working for both grid panel and field container at the time of loading if we resize any of column in grid panel then only the Horizontal scroll is working for both

Please suggest me to solve this issue.

**kavitha** · Apr 02, 2014, 5:25 AM

Hi Daniil,

I am using below code please check and give suggestions

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Totalsrow.aspx.cs" Inherits="Totalsrow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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[] {"1", "1.1", "1.01","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"2", "2.2", "2.02","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"3", "3.3", "3.01","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"1", "1.1", "1.01","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"2", "2.2", "2.02","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"3", "3.3", "3.01","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"1", "1.1", "1.01","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"2", "2.2", "2.02","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"3", "3.3", "3.01","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"1", "1.1", "1.01","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"2", "2.2", "2.02","3","4","5","6","7","8","9","10","11","12", "13","14"},
new object[] {"3", "3.3", "3.01","3","4","5","6","7","8","9","10","11","12", "13","14"}
};

store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>GridPanel with Total Row - Ext.Net Example</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var updateTotal = function (grid, container) {
if (!grid.view.rendered) {
return;
}

var field,
value,
width,
data = { test1: 0, test2: 0, test3: 0, test4: 0, test5: 0, test6: 0, test7: 0, test8: 0, test9: 0, test10: 0, test11: 0, test12: 0, test13: 0, test14: 0, test15: 0 },
c,
cs = grid.headerCt.getVisibleGridColumns();

for (var j = 0, jlen = grid.store.getCount(); j < jlen; j++) {
var r = grid.store.getAt(j);

for (var i = 0, len = cs.length; i < len; i++) {
c = cs[i];
if (c.dataIndex) {
data[c.dataIndex] += r.get(c.dataIndex);
}
}
}

container.suspendLayout = true;
for (var i = 0; i < cs.length; i++) {
c = cs[i];
value = data[c.dataIndex];

field = container.down('component[name="' + c.dataIndex + '"]');

container.remove(field, false);
container.insert(i, field);
width = c.getWidth();
field.setWidth(width - 1);
field.setValue(c.renderer ? (c.renderer)(value, {}, {}, 0, i, grid.store, grid.view) : value);
}

container.items.each(function (field) {
var column = grid.headerCt.down('component[dataIndex="' + field.name + '"]');
field.setVisible(column.isVisible());
});

container.suspendLayout = false;
container.updateLayout();
};

</script>

<style>
.total-field{
background-color : #fff;
padding : 0px 1px 1px 1px;
margin-right : 1px;
}

.total-field .x-form-display-field{
border : solid 1px silver;
font-weight : bold !important;
font-size : 11px;
font-family : tahoma, arial, verdana, sans-serif;
color : #000;
padding : 0px 0px 0px 5px;
height : 22px;
margin-top : 0px;
padding-top : 3px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<h1>GridPanel with Total Row</h1>

<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="Panel2" runat="server" Title="My Portfolio" Header="false" AutoScroll="true" Height="200">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" AutoScroll="true" Height="150">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test1" Type="Int"/>
<ext:ModelField Name="test2" Type="Float"/>
<ext:ModelField Name="test3" Type="Float"/>
<ext:ModelField Name="test4" Type="Int"/>
<ext:ModelField Name="test5" Type="Float"/>
<ext:ModelField Name="test6" Type="Float"/>
<ext:ModelField Name="test7" Type="Int"/>
<ext:ModelField Name="test8" Type="Float"/>
<ext:ModelField Name="test9" Type="Float"/>
<ext:ModelField Name="test10" Type="Int"/>
<ext:ModelField Name="test11" Type="Float"/>
<ext:ModelField Name="test12" Type="Float"/>
<ext:ModelField Name="test13" Type="Int"/>
<ext:ModelField Name="test14" Type="Float"/>
<ext:ModelField Name="test15" Type="Float"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Test1" DataIndex="test1"/>
<ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2"/>
<ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3"/>
<ext:Column ID="Column4" runat="server" Text="Test4" DataIndex="test4"/>
<ext:Column ID="Column5" runat="server" Text="Test5" DataIndex="test5"/>
<ext:Column ID="Column6" runat="server" Text="Test6" DataIndex="test6"/>
<ext:Column ID="Column7" runat="server" Text="Test7" DataIndex="test7"/>
<ext:Column ID="Column8" runat="server" Text="Test8" DataIndex="test8"/>
<ext:Column ID="Column9" runat="server" Text="Test9" DataIndex="test9"/>
<ext:Column ID="Column10" runat="server" Text="Test10" DataIndex="test10"/>
<ext:Column ID="Column11" runat="server" Text="Test11" DataIndex="test11"/>
<ext:Column ID="Column12" runat="server" Text="Test12" DataIndex="test12"/>
<ext:Column ID="Column13" runat="server" Text="Test13" DataIndex="test13"/>
<ext:Column ID="Column14" runat="server" Text="Test14" DataIndex="test14"/>
<ext:Column ID="Column15" runat="server" Text="Test15" DataIndex="test15"/>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" AutoScroll="false">
<Listeners>
<Refresh Handler="updateTotal(this.panel, #{Container1});" />
<BodyScroll Handler="App.Container1.getOverflowEl().scrollTo(' left', t.scrollLeft);" />
</Listeners>
</ext:GridView>
</View>
<Listeners>
<ColumnResize Handler="updateTotal(this, #{Container1});" />
<ColumnMove Handler="updateTotal(this, #{Container1});" />
<ColumnHide Handler="updateTotal(this, #{Container1});" />
</Listeners>
<DockedItems>
<ext:FieldContainer
ID="Container1"
runat="server"
Layout="HBoxLayout"
Dock="Bottom"
StyleSpec="margin-top:2px;overflow-x: hidden;"
AutoScroll="true">
<Listeners>
<AfterRender Handler="this.getOverflowEl().setStyle({ 'overflow-x': 'hidden' })" />
</Listeners>
<Defaults>
<ext:Parameter Name="height" Value="22" />
</Defaults>
<Items>
<ext:DisplayField ID="DisplayField1"
runat="server"
Name="test1"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField2"
runat="server"
Name="test2"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField3"
runat="server"
Name="test3"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField4"
runat="server"
Name="test4"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField5"
runat="server"
Name="test5"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField6"
runat="server"
Name="test6"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField7"
runat="server"
Name="test7"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField8"
runat="server"
Name="test8"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField9"
runat="server"
Name="test9"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField10"
runat="server"
Name="test10"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField11"
runat="server"
Name="test11"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField12"
runat="server"
Name="test12"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField13"
runat="server"
Name="test13"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField14"
runat="server"
Name="test14"
Cls="total-field"
Text="-"
/>
<ext:DisplayField ID="DisplayField15"
runat="server"
Name="test15"
Cls="total-field"
Text="-"
/>
</Items>
</ext:FieldContainer>
</DockedItems>
</ext:GridPanel></Items></ext:Panel>
</form>
</body>
</html>

In above example at the time of load scroll is not working if we resize any column the scroll is working. Could you please suggest me to solve this issue.

Thanks
Kavitha

**kavitha** · Apr 02, 2014, 6:22 AM

I am testing above code with GoogleChrome browser

**Daniil** · Apr 02, 2014, 3:40 PM

Please edit your post, wrapping the code in [CODE] tags.

**kavitha** · Apr 03, 2014, 5:13 AM

Hi Daniil,

Please check you example with Google Chrome browser Horizontal scroll is working only after resizing column remaining browsers like InternetExplorer and Firefox it is working fine.

Could you please check and suggest me to solve issue.

**Daniil** · Apr 04, 2014, 9:10 PM

Please do the following.

Originally Posted by Daniil

Please edit your post, wrapping the code in [CODE] tags.

Thread: Horizontal scroll bar in Gridpanel containing Grid Totals row

Thread Tools

Search Thread

Display

Horizontal scroll bar in Gridpanel containing Grid Totals row

Similar Threads

[FIXED] [#385] [2.x] there is a horizontal scroll bar in nested gridpanel ?

[CLOSED] Auto Move GridPanel horizontal scroll bar?

[CLOSED] Horizontal scroll bar on a Grid panel starting from a specific column

No Horizontal Scroll bar in GridPanel

[CLOSED] Impossible to show horizontal scroll in gridpanel

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: Horizontal scroll bar in Gridpanel containing Grid Totals row

Horizontal scroll bar in Gridpanel containing Grid Totals row

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us