What's New?

[CLOSED] [1.0] GridPanel Column Vertical Align

  1. #1
    Mar 31, 2010, 6:09 PM

    [CLOSED] [1.0] GridPanel Column Vertical Align

    Hello,

    Was wondering how I might be able to change the vertical alignment of the GridPanel? I have a row that has multiple lines (line breaks) and everything seems to be rendering in the middle.


    Cheers,
    Timothy
  2. #2
    Mar 31, 2010, 6:22 PM

    RE: [CLOSED] [1.0] GridPanel Column Vertical Align

    Hi,

    Can you demonstrate the grid which has middle alignment? For me a text in the cell has top alignment
  3. #3
    Mar 31, 2010, 6:53 PM

    RE: [CLOSED] [1.0] GridPanel Column Vertical Align

    Hello vladimir,

    Just a simple grid panel would suffice, the value of the birthday column has a vertical alignment of the middle of the cell, would like to make it top.

    <ext:GridPanel runat="server">
    <ColumnModel>
        <Columns>
            <ext:Column ColumnID="Name" Header="Name">
                <Renderer Handler="return record.data.Name + '<br>' + record.data.Location" />
            </ext:Column>
            <ext:Column ColumnID="Birthday" Header="Birthday" />
        </Columns>
    </ColumnModel>
</ext:GridPanel>
    Cheers
  4. #4
    Apr 01, 2010, 3:00 AM

    RE: [CLOSED] [1.0] GridPanel Column Vertical Align

    Hi,

    I am still cannot reproduce vertical middle alignment
    Here is my test case

    <%@ 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.GridPanel1.Store.Primary.DataSource = new object[]
            {
                new object[] { "Name", "Location", "Birthday" }                
            };

            this.GridPanel1.Store.Primary.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></title> 
</head>
<body>
    <ext:ResourceManager runat="server" />
    
    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        Title="Array Grid" 
        Width="600" 
        Height="350">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Location" />
                            <ext:RecordField Name="Birthday" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column ColumnID="Name" Header="Name">
                    <Renderer Handler="return record.data.Name + '<br>' + record.data.Location" />
                </ext:Column>
                <ext:Column ColumnID="Birthday" Header="Birthday" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>          
</body>
</html>
  5. #5
    Apr 06, 2010, 3:27 AM

    RE: [CLOSED] [1.0] GridPanel Column Vertical Align

    Hi Timothy,

    Just wondering if this is still an issue? Do you have any css classes that might be overriding global html elements/tags, such as "td"?




    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    Apr 11, 2010, 9:16 PM

    RE: [CLOSED] [1.0] GridPanel Column Vertical Align

    Sorry for the delayed response, swamped with work.

    Happens when you have a GridCommand on the GridPanel.


    Cheers
  7. #7
    Apr 12, 2010, 9:37 AM

    RE: [CLOSED] [1.0] GridPanel Column Vertical Align

    Hi,

    If you need to change vertical align for particular column then you can set ColumnID and css rule
    See the following sample
    
<%@ 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.GridPanel1.Store.Primary.DataSource = new object[]
            {
                new object[] { "Name", "Location", "Birthday" }                
            };

            this.GridPanel1.Store.Primary.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></title> 
    
    <style type="text/css">
        td.x-grid3-td-Birthday{
            vertical-align:top !important;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />
    
    <ext:GridPanel 
        ID="GridPanel1"
        runat="server" 
        Title="Array Grid" 
        Width="600" 
        Height="350">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Location" />
                            <ext:RecordField Name="Birthday" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column ColumnID="Name" Header="Name">
                    <Renderer Handler="return record.data.Name + '<br>' + record.data.Location" />
                </ext:Column>
                <ext:Column ColumnID="Birthday" Header="Birthday" />
                <ext:CommandColumn>
                    <Commands>
                        <ext:GridCommand Icon="Add" />
                    </Commands>
                </ext:CommandColumn>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>          
</body>
</html>

Similar Threads

  1. Vertical scrollbar in gridview column
    By paulselva_26 in forum 1.x Help
    Replies: 8
    Last Post: Jan 07, 2013, 8:22 AM
  2. Label FieldLabel vertical align issue
    By alexot in forum 1.x Help
    Replies: 1
    Last Post: Jan 03, 2012, 1:35 PM
  3. [CLOSED] Label + FieldLabel vertical align inside TableLayout
    By jwf in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 21, 2011, 8:41 AM
  4. [CLOSED] Two column layout with vertical scroll bar
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 26, 2011, 10:28 PM
  5. GridPanel Vertical Scrollbar only shows after sorting a column
    By paul-2011 in forum 1.x Help
    Replies: 2
    Last Post: Nov 30, 2010, 8:30 PM

Posting Permissions