This is a migrated thread and some comments may be shown as answers.

Strange width behaviour

14 Answers 188 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jocelyn
Top achievements
Rank 1
Jocelyn asked on 16 Mar 2012, 04:22 PM
Hi,

My grid have a strange behaviour on the first load (Check the Image).

When I click on edit or I just sort a column, so that when the grid refresh after the AjaxRequest, the grid layout become correct.

So what is causing thie behaviour?

Thanks.

Sorry for my bad english.

14 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 21 Mar 2012, 01:43 PM
Hi Jocelyn,

Could you check out the best practices for setting the width of columns in RadGrid in the following forum post
http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx

Also, if the problem persists could you please send a small running project that we can use to reproduce the case. Alternatively a live URL or sample markup will help us as well. This will help us provide better support.


Greetings,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jocelyn
Top achievements
Rank 1
answered on 21 Mar 2012, 03:02 PM
Hi Galin,

I am unable to reproduce my issue in a sample project.

I respect all of this practices. I am not event setting the width of the grid. So I guess it inherit from the parent.

I also noticed that this is only happening in Chrome and Safari. When I try to inspect element, the problem automatically solve itself.

So I can't figure out how to solve this.

Thanks
0
Casey
Top achievements
Rank 1
answered on 21 Mar 2012, 03:43 PM
Hi Jocelyn,

Could you please post your RadGrid definition? It might prove useful in figuring out the cause.

Thanks!
Casey
0
Jocelyn
Top achievements
Rank 1
answered on 21 Mar 2012, 03:45 PM
Yes sorry. Here it is:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Allergies.aspx.vb" Inherits="GESPHARxLite_2.Allergies" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
 
<script src="Scripts/Resizer.js" type="text/javascript"></script>
 
