[CLOSED] Lock first row

**Stefanaccio** · Feb 28, 2011, 4:43 PM

Hi,

Can I lock the first row of a grid?
In my application, I calculate (server-side) the totals of all numeric columns of a grid.
The totals are stored in the first row of the grid Store.

I'd like to freeze the first row of the grid so that totals are always visible, also when I scroll the grid.

Bye,
Stefano

**Daniil** · Feb 28, 2011, 4:56 PM

Hi,

We would suggest you something like this:
https://examples1.ext.net/#/GridPane...ping_TotalRow/

**Stefanaccio** · Mar 01, 2011, 7:32 AM

Hi,

this is not exactly what I needed.
My totals are calculated server-side and appear on the first row of the grid.
Is possible to lock only the first row?

Bye,
Stefano

**Vladimir** · Mar 01, 2011, 10:22 AM

Hi,

GridPanel has no functionality for row locking

My totals are calculated server-side

You can calculate it on server side and set calculated values to DisplayField

and appear on the first row of the grid.

You can use TopBar instead BottomBar

**Stefanaccio** · Mar 01, 2011, 10:53 AM

Hi,

I tried something like https://examples1.ext.net/#/GridPane...ping_TotalRow/ as suggested by Daniil.
The problem is that my grid has 30 columns and an horizontal scrollbar appears.
So, the BottomBar (or TopBar) containing DisplayFields don't scroll with grid columns.

Bye,
Stefano

**Daniil** · Mar 01, 2011, 2:10 PM

Hmm, I can't see any way to scroll toolbar and grid together.

