Issues With Grid Appearence

[Benjamin]

I have reoccurring issues with the appearence of RadGrids in all my screens.
One common issue that occurs especially when there are a lot of columns and space is at a premium. You can view the screenshots of it here: http://www.flickr.com/photos/32500879@N07/3037010645/

Initially when the grid is rendered along with the rest of the screen during the startup, there wouldn't be any issues. Everything is where they are supposed to be. But once the grid is placed into its edit mode, the column headers are mutiated: the text alignments are lost, and appear confused between choosing wrapping the text or not, creating mirrored text and doubling the height of the header to compensate the garbled text within. Returning the grid back to its display mode doesn't fix the headers. The only known fix is to move the mouse cursor over the affected columns and they would return to their actual state.

The following is the ASP code used for the grid:

<radG:RadGrid id="Grid" runat="server" AutoGenerateColumns="False" EnableAJAX="True" EnableAJAXLoadingTemplate="True"
    Skin="Outlook2007" Width="100%" LoadingTemplateTransparency="25">
    <ClientSettings>
        <Resizing AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"/>
        <Scrolling AllowScroll="True"/>
    </ClientSettings>
    <MasterTableView EditMode="InPlace" CommandItemDisplay="Bottom" DataKeyNames="SEQ,PON">
        <Columns>
            <radG:GridBoundColumn UniqueName="SEQ" DataField="SEQ" DataType="System.Int32" ReadOnly="True" HeaderText="No." HeaderStyle-Width="10px"/>
            <radG:GridTemplateColumn UniqueName="BRN" DataField="BRN" DataType="System.String" HeaderText="Branch" HeaderStyle-Width="6%">
                <ItemTemplate>
                    <table><asp:Label ID="lblBRN" runat="server" Text='<%#Bind("BRN")%>' Width="100%" Height="100%"/></table>
                </ItemTemplate>
                <EditItemTemplate>
                    <radCB:RadComboBox ID="BRN" runat="server" EnableLoadOnDemand="True" ExternalCallBackPage="..\..\RadGrdDDLStreamer.aspx" ItemRequestTimeout="500"
                        Text='<%#Bind("BRN")%>' MaxLength="5"
                         Skin="WindowsGray" Width="100%" DropDownWidth="300px">
                        <HeaderTemplate>
                            <table style="table-layout:fixed;">
                                <tr>
                                    <td style="width:20%; font: Tahoma; font-weight: bold; font-size: 9pt; text-align:center;">Code</td>
                                    <td style="width:80%; font: Tahoma; font-weight: bold; font-size: 9pt;">Branch Name</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                    </radCB:RadComboBox>
                </EditItemTemplate>
            </radG:GridTemplateColumn>
            <radG:GridBoundColumn UniqueName="PON" DataField="PON" ReadOnly="True" MaxLength="10" HeaderText="PO No." HeaderStyle-Width="4%"/>
            <radG:GridTemplateColumn UniqueName="POG" DataField="POG" DataType="System.String" HeaderText="PO Group" ItemStyle-HorizontalAlign="Left">
                <ItemTemplate>
                    <table><asp:Label ID="lblPOG" runat="server" Text='<%#Bind("POG")%>' Width="100%" Height="100%"/></table>
                </ItemTemplate>
                <EditItemTemplate>
                    <radCB:RadComboBox ID="POG" runat="server" EnableLoadOnDemand="True" ExternalCallBackPage="..\..\RadGrdDDLStreamer.aspx" ItemRequestTimeout="500"
                        Text='<%#Bind("POG")%>' MaxLength="10"
                        Skin="WindowsGray" Width="100%" DropDownWidth="150px">
                        <HeaderTemplate>
                            <table style="table-layout:fixed;">
                                <tr>
                                    <td style="width:100%; font: Tahoma; font-weight: bold; font-size: 9pt;">P.O Group</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                    </radCB:RadComboBox>
                </EditItemTemplate>
            </radG:GridTemplateColumn>
            <radG:GridBoundColumn UniqueName="IDS" DataField="IDS" MaxLength="100" HeaderText="Description" HeaderStyle-Width="25%" ItemStyle-HorizontalAlign="Left"/>
            <radG:GridBoundColumn UniqueName="QTY" DataField="QTY" DataType="System.Int32" MaxLength="7" HeaderText="Qty" HeaderStyle-Width="4%" ItemStyle-HorizontalAlign="Right"/>
            <radG:GridBoundColumn UniqueName="UPC" DataField="UPC" DataType="System.Decimal" DataFormatString="{0:#,##0.00}" MaxLength="20" HeaderText="Unit Price" HeaderStyle-Width="5%" ItemStyle-HorizontalAlign="Right"/>
            <radG:GridTemplateColumn UniqueName="CUR" DataField="CUR" DataType="System.String" HeaderText="Currency" HeaderStyle-Width="4%">
                <ItemTemplate>
                    <table><asp:Label ID="CUR" runat="server" Text='<%#Bind("CUR")%>' Width="100%" Height="100%"/></table>
                </ItemTemplate>
                <EditItemTemplate>
                    <radCB:RadComboBox ID="ddlSSFXRT" runat="server" EnableLoadOnDemand="True" ExternalCallBackPage="..\..\RadGrdDDLStreamer.aspx" ItemRequestTimeout="500"
                        Text='<%#Bind("CUR")%>' MaxLength="4"
                        Skin="WindowsGray" Width="100%" DropDownWidth="300px">
                        <HeaderTemplate>
                            <table style="table-layout:fixed;">
                                <tr>
                                    <td style="width:15%; font: Tahoma; font-weight: bold; font-size: 9pt; text-align:center;">Code</td>
                                    <td style="width:85%; font: Tahoma; font-weight: bold; font-size: 9pt;">Currency</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                    </radCB:RadComboBox>
                </EditItemTemplate>
            </radG:GridTemplateColumn>
            <radG:GridBoundColumn UniqueName="AMT" DataField="AMT" DataType="System.Decimal" DataFormatString="{0:#,##0.00}" ReadOnly="true" HeaderText="Amount" HeaderStyle-Width="5%" ItemStyle-HorizontalAlign="Right"/>
            <radG:GridTemplateColumn UniqueName="CBR" DataField="CBR" DataType="System.String" HeaderText="Charge To" HeaderStyle-Width="6%">
                <ItemTemplate>
                    <table><asp:Label ID="lblCBR" runat="server" Text='<%#Bind("CBR")%>' Width="100%" Height="100%"/></table>
                </ItemTemplate>
                <EditItemTemplate>
                    <radCB:RadComboBox ID="ddlSSDATA2" runat="server" EnableLoadOnDemand="True" ExternalCallBackPage="..\..\RadGrdDDLStreamer.aspx" ItemRequestTimeout="500"
                        Text='<%#Bind("CBR")%>' MaxLength="5"
                         Skin="WindowsGray" Width="100%" DropDownWidth="300px">
                        <HeaderTemplate>
                            <table style="table-layout:fixed;">
                                <tr>
                                    <td style="width:20%; font: Tahoma; font-weight: bold; font-size: 9pt; text-align:center;">Branch </td>
                                    <td style="width:80%; font: Tahoma; font-weight: bold; font-size: 9pt;">Name</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                    </radCB:RadComboBox>
                </EditItemTemplate>
            </radG:GridTemplateColumn>
            <radG:GridTemplateColumn UniqueName="EPT" DataField="EPT" DataType="System.String" HeaderText="Dept" HeaderStyle-Width="6%">
                <ItemTemplate>
                    <table><asp:Label ID="lblEPT" runat="server" Text='<%#Bind("EPT")%>' Width="100%" Height="100%"/></table>
                </ItemTemplate>
                <EditItemTemplate>
                    <radCB:RadComboBox ID="ddlGLPAR12" runat="server" EnableLoadOnDemand="True" ExternalCallBackPage="..\..\RadGrdDDLStreamer.aspx" ItemRequestTimeout="500"
                        Text='<%#Bind("EPT")%>' MaxLength="5"
                        Skin="WindowsGray" Width="100%" DropDownWidth="300px">
                        <HeaderTemplate>
                            <table style="table-layout:fixed;">
                                <tr>
                                    <td style="width:20%; font: Tahoma; font-weight: bold; font-size: 9pt; text-align:center;">Code</td>
                                    <td style="width:80%; font: Tahoma; font-weight: bold; font-size: 9pt;">Department</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                    </radCB:RadComboBox>
                </EditItemTemplate>
            </radG:GridTemplateColumn>
            <radG:GridTemplateColumn UniqueName="IVTEAM" DataField="IVTEAM" DataType="System.String" HeaderText="Team" HeaderStyle-Width="6%">
                <ItemTemplate>
                    <table><asp:Label ID="lblIVTEAM" runat="server" Text='<%#Bind("IVTEAM")%>' Width="100%" Height="100%"/></table>
                </ItemTemplate>
                <EditItemTemplate>
                    <radCB:RadComboBox ID="ddlGLPAR13" runat="server" EnableLoadOnDemand="True" ExternalCallBackPage="..\..\RadGrdDDLStreamer.aspx" ItemRequestTimeout="500"
                        Text='<%#Bind("IVTEAM")%>' MaxLength="5"
                        Skin="WindowsGray" Width="100%" DropDownWidth="300px">
                        <HeaderTemplate>
                            <table style="table-layout:fixed;">
                                <tr>
                                    <td style="width:20%; font: Tahoma; font-weight: bold; font-size: 9pt; text-align:center;">Code</td>
                                    <td style="width:80%; font: Tahoma; font-weight: bold; font-size: 9pt;">Team</td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                    </radCB:RadComboBox>
                </EditItemTemplate>
            </radG:GridTemplateColumn>
            <radG:GridDropDownColumn UniqueName="FXT" DataField="FXT" ListValueField="Code" ListTextField="Description" HeaderText="Fixed Asset" HeaderStyle-Width="37px"/>
            <radG:GridDropDownColumn UniqueName="TAX" DataField="TAX" ListValueField="Code" ListTextField="Description" HeaderText="Tax" HeaderStyle-Width="37px"/>

            <radG:GridEditCommandColumn UniqueName="cmdEdit" UpdateText="OK" InsertText="OK" HeaderStyle-Width="25px"/>
            <radG:GridButtonColumn UniqueName="cmdDelete" Text="Delete" CommandName="Delete" ConfirmText="Do you wish to delete entry?" HeaderStyle-Width="36px"/>
        </Columns>
        <CommandItemTemplate>
            <asp:Button ID="btnPrev" runat="server" CommandName="PrevPage" CssClass="linkBtn" Text="Prev"/>
            <asp:Button ID="btnNext" runat="server" CommandName="NextPage" CssClass="linkBtn" Text="Next"/>
        </CommandItemTemplate>
    </MasterTableView>
