The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Grid Panel - Showing Multiple rows in Header and data

  1. #1

    Grid Panel - Showing Multiple rows in Header and data

    Hi Team,

    I am totally new Ext.Net and planned to use this on my new project. Currently, i am validating controls as per my requirements.

    I need help to implement the Grid Panel with multiple headers and data cells. Here is the sample format:

    Click image for larger version. 

Name:	Capture.JPG 
Views:	53 
Size:	33.3 KB 
ID:	6960

    Please help if it possible. This might help me to propose this to my company to purchase the license.

    Thank you.

    Rgds
    Prasad
  2. #2
    Hello!

    Welcome to our forum!

    You can do it using the Text property of Column's header and Renderers.

    Please, take a look at the sample below, it's based on this sample: http://examples2.ext.net/#/GridPanel/ArrayGrid/Simple/

    <%@ 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)
            {
                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" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>   
    
        <style>
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
        </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>Simple Array Grid</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            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>
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price <br /><br /> Change <br /><br /> Percent Change" DataIndex="price">                  
                        <Renderer Handler="
                             return record.get('price') + '<br />' + change(record.get('change')) + '<br />' + pctChange(record.get('pctChange'));" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>            
            </ColumnModel>       
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
        </ext:GridPanel>
    </body>
    </html>

    Also, to create multiple headers, you can use HeaderItems like in this sample: http://examples2.ext.net/#/GridPanel...ader/Overview/ or Grouped headers: http://examples2.ext.net/#/GridPanel...mnHeaderGroup/
  3. #3
    Thanks for your response. I tried the same why which you suggested but data is not showing 3 rows in cell. Here is the current output:
    Click image for larger version. 

Name:	Capture.JPG 
Views:	16 
Size:	19.0 KB 
ID:	6964

    Please help me.
  4. #4
    Please, check that you use the right renderer handler for the column:

    <ext:Column runat="server" Text="Price <br /><br /> Change <br /><br /> Percent Change" DataIndex="price">                 
    	<Renderer Handler="
    		 return record.get('price') + '<br />' + change(record.get('change')) + '<br />' + pctChange(record.get('pctChange'));" />
    </ext:Column>
    Also, it is easier for us if you provide a sample.
  5. #5
    Thanks for your prompt response.

    My grid will have other controls and can be sort by headers.
    The main reason is, i have more data to display to user at a time so my grid cell have 3 or 4 database fields.
    Based on users data entry other controls data can be calculated in same row.
    All changes should be stored into database by single click. I believe, this Ext.Net Grid and Tree Panels are compatible to Mobile devices (Mainly IPad). I will continue my R&D if it is compatible otherwise i will go with grid which it created using HTML5 and CSS3.

    I will be waiting for your comments.

    Thank you.

    Rgds
    Prasad
  6. #6
    Quote Originally Posted by pessimca View Post
    Thanks for your prompt response.

    My grid will have other controls and can be sort by headers.
    The main reason is, i have more data to display to user at a time so my grid cell have 3 or 4 database fields.
    Based on users data entry other controls data can be calculated in same row.
    All changes should be stored into database by single click. I believe, this Ext.Net Grid and Tree Panels are compatible to Mobile devices (Mainly IPad). I will continue my R&D if it is compatible otherwise i will go with grid which it created using HTML5 and CSS3.

    I will be waiting for your comments.

    Thank you.

    Rgds
    Prasad
    Unfortunately, Ext.NET doesn't support mobile devices due to limitations of Ext JS. However, in some cases solutions made by Ext.NET can work on iPad as well.

Similar Threads

  1. Replies: 16
    Last Post: Feb 23, 2011, 11:03 AM
  2. [CLOSED] [1.0] Grid column header group - span multiple rows
    By Neil_Walters in forum 1.x Premium Help
    Replies: 3
    Last Post: Jan 15, 2011, 12:11 AM
  3. Grid Panel not showing complete data
    By Nagaraj K Hebbar in forum 1.x Help
    Replies: 2
    Last Post: Aug 17, 2009, 11:42 AM
  4. Replies: 9
    Last Post: Apr 27, 2009, 4:19 PM
  5. Grid rows not showing
    By myron in forum 1.x Help
    Replies: 16
    Last Post: Apr 27, 2009, 10:49 AM

Tags for this Thread

Posting Permissions