[CLOSED] [1.0] GridPanel issue with Grouping and Column Alignment

  1. #1

    [CLOSED] [1.0] GridPanel issue with Grouping and Column Alignment

    We discovered an issue with the GridPanel (SVN as of today) where setting alignment on a column will cause a problem when that column is grouped. When the column (alignment specified) is grouped, the header will disappear, but the row value will not, causing the data to be shifted over and not matching the headers appropriately.

    To reproduce, I took the Gridpanel Grouping example (/Examples/GridPanel/Miscellaneous/Grouping/Default.aspx) and modified it as seen below. I moved the Indoor? column to be second in the columns and set the Align="right" property. When you group on the Indoor? column, the header will hide, but the data will still be present in the column, shoving other columns over.

    <ColumnModel runat="server">
        <Columns>
            <ext:Column ColumnID="Common" Header="Common Name" DataIndex="Common" Width="220" />
            <ext:Column Header="Indoor?" DataIndex="Indoor" Width="55" Align="right" />
            <ext:Column Header="Light" DataIndex="Light" Width="130" />
            <ext:Column Header="Price" DataIndex="Price" Width="70" Align="right" Groupable="false">
                <Renderer Format="UsMoney" />
            </ext:Column>
            <ext:DateColumn Header="Available" DataIndex="Availability" Width="95" Groupable="false" Format="yyyy-MM-dd" />
        </Columns>
    </ColumnModel>
    Last edited by geoffrey.mcgill; Jul 07, 2010 at 1:57 AM.
  2. #2

    RE: [1.0] GridPanel issue with Grouping and Column Alignment

    Hello, schimkem!

    Yes, there is a bug in the ExtJS toolkit. I will report this bug to the ExtJS team.
    So, to fix it at the moment please add the following code in the <head> of your page.
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript">
            Ext.grid.GridView.override({
                getColumnStyle: function(col, isHeader) {
                    var style = !isHeader ? (this.cm.config[col].css || '') : '';
                    style += 'width:' + this.getColumnWidth(col) + ';';
                    if (this.cm.isHidden(col)) {
                        style += 'display:none;';
                    }
                    var align = this.cm.config[col].align;
                    if (align) {
                        style += 'text-align:' + align + ';';
                    }
                    return style;
                }
            });     
        </script>
  3. #3

    RE: [1.0] GridPanel issue with Grouping and Column Alignment

    Daniil,

    Thanks for the help, the workaround worked perfectly.

    Mark
    Last edited by geoffrey.mcgill; Jul 07, 2010 at 1:57 AM.
  4. #4

    RE: [1.0] GridPanel issue with Grouping and Column Alignment

    Don't mention it:)

Similar Threads

  1. GridPanel grouping issue
    By milenios in forum 2.x Help
    Replies: 2
    Last Post: Aug 07, 2012, 6:58 PM
  2. [CLOSED] Text Alignment issue
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 16, 2011, 1:51 PM
  3. [CLOSED] GridPanel Column Header Alignment
    By ArcadisUS in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 08, 2011, 2:51 PM
  4. Replies: 0
    Last Post: Feb 17, 2010, 5:38 AM
  5. [CLOSED] Column alignment with scrollbars in GridPanel
    By jsemple in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Mar 09, 2009, 3:58 PM

Posting Permissions