</radG:RadGrid>

Another that occurs is when I execute a grid command that doesn't call the grid to rebind or the page to reload. The screenshots of this issue is here : http://www.flickr.com/photos/32500879@N07/3037010649/

The previous fix, of moving the mouse cursor over the headers, would still work only for the header but the remaining of the grid still remains mutilated and not configured according to the "Outlook2007" skin's CSS file. The following is the ASP code used for the Grid:

<radG:RadGrid id="Grid" runat="server" AutoGenerateColumns="False" EnableAJAX="True" EnableAJAXLoadingTemplate="True"
     Skin="Outlook2007" Width="100%" LoadingTemplateTransparency="25">
     <ClientSettings>
          <Resizing AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"/>
          <Scrolling AllowScroll="True"/>
     </ClientSettings>
     <MasterTableView CommandItemDisplay="Bottom">
          <Columns>
                <radG:GridButtonColumn UniqueName="Add" Text="Add" CommandName="Add" HeaderStyle-Width="3%"/>
                <radG:GridBoundColumn UniqueName="BRN" DataField="BRN" ReadOnly="True" HeaderText="Branch" HeaderStyle-Width="5%"/>
                <radG:GridBoundColumn UniqueName="COST" DataField="COST" ReadOnly="True" HeaderText="Cost Ctr." HeaderStyle-Width="5%"/>
                <radG:GridBoundColumn UniqueName="NUMB" DataField="NUMB" ReadOnly="True" HeaderText="Invoice No." HeaderStyle-Width="5%"/>
                <radG:GridTemplateColumn UniqueName="DAT8" DataField="DAT8" HeaderText="Invoice Date" HeaderStyle-Width="5%">
                     <ItemTemplate>
                          <table><asp:Label ID="DAT8" runat="server" Width="50px" Text='<%# Left(Eval("DAT8"),2) & "/" & Mid(Eval("DAT8"),3,2) & "/" & Mid(Eval("DAT8"),5) %>'/></table>
                     </ItemTemplate>
                </radG:GridTemplateColumn>
                <radG:GridBoundColumn UniqueName="CURR" DataField="CURR" ReadOnly="True" HeaderText="Currency" HeaderStyle-Width="5%"/>
                <radG:GridBoundColumn UniqueName="IAMT" DataField="IAMT" ReadOnly="True" HeaderText="Invoice Amt." ItemStyle-HorizontalAlign="Right" DataType="System.Decimal" DataFormatString="{0:#,##0.00}" HeaderStyle-Width="10%"/>
                <radG:GridBoundColumn UniqueName="OAMT" DataField="OAMT" ReadOnly="True" HeaderText="Outstanding Amt." ItemStyle-HorizontalAlign="Right" DataType="System.Decimal" DataFormatString="{0:#,##0.00}" HeaderStyle-Width="10%"/>
                <radG:GridBoundColumn UniqueName="CRCD" DataField="CRCD" ReadOnly="True" HeaderText="Creditor" HeaderStyle-Width="5%"/>
                <radG:GridBoundColumn UniqueName="CRNM" DataField="CRNM" ReadOnly="True" HeaderText="Creditor Name" HeaderStyle-Width="5%"/>
          </Columns>
          <CommandItemTemplate>
                <asp:Button ID="btnPrev" runat="server" CommandName="PrevPage" CssClass="linkBtn" Text="Prev"/>
                <asp:Button ID="btnNext" runat="server" CommandName="NextPage" CssClass="linkBtn" Text="Next"/>
          </CommandItemTemplate>
     </MasterTableView>
