Grid Column Summary Plugin?

Page 1 of 2 12 LastLast
  1. #1

    Grid Column Summary Plugin?

    Hi,

    I want to display summary for few columns in my grid.
    I have already seen example of Grid TotalRow on ext.net example site.

    Is there any plugin available out of the box, so that i can just implement it and dont worry about any javascript codes in my page?

    If there is no existing plugin then i have found a plugin from Rahul singla http://www.rahulsingla.com/blog/2010...hout-grouping)

    Can you please tell me how to create a plugin out of this? I mean the class to create and attaching the javascript and css. How to do it?

    Regards,
    Huzefa
    Last edited by huzzy143; Aug 03, 2011 at 5:27 PM.
  2. #2

    Please Help!!

    Guys.. Anyone can please help me out..
    Its very urgent
  3. #3
    Hi,

    Please use <ext:GenericPlugin> to attach any custom plugin.

    Please see the example.

    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 },
                    new object[] { 2, 5 },
                    new object[] { 3, 6 }
                };
                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>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        
        <script type="text/javascript" src="/Resources/js/Ext.ux.GridTotals.js"></script>
        <link rel="stylesheet" type="text/css" href="/Resources/css/Ext.ux.GridTotals.css" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                Height="150" 
                Width="250">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" Type="Int" />
                                    <ext:RecordField Name="test2" Type="Int" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1">
                            <CustomConfig>
                                <ext:ConfigItem Name="summaryType" Value="sum" Mode="Value" />
                            </CustomConfig>
                        </ext:Column>
                        <ext:Column Header="Test2" DataIndex="test2">
                            <CustomConfig>
                                <ext:ConfigItem Name="summaryType" Value="sum" Mode="Value" />
                            </CustomConfig>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:GenericPlugin InstanceName="Ext.ux.GridTotals" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4

    how about creating a plugin control

    Hi Danil,

    Thanks for your solution and throwing a light on this matter.

    What if i want to create a plugin control out of it. What i mean that i don't have to remember the instance name as well as adding the script and css file.
    Just add the plugin control and everything will be added with it.

    Why i am asking this is that i will be using this plugin on each and every form. Every-time i have to do the steps described by you, then it would be tedious.

    Can you throw some light on creating a Plugin control out of this?

    Regards,
    Huzefa
  5. #5
    Please just extend Ext.Net.Plugin class and override the .Resources and .InstanceOf properties.

    As an example you can investigate the Ext.Net.EditableGrid class.
    <Ext.Net root folder>\Ext.Net\Ext\UX\Plugins\EditableGrid\Editab leGrid.cs
  6. #6

    Please explain

    Hi Daniil,

    Yes i have created a class deriving from Plugin class. Here is what my class looks like.
    Can you explain me, what should be contained in the text marked as bold

    [assembly: WebResource("Ext.Net.UX.Plugins.GridSummaryRow.resources.GridSummaryRow.js", "text/javascript")]
    
    namespace Ext.Net
    {
        [ToolboxData("<{0}:GridSummaryRow runat=\"server\" />")]
        [Description("GridSummaryRow plugin used to display summary at the end of grid.")]
        public partial class GridSummaryRow : Plugin
        {
            protected override List<ResourceItem> Resources
            {
                get
                {
                    List<ResourceItem> baseList = base.Resources;
                    baseList.Capacity += 1;
    
                    baseList.Add(new ClientScriptItem(typeof(GridSummaryRow), "Ext.Net.Build.Ext.Net.ux.plugins.gridsummaryrow/gridsummaryrow.js", "/ux/plugins/gridsummaryrow/gridsummaryrow.js"));
    
                    return baseList;
                }
            }
    
            /// <summary>
            /// 
            /// </summary>
            [Category("0. About")]
            [Description("")]
            public override string InstanceOf
            {
                get
                {
                    return "Ext.ux.GridTotals";
                }
            }
        }
    }
    Regards,
    Huzefa
  7. #7
    As you can see bold tag doesn't make text bold within [CODE ] tags. Just for the future.

    Here should be an embedded path of a resource.
    [assembly: WebResource(embeddedPath, "text/javascript")]
    and
    new ClientScriptItem(type, embeddedPath, path)
    This link should help you to understand how "embeddedPath" should look for your project.
    http://www.codeproject.com/KB/dotnet...resources.aspx

    "path" is used if you set RenderScripts="File" and RenderStyles="File". If no, you can just set up an empty string.

    See also
    http://forums.ext.net/showthread.php?7364

    Now I will demonstrate how it loos on my side:

    GridTotals.cs
    using System.Collections.Generic;
    using System.ComponentModel;
    using Ext.Net;
    
    namespace Work
    {
        public partial class GridTotals : Plugin
        {
            protected override List<ResourceItem> Resources
            {
                get
                {
                    List<ResourceItem> baseList = base.Resources;
                    baseList.Capacity += 1;
    
                    baseList.Add(new ClientScriptItem(typeof(GridTotals), "Work.Resources.js.Ext.ux.GridTotals.js", ""));
                    baseList.Add(new ClientStyleItem(typeof(GridTotals), "Work.Resources.css.Ext.ux.GridTotals.css", ""));
    
                    return baseList;
                }
            }
    
            public override string InstanceOf
            {
                get
                {
                    return "Ext.ux.GridTotals";
                }
            }
        }
    }
    AssemblyInfo.css
    [assembly: WebResource("Work.Resources.js.Ext.ux.GridTotals.js", "text/javascript")]
    [assembly: WebResource("Work.Resources.css.Ext.ux.GridTotals.css", "text/css")]
    Please note that Work is the Namespace in my project and the js and css are placed, respectively, in:
    Root project folder/Resources/js/Ext.ux.GridTotals.js
    Root project folder/Resources/js/Ext.ux.GridTotals.css
    I've a bit modified the css:

    Ext.ux.GridTotals.css
    .x-grid3-simple-totals .x-grid3-row-last {
        margin-bottom: 21px;
    }
          
    .x-grid3-simple-totals .x-grid-total-row {
        position: absolute;
        bottom: 15px !important;
        left: 0;
    }
    
    .x-grid3-simple-totals .x-grid-total-row td {
        border-left: 1px solid #EEEEEE;
        border-right: 1px solid #D0D0D0;
        padding-left: 0px;
        padding-right: 0px;
    }

    Example Usage
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Assembly="Work" Namespace="Work" TagPrefix="myExt" %>
     
    <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 },
                    new object[] { 2, 5 },
                    new object[] { 3, 6 }
                };
                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:GridPanel
                ID="GridPanel1"
                runat="server"
                Height="150"
                Width="250">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" Type="Int" />
                                    <ext:RecordField Name="test2" Type="Int" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1">
                            <CustomConfig>
                                <ext:ConfigItem Name="summaryType" Value="sum" Mode="Value" />
                            </CustomConfig>
                        </ext:Column>
                        <ext:Column Header="Test2" DataIndex="test2">
                            <CustomConfig>
                                <ext:ConfigItem Name="summaryType" Value="sum" Mode="Value" />
                            </CustomConfig>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <myExt:GridTotals runat="server" />
                </Plugins>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  8. #8

    Doesn't seem to work

    Hi Danil,

    I did everything as you have specified, the the plugin doesn't seem to work. What i feel is that the js and css are not getting loaded.

    I have created a small sample which i have uploaded on this https://rapidshare.com/files/3314636...uginSample.rar Link. Please have a look

    Its very urgent. Thanks for your support, its appreciated

    Regards,
    Huzefa
  9. #9
    1. You didn't mark resources (js and css files) as embedded resources:
    Right click on a file -> Properties -> Build Action -> Embedded Resource

    2. The plugin doesn't support AutoHeight="true". So, please set up fixed .Height.

    3. Please use css that I posted here:
    http://forums.ext.net/showthread.php...ll=1#post63023
  10. #10

    how to set height for plugin.

    2. The plugin doesn't support AutoHeight="true". So, please set up fixed .Height.
    How do i set height in the plugin.. Is there any property for it?
Page 1 of 2 12 LastLast

Similar Threads

  1. Grid Panel Summary Column
    By Mina in forum 1.x Help
    Replies: 3
    Last Post: Jan 02, 2012, 9:03 AM
  2. Replies: 5
    Last Post: Dec 26, 2011, 5:39 AM
  3. Replies: 0
    Last Post: Apr 10, 2011, 7:57 PM
  4. [CLOSED] Grid Editor with Summary in data column [1.0]
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 07, 2011, 9:13 AM
  5. Replies: 1
    Last Post: Sep 03, 2009, 2:06 PM

Tags for this Thread

Posting Permissions