GridPanel layout

  1. #1

    [CLOSED] GridPanel layout

    I have a few questions, but I'll attach an image to help visualize what I'm asking.

    Click image for larger version. 

Name:	grid1.gif 
Views:	152 
Size:	17.9 KB 
ID:	2242

    1. Can you wrap the text in the column headings if it is too long?
    2. I've got 5 locked columns on the grid and I noticed the rows of the columns that aren't locked are thrown out of alignment.
      Is there a way to make them align up correctly?

    Last edited by HexElffilter; Jan 31, 2011 at 9:02 AM.
  2. #2

    1. Unfortunately, such functionality is not implemented
    2. Please set SyncHeights="true" for LockingGridView
  3. #3
    I've tried adding the SyncHeights as you suggested, but the rows still don't seem to line up.

    Click image for larger version. 

Name:	grid2.gif 
Views:	87 
Size:	19.9 KB 
ID:	2247

    The next column after the locked columns contains a combobox, could this be causing the problem?

    Here is the code:
        <ext:GridPanel ID="GridPanel1" runat="server" Height="400" Title="Candidate Details">
                <ext:Store DataSourceID="odsCandidates" runat="server" ID="ctl51">
                        <ext:JsonReader IDProperty="ID_NUMBER">
                                <ext:RecordField Name="CANDIDATE_NO" />
                                <ext:RecordField Name="UCI_NO" />
                                <ext:RecordField Name="LEARNER" />
                                <ext:RecordField Name="DATE_OF_BIRTH" Type="Date" />
                <ext:EditableGrid runat="server" />
            <ColumnModel runat="server" ID="ctl52">
                    <ext:Column ColumnID="colCG" Header="C & G No" DataIndex="CANDIDATE_NO" Locked="true" Wrap="true" />
                    <ext:Column ColumnID="colUCI" Header="UCI No" DataIndex="UCI_NO" Locked="true" />
                    <ext:Column ColumnID="colLearner" Header="Candidate Name" DataIndex="LEARNER" Locked="true" Width="200px" />
                    <ext:DateColumn DataIndex="DATE_OF_BIRTH" ColumnID="colDOB" Header="Date Of Birth" Locked="true" Format="dd-MM-yyyy" Align="Center" Width="85px" />
                    <ext:Column DataIndex="Exclude" ColumnID="colExc" Header="Exclude" Locked="true" Align="Center" Width="70px">
                            <ext:Checkbox ItemID="chkExclude" runat="server" />
                    <ext:Column DataIndex="Time" ColumnID="colTime" Header="Extra Time">
                            <ext:ComboBox ID="ddlTime" runat="server">
                                    <ext:ListItem Text="0%" Value="0" />
                                    <ext:ListItem Text="5%" Value="5" />
                                    <ext:ListItem Text="10%" Value="10" />
                                    <ext:ListItem Text="15%" Value="15" />
                                    <ext:ListItem Text="20%" Value="20" />
                                    <ext:ListItem Text="25%" Value="25" />
                                    <ext:ListItem Text="50%" Value="50" />
                                    <ext:ListItem Text="100%" Value="100" />
                    <ext:Column DataIndex="Reader" ColumnID="colRead" Header="Reader" Align="Center" Width="70px">
                            <ext:Checkbox ID="chkReader" runat="server" />
                    <ext:Column DataIndex="Scribe" ColumnID="colScribe" Header="Scribe" Align="Center" Width="70px">
                            <ext:Checkbox ID="chkScribe" runat="server" />
                    <ext:Column DataIndex="Restbreaks" ColumnID="colRest" Header="Rest Breaks" Align="Center" Width="70px">
                            <ext:Checkbox ID="chkRest" runat="server" />
                    <ext:Column DataIndex="ReadAloud" ColumnID="colRead" Header="Read Aloud" Align="Center" Width="70px">
                            <ext:Checkbox ID="chkRead" runat="server" />
                    <ext:Column DataIndex="Prompter" ColumnID="colPrompter" Header="Prompter" Align="Center" Width="70px">
                            <ext:Checkbox ID="chkPrompter" runat="server" />
                    <ext:Column DataIndex="Overlay" ColumnID="colOverlay" Header="Overlay" Align="Center" Width="70px">
                            <ext:Checkbox ID="chkOverlay" runat="server" />
                    <ext:Column DataIndex="Colour" ColumnID="colColour" Header="Overlay Colour">
                            <ext:TextField ID="txtColour" runat="server" />
                <ext:RowSelectionModel SingleSelect="true" runat="server" ID="ctl50" />
                <ext:PagingToolbar runat="server" PageSize="10" />
                <ext:LockingGridView runat="server" ID="ctl49" SyncHeights="True">
                        <Header Visible="False" runat="server" ID="ctl48" />
                <ext:Button ID="btnSubmit" runat="server" Text="Submit">
                        <Click OnEvent="SubmitSelection">
                                <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
  4. #4
    After changing various properties on the grid and also columns I still couldn't find a solution.

    I then removed all the columns that had controls with boxes i.e. textbox, combobox, date columns.
    After I had done this, the rows all lined up perfectly fine.

    To solve this I had to set the row height in the css, I found the following thread useful:

Similar Threads

  1. Replies: 15
    Last Post: Sep 19, 2017, 6:15 PM
  2. Vertical layout in GridPanel
    By AlexMaslakov in forum 1.x Help
    Replies: 14
    Last Post: Aug 15, 2011, 7:21 AM
  3. GridPanel Layout
    By AmitM in forum 1.x Help
    Replies: 0
    Last Post: Jun 06, 2011, 10:06 PM
  4. [CLOSED] GridPanel in Form Layout
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 09, 2010, 1:44 AM
  5. Gridpanel layout issue in IE8
    By in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 24, 2009, 1:12 PM

Tags for this Thread

Posting Permissions