Topic
  • 9 replies
  • Latest Post - ‏2013-01-03T19:12:46Z by SystemAdmin
SystemAdmin
SystemAdmin
6195 Posts

Pinned topic Headers and columns not aligning in dojoGrid

‏2012-12-12T19:25:10Z |
I have tried to reproduce a dojoGrid based on the sample dojo programs that come with EGL. It seems that the headers are not aligned with the rest of the grid (the lines separating the headers are not aligned with the ones separating the columns). The sample dojoGrid provided by EGL has the same problem.

See attached file.

Does anyone know how to fix that?

Thanks,

Virginie
Updated on 2013-01-03T19:12:46Z at 2013-01-03T19:12:46Z by SystemAdmin
  • Hsieh
    Hsieh
    740 Posts

    Re: Headers and columns not aligning in dojoGrid

    ‏2012-12-13T14:04:28Z  
    Hi Virginie,

    To align column header, set the property

    headerAlignment: an integer value that affects the horizontal alignment in the displayed header. 
    The values are as follows: 
    DataGridLib.ALIGN_LEFT (the default) 
    The column content is left aligned 
    DataGridLib.ALIGN_RIGHT 
    The column content is right aligned. 
    DataGridLib.ALIGN_CENTER 
    The column content is center aligned.
    
    Updated on 2014-03-25T04:37:24Z at 2014-03-25T04:37:24Z by iron-man
  • Hsieh
    Hsieh
    740 Posts

    Re: Headers and columns not aligning in dojoGrid

    ‏2012-12-13T14:06:36Z  
    • Hsieh
    • ‏2012-12-13T14:04:28Z
    Hi Virginie,

    To align column header, set the property

    <pre class="java dw" data-editor-lang="java" data-pbcklang="java" dir="ltr">headerAlignment: an integer value that affects the horizontal alignment in the displayed header. The values are as follows: DataGridLib.ALIGN_LEFT (the default) The column content is left aligned DataGridLib.ALIGN_RIGHT The column content is right aligned. DataGridLib.ALIGN_CENTER The column content is center aligned. </pre>
    continuing, see example below:

    new DataGridColumn{name = "COL1", displayName = "COLUMN HEADER", width=70, headerAlignment = dataGridLib.ALIGN_CENTER}

    Regards,

    Hsieh
  • SystemAdmin
    SystemAdmin
    6195 Posts

    Re: Headers and columns not aligning in dojoGrid

    ‏2012-12-13T15:12:59Z  
    • Hsieh
    • ‏2012-12-13T14:06:36Z
    continuing, see example below:

    new DataGridColumn{name = "COL1", displayName = "COLUMN HEADER", width=70, headerAlignment = dataGridLib.ALIGN_CENTER}

    Regards,

    Hsieh
    Hsieh,

    Thank you for looking into this. Unfortunately, I am using a DojoGrid (and so is the sample). Your answer works for dataGrid. The headerAlignment property is not available on a DojoGrid. Any other suggestions?

    Thanks,

    Virginie
  • Hsieh
    Hsieh
    740 Posts

    Re: Headers and columns not aligning in dojoGrid

    ‏2012-12-13T18:30:26Z  
    Hsieh,

    Thank you for looking into this. Unfortunately, I am using a DojoGrid (and so is the sample). Your answer works for dataGrid. The headerAlignment property is not available on a DojoGrid. Any other suggestions?

    Thanks,

    Virginie
    So sorry.

    to dojoGrid you must use headerBehavior function

    
    Grid DojoGrid
    { behaviors = [ ], headerBehaviors = [centerColumns], columns = [ 
    
    new DojoGridColumn
    {name = 
    "field1", displayName = 
    "Column 1 Header", width=120
    }, 
    
    new DojoGridColumn
    {name = 
    "field2", displayName = 
    "Column 2 Header", width=120
    } ], data = [ 
    
    new Dictionary 
    { field1 = 
    "Row 1, Column 1", field2 = 
    "Row 1, Column 2"
    }, 
    
    new Dictionary 
    { field1 = 
    "Row 2, Column 1", field2 = 
    "Row 2, Column 2"
    }, 
    
    new Dictionary 
    { field1 = 
    "Row 1, Column 1", field2 = 
    "Row 1, Column 2"
    }, 
    
    new Dictionary 
    { field1 = 
    "Row 2, Column 1", field2 = 
    "Row 2, Column 2"
    } ]
    

    
    
    
    private function centerColumns(grid DojoGrid in, cell Widget in, row any in, rowNumber 
    
    int in, column DojoGridColumn in) 
    
    if (column.name == 
    "field1") cell.style = 
    "text-align: center"; end end
    


    and if you want all headerAlignment then comment if/end
  • SystemAdmin
    SystemAdmin
    6195 Posts

    Re: Headers and columns not aligning in dojoGrid

    ‏2012-12-13T18:41:25Z  
    • Hsieh
    • ‏2012-12-13T18:30:26Z
    So sorry.

    to dojoGrid you must use headerBehavior function

    <pre class="jive-pre"> Grid DojoGrid { behaviors = [ ], headerBehaviors = [centerColumns], columns = [ new DojoGridColumn {name = "field1", displayName = "Column 1 Header", width=120 }, new DojoGridColumn {name = "field2", displayName = "Column 2 Header", width=120 } ], data = [ new Dictionary { field1 = "Row 1, Column 1", field2 = "Row 1, Column 2" }, new Dictionary { field1 = "Row 2, Column 1", field2 = "Row 2, Column 2" }, new Dictionary { field1 = "Row 1, Column 1", field2 = "Row 1, Column 2" }, new Dictionary { field1 = "Row 2, Column 1", field2 = "Row 2, Column 2" } ] </pre>
    <pre class="jive-pre"> private function centerColumns(grid DojoGrid in, cell Widget in, row any in, rowNumber int in, column DojoGridColumn in) if (column.name == "field1") cell.style = "text-align: center"; end end </pre>

    and if you want all headerAlignment then comment if/end
    Unfortunately, this doesn't work either, since it is not the content of the columns that are not aligned but the columns themselves.
  • Hsieh
    Hsieh
    740 Posts

    Re: Headers and columns not aligning in dojoGrid

    ‏2012-12-13T19:48:09Z  
    Unfortunately, this doesn't work either, since it is not the content of the columns that are not aligned but the columns themselves.
    I have tested my dojoGrid and it works fine.

    What's your RBD version installed ?

    I have installed RBD 8.5.1 and project:

    com.ibm.egl.rui.dojo.widgets_2.1.2
    com.ibm.egl.rui.dojo.runtime.local_1.7.2
    com.ibm.egl.rui_4.1.1

    Please attach your RUI source and i will test.

    Hsieh
  • SystemAdmin
    SystemAdmin
    6195 Posts

    Re: Headers and columns not aligning in dojoGrid

    ‏2012-12-14T17:50:04Z  
    • Hsieh
    • ‏2012-12-13T19:48:09Z
    I have tested my dojoGrid and it works fine.

    What's your RBD version installed ?

    I have installed RBD 8.5.1 and project:

    com.ibm.egl.rui.dojo.widgets_2.1.2
    com.ibm.egl.rui.dojo.runtime.local_1.7.2
    com.ibm.egl.rui_4.1.1

    Please attach your RUI source and i will test.

    Hsieh
    Hsieh,

    I noticed that I had a different version than you did so I upgraded to see if it would fix my issue but it did not. See attached image and below code.
    
    Record Stock Symbol String; SelectQuote 
    
    boolean; Quote 
    
    int; NumShares 
    
    int; end   Handler DojoGridSample Type RUIHandler 
    { initialUI = [ui] 
    } grid DojoGrid 
    { marginLeft=20, behaviors = [ addEditors, centerColumns ], headerBehaviors = [ resize, centerColumns ], columns = [ 
    
    new DojoGridColumn 
    { name = 
    "SelectQuote", displayName = 
    "X", width = 40
    }, 
    
    new DojoGridColumn 
    { name = 
    "Symbol" 
    }, 
    
    new DojoGridColumn 
    { name = 
    "Quote", displayName = 
    "Price" 
    }, 
    
    new DojoGridColumn 
    { name = 
    "NumShares", displayName = 
    "Shares" 
    } ], data = [ 
    
    new Stock
    {Symbol = 
    "Company1", Quote = 100, NumShares = 4, SelectQuote = 
    
    false
    }, 
    
    new Stock
    {Symbol = 
    "Company2", Quote = 200, NumShares = 100, SelectQuote = 
    
    false
    }, 
    
    new Stock
    {Symbol = 
    "Company3", Quote = 200, NumShares = 15, SelectQuote = 
    
    false
    }, 
    
    new Stock
    {Symbol = 
    "Company4", Quote = 120, NumShares = 10, SelectQuote = 
    
    true
    }, 
    
    new Stock
    {Symbol = 
    "Company5", Quote = 200, NumShares = 20, SelectQuote = 
    
    false
    } ] 
    }; ui Div 
    { margin = 20, children = [ 
    
    new HTML 
    { marginBottom = 15, text = 
    "Dojo Grid Sample", fontSize = 
    "20px" 
    }, grid, 
    
    new HTML 
    { marginTop = 15, text = 
    "Key features of EGL's version of the Dojo Grid:<ul>" + 
    "<li>You can add any records to this grid and the columns are created automatically.<p>" + 
    "  <li>Behaviors can be added to enhance the grid headers. Examples shown here are:<ul> " + 
    "       <li>Changing the width of the SelectQuote column to 23 pixels." + 
    "    <li>Changing the text alignment for the NumShares column to \"center\"." + 
    "  </ul>" + 
    "  <li>In addition, behaviors can be added to enhance the cells themselves. Examples shown here are:<ul> " + 
    "        <li>Replacing the SelectQuote columns's true/false values with a Dojo checkbox. The changed value won't be saved." + 
    " <li>Replacing Quote values with a TextField to allow in-place editing. The changed value will be saved." + 
    "  </ul>" + 
    "</ul>Features already provided by the Dojo Grid:<ul>" + 
    "<li>Columns can be sorted by clicking their header." + 
    "<li>Different styling themes enabled by CSS." + 
    "<li>Columns are resizable." 
    } ]
    };   function addEditors(grid DojoGrid in, cell Widget in, row any in, rowNumber 
    
    int in, column DojoGridColumn in) 
    
    if (column.name == 
    "Quote") textField TextField
    { text =  grid.data[rowNumber].Quote, margin=3, width = 85, maxLength = 10, onChange ::= TextField_onChange 
    }; textField.setAttribute(
    "DojoGridRow", rowNumber); textField.setAttribute(
    "DojoGridColumnName", column.name); cell.children = [ textField ]; end 
    
    if (column.name == 
    "SelectQuote") cell.padding = 0; cell.width = 40; cell.children = [ 
    
    new DojoCheckBox 
    { selected = (grid.data[rowNumber].SelectQuote as string == 
    "true")  , margin=3, width=17 
    } ]; end end function centerColumns(grid DojoGrid in, cell Widget in, row any in, rowNumber 
    
    int in, column DojoGridColumn in) cell.style = 
    "text-align: center"; end   function resize(grid DojoGrid in, cell Widget in, row any in, rowNumber 
    
    int in, column DojoGridColumn in) 
    
    if (column.name == 
    "SelectQuote") cell.width = 40; end end function TextField_onChange(e Event in) text TextField = e.widget; rowNumber 
    
    int = text.getAttribute(
    "DojoGridRow"); columnName string = text.getAttribute(
    "DojoGridColumnName"); value string = text.text; 
    
    if(value == 
    
    null || value == 
    "") value = 0; end grid.data[rowNumber].Quote = value; grid.data = grid.data; end end
    
  • Hsieh
    Hsieh
    740 Posts

    Re: Headers and columns not aligning in dojoGrid

    ‏2012-12-14T18:48:57Z  
    Hsieh,

    I noticed that I had a different version than you did so I upgraded to see if it would fix my issue but it did not. See attached image and below code.
    <pre class="jive-pre"> Record Stock Symbol String; SelectQuote boolean; Quote int; NumShares int; end Handler DojoGridSample Type RUIHandler { initialUI = [ui] } grid DojoGrid { marginLeft=20, behaviors = [ addEditors, centerColumns ], headerBehaviors = [ resize, centerColumns ], columns = [ new DojoGridColumn { name = "SelectQuote", displayName = "X", width = 40 }, new DojoGridColumn { name = "Symbol" }, new DojoGridColumn { name = "Quote", displayName = "Price" }, new DojoGridColumn { name = "NumShares", displayName = "Shares" } ], data = [ new Stock {Symbol = "Company1", Quote = 100, NumShares = 4, SelectQuote = false }, new Stock {Symbol = "Company2", Quote = 200, NumShares = 100, SelectQuote = false }, new Stock {Symbol = "Company3", Quote = 200, NumShares = 15, SelectQuote = false }, new Stock {Symbol = "Company4", Quote = 120, NumShares = 10, SelectQuote = true }, new Stock {Symbol = "Company5", Quote = 200, NumShares = 20, SelectQuote = false } ] }; ui Div { margin = 20, children = [ new HTML { marginBottom = 15, text = "Dojo Grid Sample", fontSize = "20px" }, grid, new HTML { marginTop = 15, text = "Key features of EGL's version of the Dojo Grid:<ul>" + "<li>You can add any records to this grid and the columns are created automatically.<p>" + " <li>Behaviors can be added to enhance the grid headers. Examples shown here are:<ul> " + " <li>Changing the width of the SelectQuote column to 23 pixels." + " <li>Changing the text alignment for the NumShares column to \"center\"." + " </ul>" + " <li>In addition, behaviors can be added to enhance the cells themselves. Examples shown here are:<ul> " + " <li>Replacing the SelectQuote columns's true/false values with a Dojo checkbox. The changed value won't be saved." + " <li>Replacing Quote values with a TextField to allow in-place editing. The changed value will be saved." + " </ul>" + "</ul>Features already provided by the Dojo Grid:<ul>" + "<li>Columns can be sorted by clicking their header." + "<li>Different styling themes enabled by CSS." + "<li>Columns are resizable." } ] }; function addEditors(grid DojoGrid in, cell Widget in, row any in, rowNumber int in, column DojoGridColumn in) if (column.name == "Quote") textField TextField { text = grid.data[rowNumber].Quote, margin=3, width = 85, maxLength = 10, onChange ::= TextField_onChange }; textField.setAttribute( "DojoGridRow", rowNumber); textField.setAttribute( "DojoGridColumnName", column.name); cell.children = [ textField ]; end if (column.name == "SelectQuote") cell.padding = 0; cell.width = 40; cell.children = [ new DojoCheckBox { selected = (grid.data[rowNumber].SelectQuote as string == "true") , margin=3, width=17 } ]; end end function centerColumns(grid DojoGrid in, cell Widget in, row any in, rowNumber int in, column DojoGridColumn in) cell.style = "text-align: center"; end function resize(grid DojoGrid in, cell Widget in, row any in, rowNumber int in, column DojoGridColumn in) if (column.name == "SelectQuote") cell.width = 40; end end function TextField_onChange(e Event in) text TextField = e.widget; rowNumber int = text.getAttribute( "DojoGridRow"); columnName string = text.getAttribute( "DojoGridColumnName"); value string = text.text; if(value == null || value == "") value = 0; end grid.data[rowNumber].Quote = value; grid.data = grid.data; end end </pre>
    Hi Virginie,

    I did get to reproduce the problem.

    and after comment the statement row

    if (column.name == "SelectQuote")
    // cell.padding = 0;
                cell.width = 40;
                cell.children = [new DojoCheckBox { margin=3, width=17 }];
            end
    


    the problem was fixed. see attached result.

    I believe this fix your problem.

    Regards,

    Hsieh
    Updated on 2014-03-25T04:37:16Z at 2014-03-25T04:37:16Z by iron-man
  • SystemAdmin
    SystemAdmin
    6195 Posts

    Re: Headers and columns not aligning in dojoGrid

    ‏2013-01-03T19:12:46Z  
    • Hsieh
    • ‏2012-12-14T18:48:57Z
    Hi Virginie,

    I did get to reproduce the problem.

    and after comment the statement row

    <pre class="java dw" data-editor-lang="java" data-pbcklang="java" dir="ltr">if (column.name == "SelectQuote") // cell.padding = 0; cell.width = 40; cell.children = [new DojoCheckBox { margin=3, width=17 }]; end </pre>

    the problem was fixed. see attached result.

    I believe this fix your problem.

    Regards,

    Hsieh
    That did it! Thank you!!