Locking total rows column using docked items ,field container in ext.net gridview.

  1. #1

    Locking total rows column using docked items ,field container in ext.net gridview.

    Hi Guys,

    I have one grid panel with Totals row in Field Container in bottom, i want first column of GridPanel to be locked if i use Locked Property of column it is working only top gridpanel but not work for total rows columns in bottom when delete gridview id .Could you please take a look and Provide any suggestions.

    Please find my code below

    <%@ 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[] {"First", "1.1", "1.01"},
                    new object[] {"Second", "2.2", "2.02"},
                    new object[] {"Third", "3.3", "3.01"}
                };
                 
                store.DataBind();
            }
        }
    </script>
      
    <!DOCTYPE html>
         
    <html>
    <head id="Head1" 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: null,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 id="Form1" runat="server">
            <h1>GridPanel with Total Row</h1>
             
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
             
            <ext:GridPanel ID="GridPanel1" runat="server" Width="1000" Height="200">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" Type="Float"/>
                                    <ext:ModelField Name="test3" 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"  Width="170" Locked="true" >
                 
                        </ext:Column>
                        <ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column ID="Column3" 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 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="-"
                                />                                                    
                        </Items>
                    </ext:FieldContainer>
                </DockedItems>
         
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	totalrows.PNG 
Views:	149 
Size:	8.1 KB 
ID:	24501  
    Last edited by fabricio.murta; Mar 15, 2016 at 7:54 PM. Reason: Wrap [code] tags around code.
  2. #2
    Hello @Jyothibabu and welcome to Ext.NET forums!

    You did and excellent work in providing a sample code of your current page, but I am afraid it has some issues that could be caused due to breaking changes between Ext.NET versions. Are you writing this in Ext.NET 2.5.3?

    I couldn't really reproduce your isse here due to these problems, so I am not certain in how to advice you to address the issue.

    It could help if you reviewed your example with this locking example with totals (the totals row in the example is always pivot-locked): Locking, Group Summary Grid Example with grouped headers and docked summary

    I think that, from this example, you won't need the grouping concept.

    Hope this helps!

    p.s.: When you paste code, please wrap it between [code ] and [/code ] tags. That would help a lot for us both reading and copypasting your code. You may consider also removing the code behind references from the first line (turning it into just <%@ Page Language="C#" %>).
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks fabricio.murta.

    I am using ext.net 2.1 version,I don't need the grouping concept.

    In my code we delete Locked="true" its working normally but we put this tag its not working.Please help this scenario
  4. #4
    Hello @Jyothibabu,

    Sorry, we can't help much with older versions (in a same major version) specially when we can't reproduce the issue with the newer versions. We believe that this problem have been already fixed on latest versions of Ext.NET (2.5.3, as the example presented), and thus is just not supported on the v2.1, where the functionality was still evolving to stability.

    That said, we strongly advice you to upgrade our Ext.NET version to the latest on the 2.x version (which would be, again, 2.5.3).

    We're confident that you are not going to have this problem with TreeGrid on the newer versions.

    Hope you understand!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Could you please send latest version example.
  6. #6
    Hello!

    Although I couldn't reproduce the issue as you explained, I could see an issue that the code to update the summary below the grid simply didn't support columns locking and it had to be implemented.

    The implementation of locking grid support resulted in the following sample, working with Ext.NET 2.5.3:
    <%@ Page Language="C#" %>
    
    <!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[] {"First", "1.1", "1.01"},
                    new object[] {"Second", "2.2", "2.02"},
                    new object[] {"Third", "3.3", "3.01"}
                };
                 
                store.DataBind();
            }
        }
    </script>
      
    <!DOCTYPE html>
         
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with Total Row - Ext.Net Example</title>
         
        <script>
            var updateTotal = function (grid, container) {
                var hasLockedCols = (grid.lockedGrid && grid.normalGrid);
                var renderedLockedCols = hasLockedCols && grid.lockedGrid.view.rendered && grid.normalGrid.view.rendered;
    
                if (!grid.view.rendered && !renderedLockedCols) {
                    return;
                }
    
                var field,
                    value,
                    width,
                    data = {  test1: null,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);
    
                    var colPos = i; // Initially column position is just visible columns' index
    
                    // if grid locking is enabled, then get column position from master grid
                    if (grid.isLocked !== undefined) {
                        colPos = grid.up().columnManager.getHeaderIndex(c);
                    }
    
                    container.insert(colPos, 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 + '"]');
    
                    if (column != null)
                     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:GridPanel ID="GridPanel1" runat="server" Width="1000" Height="200">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" Type="Float"/>
                                    <ext:ModelField Name="test3" 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"  Width="170" Locked="true" />
                        <ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" />
                        <ext:Column ID="Column3" 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 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="-"
                                />                                                    
                        </Items>
                    </ext:FieldContainer>
                </DockedItems>
         
            </ext:GridPanel>
        </form>
    </body>
    </html>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Thanks fabricio.murta,

    But total rows still unable to loking.Please find my screen shots
    Attached Thumbnails Click image for larger version. 

Name:	t2.PNG 
Views:	107 
Size:	12.0 KB 
ID:	24509   Click image for larger version. 

Name:	t1.PNG 
Views:	114 
Size:	9.5 KB 
ID:	24510  
  8. #8
    Hello!

    Yes, good test you've done there. Actually, this example is not meant to work with Locking grid. Probably a better approach to this would be to just make an additional row value with the summary and use a renderer to make it bold. The locking grid approach is full of pitfalls that we'll just keep hitting if we continue on the example's approach.

    Maybe a Grouping Summary is the way to go in this case!
    Fabrício Murta
    Developer & Support Expert
  9. #9
    So, I'd say that this one would be a proper usage of the summary plug in (using an actual summary plug in). I even "abused" it a little to show a custom summary building for the string column. Of course, you could but use no SummaryType nor CustomSummaryType setting on the column definition to leave the field empty.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <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[] {"First", "1.1", "1.01"},
                    new object[] {"Second", "2.2", "2.02"},
                    new object[] {"Third", "3.3", "3.01"}
                };
    
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>GridPanel with Total Row - Ext.Net Example</title>
    
        <script type="text/javascript">
            // A custom implementation of summary for the textual column. Will append strings separating them with a
            // comma.
            var test1Append = function (records, dataIndex) {
                if (records.length > 0) {
                    var total = "<b>Summary:</b> " + records[0].get(dataIndex);
    
                    for (var i = 1; i < records.length; i++) {
                        total += ", " + records[i].get(dataIndex);
                    }
    
                    return total;
                } else {
                    return "<b>Summary:</b> N/A";
                }
    
            }
        </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:GridPanel ID="GridPanel1" runat="server" Width="500" Height="200">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" Type="Float"/>
                                    <ext:ModelField Name="test3" Type="Float"/>
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
    
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <%-- A custom summary type here. If there's no summary setting at all, the field is left blank. --%>
                        <ext:Column ID="Column1" runat="server" Text="Test1" DataIndex="test1" Locked="true"
                            Width="350" CustomSummaryType="test1Append" />
                        <%-- For the other two columns, just sum their floating point values. --%>
                        <ext:Column ID="Column2" runat="server" Text="Test2" DataIndex="test2" SummaryType="Sum" />
                        <ext:Column ID="Column3" runat="server" Text="Test3" DataIndex="test3" SummaryType="Sum" />
                    </Columns>
                </ColumnModel>
    
                <Features>
                    <%-- Let's dock the summary line in the bottom of the grid. --%>
                    <ext:Summary runat="server" Dock="Bottom" />
                </Features>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    The only not-so-cool thing here is that the horizontal scrollbar is between the summary and the table -- but after all, the dock specified it: "bottom". If this bugs you, just remove the Dock="Bottom" and it will always be the last row of the grid.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Cumulative Total/ Running Total Column in Grid Panel
    By hemantpatil in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 03, 2013, 10:41 AM
  2. [CLOSED] Hide Column with Locking Column, GridView
    By osef in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 22, 2012, 6:03 PM
  3. [CLOSED] GridView - Locking and Multi Header
    By Technetium in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 08, 2012, 9:46 AM
  4. Replies: 1
    Last Post: Jan 08, 2012, 5:10 AM
  5. [CLOSED] [1.0] Locking gridview refreshRow method broken
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 16, 2010, 1:59 PM

Posting Permissions