</radG:RadGrid>

The following is the VB code for the "Add" command:

Private Sub Grid_ItemCommand(ByVal source As Object, ByVal e As Telerik.WebControls.GridCommandEventArgs) Handles Grid.ItemCommand
    Select Case e.CommandName
         Case "Add"
              If Not CommunicateWithTheHost Then    'Returns False if an error occurs with the host.
                    Grid.ResponseScripts.Add(strErrMessages)    'Displays an error message box to inidicate the "Add" function has failed.
                    e.Canceled = True
              Else
                    Grid.ResponseScripts.Add( "alert('Added');")    'Displays a message box to indicate the "Add" function has been executed successfully.
              End If
    End Select
End Sub

I've tried callng Grid.Rebind() after the command's execution but to no avail. The only fix I know is to call the function that is used to retrieve the grid's data and re-render the entire screen.

[Demon]

Hi,

regarding your first question - the edit textboxes cause the columns to change size. You can use larger column widths initially (together with RadGrid scrolling), or decrease the width of the edit textboxes, as it is done here:

RadGrid demo

[Benjamin]

I have to manually resize the controls everytime its executed?
Shouldn't the grid be able to handle this automatically?

[Benjamin]

I've tried that idea of reducing the width of the edit controls, it had hardly any effect on the appearence issue and I'm reluctant to use horizontal scrolling as I'm already squeezing the large page onto 1280x1024 but my clients (being the old bankers they are) tend to view the page around the 1024x768 resolution range. Their browsers will be forced to use horizontal scrolling, forcing them to use a second horizontal scroll for the grid is simply out of the question.

[Dimo]

Hello Benjamin,

Yes, you will have to change the size of the edit textboxes at runtime, or alternatively, you can use CSS to set width styles.

The edit textboxes do not have a default width style, so the browser renders them with its own default width style. We have not set a default width for the textboxes, because it will hardly suit all column widths and all scenarios.


Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Benjamin]

What about the second issue where the grid seems to ignore the CSS settings after executing a grid command? Any solutions to that? Thanks.