<head runat="server">
    <title></title>
    <link href="css/GESPHARxLite.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        html, body, form
        {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
            </asp:ScriptReference>
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnResponseEnd="OnResponseEnd">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="gridAllergies">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gridAllergies" LoadingPanelID="RadAjaxLoadingPanel1"
                        UpdatePanelHeight="100%" />
                    <telerik:AjaxUpdatedControl ControlID="TextGenID" LoadingPanelID="RadAjaxLoadingPanel1"
                        UpdatePanelHeight="100%" />
                    <telerik:AjaxUpdatedControl ControlID="TextGrpID" LoadingPanelID="RadAjaxLoadingPanel1"
                        UpdatePanelHeight="100%" />
                    <telerik:AjaxUpdatedControl ControlID="TextDateID" LoadingPanelID="RadAjaxLoadingPanel1"
                        UpdatePanelHeight="100%" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div>
        <input type="hidden" runat="server" id="TextGenID" />
        <input type="hidden" runat="server" id="TextGrpID" />
        <input type="hidden" runat="server" id="TextDateID" />
    </div>
    <div id="gridDiv">
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadGrid ID="gridAllergies" runat="server" CellSpacing="0" GridLines="None">
            <ClientSettings>
                <Selecting CellSelectionMode="None"></Selecting>
            </ClientSettings>
            <MasterTableView CommandItemDisplay="Top">
                <CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Ajouter" RefreshText="Rafraîchir">
                </CommandItemSettings>
                <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                </RowIndicatorColumn>
                <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column"
                        ButtonType="ImageButton" EditText="Modifier" Resizable="False" HeaderStyle-Width="46px"
                        EditImageUrl="Images/Icons/006-Write-New-Icon.png">
                        <HeaderStyle Width="32px"></HeaderStyle>
                    </telerik:GridEditCommandColumn>
                    <telerik:GridButtonColumn CommandName="Delete" ConfirmText="Êtez-vous sûr de vouloir supprimer?"
                        FilterControlAltText="Filter column column" Text="Supprimer" UniqueName="colDelete"
                        ButtonType="ImageButton" ImageUrl="Images/Icons/059-Close-Delete-circle-Icon.png"
                        HeaderStyle-Width="46px" ConfirmDialogType="Classic">
                        <HeaderStyle Width="32px"></HeaderStyle>
                    </telerik:GridButtonColumn>
                    <telerik:GridBoundColumn DataField="palg_noauto" FilterControlAltText="Filter column1 column"
                        UniqueName="colNoAuto" Visible="False" ReadOnly="True">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="allergie" FilterControlAltText="Filter column2 column"
                        HeaderText="Allergie" UniqueName="colAllergie" CurrentFilterFunction="StartsWith"
                        FilterDelay="700" ShowFilterIcon="false" ReadOnly="True">
                    </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="isGroupe" DataType="System.Boolean" FilterControlAltText="Filter column column"
                        HeaderText="Groupe" ReadOnly="True" UniqueName="colIsGroupe" ShowFilterIcon="false"
                        AllowFiltering="False">
                        <ItemStyle HorizontalAlign="Center" />
                    </telerik:GridCheckBoxColumn>
                    <telerik:GridDateTimeColumn DataField="Date" FilterControlAltText="Filter column3 column"
                        HeaderText="Date" UniqueName="colDate" CurrentFilterFunction="StartsWith" FilterDelay="700"
                        ShowFilterIcon="false" DataType="System.String" EditFormHeaderTextFormat="">
                    </telerik:GridDateTimeColumn>
                    <telerik:GridDropDownColumn FilterControlAltText="Filter column8 column" UniqueName="colGenerique"
                        ListValueField="gene_numero" ListTextField="gene_nom" ShowFilterIcon="False"
                        Visible="False" HeaderText="Generique" DropDownControlType="RadComboBox" DataField="gene_numero">
                    </telerik:GridDropDownColumn>
                    <telerik:GridDropDownColumn FilterControlAltText="Filter column7 column" UniqueName="colGroupeDesc"
                        ListValueField="gral_numero" ListTextField="gral_description" ShowFilterIcon="False"
                        Visible="False" HeaderText="Groupe" DropDownControlType="RadComboBox" DataField="gral_numero">
                    </telerik:GridDropDownColumn>
                    <telerik:GridBoundColumn DataField="palg_texte_1" FilterControlAltText="Filter column4 column"
                        UniqueName="colTexte1" CurrentFilterFunction="StartsWith" FilterDelay="700" ShowFilterIcon="false"
                        HeaderText="Texte1">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="palg_texte_2" FilterControlAltText="Filter column5 column"
                        HeaderText="Texte2" UniqueName="colTexte2" CurrentFilterFunction="StartsWith"
                        FilterDelay="700" ShowFilterIcon="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="isImprime" FilterControlAltText="Filter colImprimer column"
                        HeaderText="Imprimer" UniqueName="colImprimer" Visible="False">
                    </telerik:GridCheckBoxColumn>
                </Columns>
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="allergie" SortOrder="Ascending" />
                </SortExpressions>
                <EditFormSettings>
                    <EditColumn ButtonType="PushButton" CancelText="Annuler" UpdateText="Enregistrer"
                        InsertText="Ajouter" FilterControlAltText="Filter EditCommandColumn column" >
                    </EditColumn>
                </EditFormSettings>
            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
            <EditItemStyle BackColor="Silver" />
        </telerik:RadGrid>
    </div>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
 
        <script type="text/javascript">
        <!--
 
            function Validate()
            {
//                var cboGen = $find($get('<%=TextGenID.ClientID%>').value);
//                var cboGrp = $find($get('<%=TextGrpID.ClientID%>').value);
//                var pkDate = $find($get('<%=TextDateID.ClientID%>').value);
//                var isValid = true;
 
//                cboGen.get_inputDomElement().style.backgroundColor = "";
//                cboGrp.get_inputDomElement().style.backgroundColor = "";
 
//                if (cboGen.get_text() == "" && cboGrp.get_text() == "") {
//                    cboGen.get_inputDomElement().style.backgroundColor = "#E77471";
//                    cboGrp.get_inputDomElement().style.backgroundColor = "#E77471";
//                    isValid = false;
//                }
 
//                if (pkDate.get_selectedDate() == null) {
//                    pkDate.get_textBox().style.backgroundColor = "#E77471";
//                    isValid = false;
//                }
                alert("allo");
                return true;
            }
 
            function GenSelectionChanged(sender, eventArgs)
            {
                var cbo = $find($get('<%=TextGrpID.ClientID%>').value);
                if (sender.get_text() != "" && cbo.get_text() != "") {
                    cbo.findItemByText("").select();
                }
            }
 
            function GrpSelectionChanged(sender, eventArgs)
            {
                var cbo = $find($get('<%=TextGenID.ClientID%>').value);
                if (sender.get_text() != "" && cbo.get_text() != "") {
                    cbo.findItemByText("").select();
                }
            }
 
            function Resize()
            {
                var grid = $find("<%= gridAllergies.ClientID %>");
                ResizeRadControl(grid, 0);
            }
 
            function OnResponseEnd(sender, args)
            {
                Resize();
            }
            -->
        </script>
 
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Just for information, this is in an iFrame.

Thanks.
0
Casey
Top achievements
Rank 1
answered on 21 Mar 2012, 03:58 PM
What is in the ResizeRadControl function? Is that function what is fixing the layout issue? 

It looks like the display issue is because of the header text wrapping for the last column. If you change the header text of the last column so be on one line, does the RadGrid display properly? 
0
Jocelyn
Top achievements
Rank 1
answered on 21 Mar 2012, 04:18 PM
Here is my ResizeRadControl:

function ResizeRadControl(grid, subNum)
{
    if (grid != null)
    {
        grid.get_element().style.height = $("#form1").height() - subNum - 1 + "px";
        grid.repaint();
    }
}

I am sorry, I didn't give you the same page as the jpg I posted. But it also have the issue, but if I change the header text to only display a simple line, it looks like in the jpg below.

I also noticed that the little bug layout on the right side is the exact width of the scroll bar, but there is no scroll bar as you can see on the second picture below.

Thanks.
0
Casey
Top achievements
Rank 1
answered on 21 Mar 2012, 05:11 PM
I'm not real sure what could be causing the issue, especially since there isn't a scroll bar, and you don't have scrolling enabled on the RadGrid. Have you tried calling the grid.repaint function on the page load to see if that clears up the issue when the RadGrid is first displayed?

function pageLoad() {
  var grid = $find("<%= gridAllergies.ClientID %> ");
  if(grid != null){
    grid.repaint();
  }
}

I hope this helps!
Casey
0
Jocelyn
Top achievements
Rank 1
answered on 21 Mar 2012, 06:56 PM
It doesn't work, but thanks though. Really appreciated.
0
Jocelyn
Top achievements
Rank 1
answered on 21 Mar 2012, 07:05 PM
Oh I just remember that I call a function to set default grid settings. Maybe this should come from this function.

Can you see something that could cause this issue in there?

Public Sub GridCGSI_UpdateDefaults(ByVal tmpGrid As RadGrid)
    AddHandler tmpGrid.HeaderContextMenu.ItemCreated, AddressOf GridCGSI_HeaderContextMenu_ItemCreated
 
 
    tmpGrid.CellSpacing = "0"
    tmpGrid.AutoGenerateColumns = False
    tmpGrid.AllowPaging = True
    tmpGrid.PageSize = 40
    tmpGrid.AllowSorting = True
 
    'tmpGrid.Style = "border:0;outline:none"
    tmpGrid.GridLines = GridLines.None
    tmpGrid.AllowFilteringByColumn = True
    'tmpGrid.Culture =
    tmpGrid.EnableHeaderContextMenu = True
    tmpGrid.ShowStatusBar = True
 
    tmpGrid.HeaderContextMenu.Enabled = True
 
 
    tmpGrid.GroupingSettings.CaseSensitive = False
    tmpGrid.ClientSettings.AllowColumnHide = True
    tmpGrid.ClientSettings.AllowColumnsReorder = True
    tmpGrid.ClientSettings.AllowKeyboardNavigation = True
    tmpGrid.ClientSettings.EnableRowHoverStyle = True
    tmpGrid.ClientSettings.Selecting.AllowRowSelect = True
    tmpGrid.ClientSettings.Scrolling.AllowScroll = True
    tmpGrid.ClientSettings.Scrolling.UseStaticHeaders = True
    tmpGrid.ClientSettings.Resizing.AllowColumnResize = True
    tmpGrid.ClientSettings.Resizing.AllowResizeToFit = True
    tmpGrid.ClientSettings.Resizing.EnableRealTimeResize = True
    '    ClientEvents OnRowClick=GridPatientsRowClick />
    '</ClientSettings>
 
    tmpGrid.FilterMenu.EnableImageSprites = False
 
    tmpGrid.SortingSettings.SortedAscToolTip = "Trié asc"
    tmpGrid.SortingSettings.SortedDescToolTip = " desc"
    tmpGrid.SortingSettings.SortToolTip = "Cliquez ici pour trier"
    tmpGrid.StatusBarSettings.LoadingText = "Chargement..."
    tmpGrid.StatusBarSettings.ReadyText = "Prêt"
 
    tmpGrid.GroupingSettings.CaseSensitive = False
 
    tmpGrid.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric
 
 
    tmpGrid.MasterTableView.TableLayout = GridTableLayout.Fixed
    'tmpGrid.MasterTableView.AllowCustomSorting = True
    'tmpGrid.MasterTableView.AllowMultiColumnSorting = True
    tmpGrid.MasterTableView.EnableHeaderContextAggregatesMenu = "True"
    tmpGrid.MasterTableView.NoMasterRecordsText = "Aucun enregistrement à afficher"
    tmpGrid.MasterTableView.EditFormSettings.EditColumn.ButtonType = GridButtonColumnType.PushButton
    tmpGrid.MasterTableView.EditFormSettings.EditColumn.UpdateImageUrl = "Images/Icons/055-Check-ok-Icon.png"
    tmpGrid.MasterTableView.EditFormSettings.EditColumn.CancelImageUrl = "Images/Icons/056-Check-not-ok-Icon.png"
    tmpGrid.MasterTableView.EditFormSettings.EditColumn.InsertImageUrl = "Images/Icons/055-Check-ok-Icon.png"
    tmpGrid.MasterTableView.EditFormSettings.EditColumn.CancelText = "Annuler"
    tmpGrid.MasterTableView.EditFormSettings.EditColumn.UpdateText = "Enregistrer"
    tmpGrid.MasterTableView.EditFormSettings.EditColumn.InsertText = "Ajouter"
End Sub

Thanks.
0
Casey
Top achievements
Rank 1
answered on 21 Mar 2012, 08:27 PM
I seem to recall having issues whenever trying to use Scrolling with Static Headers. In the following demo, if you toggle the option for static headers you will see the impact it has on the rendering of the header in the RadGrid. With Static Headers on, the space above the scroll bar doesn't match the rest of the header.

Since your header text wraps to another line, it really makes the issue noticeable.

Static Headers and Scrolling Demo

When I first experienced this issue I gave up on trying to solve it. Now that I have more knowledge of CSS, your issue caused me to become interested in figuring out how to fix it. I was able to fix the display issue in my RadGrid with the following style tags added to my .aspx page.

I hope that this fix will work for you as well!

Casey

<style type="text/css">
 
    .RadGrid_Default .rgHeaderDiv
    {
        margin-right: 0px !important;
    }
 
</style>
0
Jocelyn
Top achievements
Rank 1
answered on 22 Mar 2012, 01:42 PM
I tried your solution and it doesn't work, except if I put something greater than 0px instead of 0px.

This is a really strange behavior.

Thanks for your help Casey and Galin.
0
Galin
Telerik team
answered on 27 Mar 2012, 02:13 PM
Hi Jocelyn,

I tried to replicate the issue which you described, but to no avail. Attached to this message, you will find the test page which I used for testing. Please, take a look at it and let me know if there are any differences at your end, which I may be leaving out.

In case the problem persists could you please modify the test project, so that we can debug this issue locally?

Looking forward to your reply.

Greetings,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Casey
Top achievements
Rank 1
answered on 27 Mar 2012, 02:24 PM
Hi Galin,

I believe that Jocelyn's issue arises when you enable scrolling and set the Static Headers property to true. The CSS I provided works to fix the layout issue in IE 9, but not Chrome. If you modify the CSS and set the margin to 1px in Chrome, it will fill the header all the way to the right, but there will still be the 1px margin.

For some reason, when Static Headers & Scrolling are enabled, the RadGrid places a margin equal to the width of the scroll bar on the .rgHeaderDiv element, which I don't feel should be added.

Thanks,
Casey
0
Galin
Telerik team
answered on 29 Mar 2012, 05:19 PM
Hi Jocelyn,

The gap above the scroll is a legacy from the first versions of RadControls for ASP.NET AJAX. We prefer not to change this appearance as we will have to introduce breaking changes which is not acceptable.

However, you can workaround it by making a new image exactly like header and set it as background of RadGrid with CSS.  You can find a sample page in the attached file. (sample-grid_CSS_workaround.zip)

Also, you can workaround it by filling the gap with new elements, which are created with the following javascript and styled appropriately:
Javascript
window.$ = $telerik.$;
function GridCreated(sender, arg)
{
    var tableMarkup = '<table cellSpacing="0" class="rgMasterTable rgClipCells">';
  
 
    var header = sender.get_masterTableViewHeader().get_element();
    $telerik.$('thead tr', header).each(function ()
    {
        var currEl = $telerik.$('th:first, td:first', this);
        tableMarkup += '<tr><' + currEl[0].tagName + ' class="' + currEl[0].className + '" style="height:' + currEl.height() + 'px"> </' + currEl[0].tagName + '></tr>';
    });
  
 
    tableMarkup += '</table>';
  
 
    $('.rgHeaderDiv').wrap('<div class="rgHeaderDiv rgHeaderDivWrapper" />')
    .parent()
    .append(tableMarkup);
}

CSS
.rgHeaderDivWrapper
{
    position: relative;  
}
  
 
.rgHeaderDivWrapper > .rgMasterTable
{
    position: absolute;
    top: 0;
    right: 0
}

I hope this helps.

Kind regards,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Jocelyn
Top achievements
Rank 1
Answers by
Galin
Telerik team
Jocelyn
Top achievements
Rank 1
Casey
Top achievements
Rank 1
Share this question
or