I can suggest you to use an alternative way - using an additional header row.

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, 4, 7 },
                new object[] { 2, 5, 8 },
                new object[] { 3, 6, 9 }
            };
            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>

    <script type="text/javascript">
        var updateTotal = function () {
            var column,
                field,
                data = {},
                c,
                grid = this,
                cs = grid.view.getColumnData();

            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];
                    column = grid.getColumnModel().columns[i];
                    if (!Ext.isDefined(data[c.name])) {
                        data[c.name] = 0;
                    }
                    data[c.name] += r.data[c.name];
                }
            }

            for (var i = 0; i < grid.getColumnModel().columns.length; i++) {
                column = grid.getColumnModel().columns[i];

                field = function() {
                    switch (column.dataIndex) {
                        case "test1" : return Ext.getCmp("ColumnField1");
                        case "test2" : return Ext.getCmp("ColumnField2");
                        case "test3" : return Ext.getCmp("ColumnField3");
                    }
                }();

                c = cs[i];
                field.setValue((c.renderer)(data[c.name], {}, {}, 0, i, grid.store));
            }
        }

    </script>

    <style type="text/css">
        .total-field {
            background-color: #fff;
            font-weight: bold !important;
            color: #000;
            border: solid 1px silver;
            padding: 2px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        Height="100" 
        Width="200" 
        AutoScroll="true">
        <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">
                    <Editor>
                        <ext:NumberField runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Test2" DataIndex="test2">
                    <Editor>
                        <ext:NumberField runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Test3" DataIndex="test3">
                    <Editor>
                        <ext:NumberField runat="server" />
                    </Editor>
                </ext:Column>
            </Columns>
        </ColumnModel>
        <View>
            <ext:GridView runat="server">
                <HeaderRows>
                    <ext:HeaderRow>
                        <Columns>
                            <ext:HeaderColumn>
                                <Component>
                                    <ext:DisplayField 
                                        ID="ColumnField1" 
                                        runat="server" 
                                        DataIndex="test1" 
                                        Cls="total-field"
                                        Text="-" />
                                </Component>
                            </ext:HeaderColumn>
                            <ext:HeaderColumn>
                                <Component>
                                    <ext:DisplayField 
                                        ID="ColumnField2" 
                                        runat="server" 
                                        DataIndex="test2" 
                                        Cls="total-field"
                                        Text="-" />
                                </Component>
                            </ext:HeaderColumn>
                            <ext:HeaderColumn>
                                <Component>
                                    <ext:DisplayField 
                                        ID="ColumnField3" 
                                        runat="server" 
                                        DataIndex="test3" 
                                        Cls="total-field"
                                        Text="-" />
                                </Component>
                            </ext:HeaderColumn>
                        </Columns>
                    </ext:HeaderRow>
                </HeaderRows>
            </ext:GridView>
        </View>
        <Listeners>
            <AfterRender Fn="updateTotal" Delay="100" />
            <ViewReady Handler="this.getView().refreshRow = this.getView().refreshRow.createSequence(updateTotal, #{GridPanel1});" />
        </Listeners>
    </ext:GridPanel>
    </form>
</body>
</html>

**Stefanaccio** · Mar 01, 2011, 3:19 PM

Hi Daniil,

your solution is good, but actually my gridpanel use a LockingGridView to lock the first two columns and is not possible to combine
LockingGridView and GridView.

Is there a way in your solution to lock a column?

Bye,
Stefano

**Daniil** · Mar 01, 2011, 3:48 PM

Do you need to show a sum of locked column?

**Daniil** · Mar 01, 2011, 3:59 PM

Originally Posted by Daniil

Do you need to show a sum of locked column?

If no, it could look something like this:

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, 4, 7 },
                new object[] { 2, 5, 8 },
                new object[] { 3, 6, 9 }
            };
            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>
 
    <script type="text/javascript">
        var updateTotal = function () {
            var column,
                field,
                data = {},
                c,
                grid = this,
                cs = grid.view.getColumnData();
 
            debugger;
            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];
                    column = grid.getColumnModel().columns[i];
                    if (!column.locked) {
                        if (!Ext.isDefined(data[c.name])) {
                            data[c.name] = 0;
                        }
                        data[c.name] += r.data[c.name];
                    }
                }
            }
 
            for (var i = 0; i < grid.getColumnModel().columns.length; i++) {
                column = grid.getColumnModel().columns[i];
 
                if (!column.locked) {
                    field = function() {
                        switch (column.dataIndex) {
                            case "test2" : return Ext.getCmp("ColumnField1");
                            case "test3" : return Ext.getCmp("ColumnField2");
                        }
                    }();
     
                    c = cs[i];
                    field.setValue(c.renderer(data[c.name], {}, {}, 0, i, grid.store));
                }
            }
        }
 
    </script>
 
    <style type="text/css">
        .total-field {
            background-color: #fff;
            font-weight: bold !important;
            color: #000;
            border: solid 1px silver;
            padding: 2px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel
        ID="GridPanel1"
        runat="server"
        Height="100"
        Width="200"
        AutoScroll="true">
        <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" Locked="true">
                    <Editor>
                        <ext:NumberField runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Test2" DataIndex="test2">
                    <Editor>
                        <ext:NumberField runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Test3" DataIndex="test3">
                    <Editor>
                        <ext:NumberField runat="server" />
                    </Editor>
                </ext:Column>
            </Columns>
        </ColumnModel>
        <View>
            <ext:LockingGridView runat="server">
                <HeaderRows>
                    <ext:HeaderRow>
                        <Columns>
                            <ext:HeaderColumn>
                                <Component>
                                    <ext:DisplayField
                                        ID="ColumnField1"
                                        runat="server"
                                        DataIndex="test1"
                                        Cls="total-field"
                                        Text="-" />
                                </Component>
                            </ext:HeaderColumn>
                            <ext:HeaderColumn>
                                <Component>
                                    <ext:DisplayField
                                        ID="ColumnField2"
                                        runat="server"
                                        DataIndex="test2"
                                        Cls="total-field"
                                        Text="-" />
                                </Component>
                            </ext:HeaderColumn>
                        </Columns>
                    </ext:HeaderRow>
                </HeaderRows>
            </ext:LockingGridView>
        </View>
        <Listeners>
            <AfterRender Fn="updateTotal" Delay="100" />
            <ViewReady Handler="this.getView().refreshRow = this.getView().refreshRow.createSequence(updateTotal, #{GridPanel1});" />
        </Listeners>
    </ext:GridPanel>
    </form>
</body>
</html>

**Stefanaccio** · Mar 01, 2011, 3:59 PM

Hi,

no, locked columns are the only columns that contain no totals.

Bye,
Stefano

Thread: [CLOSED] Lock first row

Thread Tools

Search Thread

Display

[CLOSED] Lock first row

Similar Threads

Question about Lock and Filter.

How to lock or freeze a TabPanel tab for viewing?

Lock row for block another user to edit ?

Lock the parent (Modal=true)

GridPanel lock Column and Header [0.8.2]

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Lock first row

[CLOSED] Lock first row

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us