[CLOSED] How to achieve Dynamic Multilevel Columns generation

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] How to achieve Dynamic Multilevel Columns generation

    Hi,
    We have a requirement where we need to generate the grid with multi level or column grouping dynamically using Ext.net 4.X version. Please find the attachment, this is current UI of aspx controls, we need to get the same in Ext UI.
    Could you please suggest us on How we can get the same layout or UI with Ext.JS or Ext.Net?

    I tried with column Grouped Header but could not get exactly. please find the code below which i tried.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Grouped Header Example - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <style>
            /* style rows on mouseover */
            .x-grid-row-over .x-grid-cell-inner {
                font-weight: bold;
            }
             #label, .x-grid-cell-label {
                background: gray !important;
                color: #fff;
            }
        </style>
    
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
    
        <h1>Grouped Header Example</h1>
    
    
        <p>This example shows how to create a grid with column headers which are nested within category headers.</p>
        <p>Category headers do not reference Model fields via a <code>dataIndex</code>, rather they contain
        child header definitions (which may themselves either contain a <code>dataIndex</code> or more levels of headers).</p>
    
    
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Grouped Header Grid"
            WidthSpec="100%"
            ColumnLines="true"
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Line Item Block">
                        <Columns>
                    <ext:Column ID="label" runat="server" Text="" Sortable="false" MenuDisabled="true" Flex="2">
                            <Renderer Fn="function (v, p, record, rowIndex) {return 'Row ¹'+rowIndex}" />
                        </ext:Column>
                            </Columns>
                            </ext:Column>
                    <ext:Column runat="server" Text="Description/Selected Columns">
                        <Columns>
                            <ext:Column runat="server" Text="Price" DataIndex="price" Width="75" Sortable="true">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change" DataIndex="change" Width="75" Sortable="true">
                                <Renderer Fn="change" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change %" DataIndex="pctChange" Width="75" Sortable="true">
                                <Renderer Fn="pctChange" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Price" DataIndex="price" Width="75" Sortable="true">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change" DataIndex="change" Width="75" Sortable="true">
                                <Renderer Fn="change" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change %" DataIndex="pctChange" Width="75" Sortable="true">
                                <Renderer Fn="pctChange" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Price" DataIndex="price" Width="75" Sortable="true">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change" DataIndex="change" Width="75" Sortable="true">
                                <Renderer Fn="change" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change %" DataIndex="pctChange" Width="75" Sortable="true">
                                <Renderer Fn="pctChange" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Price" DataIndex="price" Width="75" Sortable="true">
                                <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change" DataIndex="change" Width="75" Sortable="true">
                                <Renderer Fn="change" />
                            </ext:Column>
                            <ext:Column runat="server" Text="Change %" DataIndex="pctChange" Width="75" Sortable="true">
                                <Renderer Fn="pctChange" />
                            </ext:Column>
                        </Columns>
                    </ext:Column>
                    <ext:Column runat="server" Text="Total">
                        <Columns>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="85" Sortable="true" Format="dd/MM/yyyy" />
                            </Columns>
                            </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	DynamicColumnHeaderGroup.PNG 
Views:	94 
Size:	45.1 KB 
ID:	25243  

Similar Threads

  1. [CLOSED] dynamic columns to gridpanel not showing up
    By sharmav1 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 12, 2016, 4:40 PM
  2. Replies: 3
    Last Post: Apr 08, 2014, 9:33 PM
  3. [CLOSED] Dynamic form generation in 2.0
    By rthiney in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 24, 2012, 9:04 PM
  4. Replies: 0
    Last Post: Jan 06, 2012, 8:52 AM
  5. [CLOSED] Dynamic Menu Generation from Comma Delimited String
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 18, 2009, 9:18 AM

Tags for this Thread

Posting Permissions