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.

14 Answers, 1 is accepted

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.

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

answered on 21 Mar 2012, 04:18 PM

buglayout.png

ScrollLayout.png

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.

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.

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>

answered on 27 Mar 2012, 02:13 PM

testPage.zip

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

answered on 29 Mar 2012, 05:19 PM

sample-grid-CSS-workaround.zip

sample-page-js-workaround.zip

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