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

Column Resizing after Hiding and Re-Ordering columns not working properly

5 Answers 285 Views

Grid

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

Shane asked on 11 Nov 2010, 04:41 AM

Column resizing starts behaving unexpectedly after hiding some columns using the header context menu and then re-ordering some columns.

I suspect it has something to do with the indexes getting confused with the javascript that does the resizing as only columns that are moved ahead of columns that were removed cause the resizing not to work correctly.

I have set up a test page that demonstrates this behaviour. Having EnableRealTimeResize set to True can really make things messy when this bug occurs.

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="FirstTitle.Web.TestPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<title>Grid Test</title>

<style media="screen" type="text/css">

html, body

{

margin: 0;

padding: 0;

height: 100%;

}

#container

{

min-height: 100%;

position: relative;

_height:100%; /* Hack for IE 6 and below to fix up the crappy layout model */

}

#header

{

padding: 0px;

}

#content

{

padding-left: 25px;

padding-bottom: 1em; /* Height of the footer */

}

#footer

{

position: absolute;

bottom: 0;

width: 100%;

height: 1em; /* Height of the footer */

}

.contentDiv

{

overflow: auto;

position: relative;

*padding-bottom: 18px; /* Hack for IE 7 and below to fix up the crappy scrolling model */

*overflow-y: hidden; /* Hack for IE 7 and below to fix up the crappy scrolling model: * = IE7 and lower, _ = IE6 and lower */

}

.RadGrid

{

padding-right: 18px; /* Allows (to some degree) the right most column to be resized */

}

.paneIE

{

*position: relative;

}

</style>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />

<telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="WebBlue" />

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />

<div id="container">

<div id="header">

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr valign="top">

<td colspan="2" valign="top">

<p>Header</p>

</td>

</tr>

<tr>

<td valign="top" style="padding-left: 25px; padding-bottom: 3px; padding-top: 3px;">

<p>Language Select</p>

</td>

<td align="right" valign="top">

<p>|

Logout

|</p>

</td>

</tr>

</table>

</div>

<div id="content">

<div class="contentDiv">

<telerik:RadGrid ID="rgPolicies" runat="server" GroupingEnabled="false" GridLines="None" BorderStyle="None" AllowPaging="True" PageSize="5" AutoGenerateColumns="False" AllowFilteringByColumn="True" AllowSorting="True"

OnPageIndexChanged="rgPolicies_PageIndexChanged" OnNeedDataSource="rgPolicies_NeedDataSource">

<ClientSettings EnableAlternatingItems="True" EnableRowHoverStyle="True" AllowDragToGroup="false" AllowColumnHide="true" ColumnsReorderMethod="Reorder" AllowColumnsReorder="True" ReorderColumnsOnClient="True">

<Resizing AllowColumnResize="True" ResizeGridOnColumnResize="True" EnableRealTimeResize="True" />

<Selecting AllowRowSelect="True" />

</ClientSettings>

<MasterTableView ClientDataKeyNames="OrderNo" AllowMultiColumnSorting="True" AllowNaturalSort="True" EnableHeaderContextMenu="true">

<Columns>

<telerik:GridBoundColumn DataField="OrderNo" SortExpression="OrderNo" HeaderText="Order No">