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

Rad Grid Column Resizing Issue

6 Answers 180 Views

Grid

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

Tracy asked on 06 May 2012, 11:26 PM

Hi,

I have 2 problems with my rad grid.

My first problem is that my columns are not being resized correctly when I hide a column. I have the HeaderContextMenu enabled and when i choose to hide a column the column is hidden but the column width of all the other columns are not sized to their set width.
For example if I have the following columns
Column 1 - Width=50px
Column 2 - Width=100px
Column 3 - Width= 120px
Column 4 - Width = 200px
If I hide column 2 then the width of column 3 becomes 100px and the width of column 4 becomes 120px.

My second problem is that if I have a column hidden in a grid and then resize another column, the grid thinks the column being resized is the column before the column I am actually resizing.
For example if I have the following columns
Column 1 - Width=50px
Column 2 - Width=100px
Column 3 - Width= 120px
Column 4 - Width = 200px

If I hide column 2 and then resize column 4 the grid thinks column 3 is being resized. I tested which column is being resized using the following function.

function ColumnResized(sender, eventArgs) {

alert(

"Column with Index: " + eventArgs.get_gridColumn().get_element().cellIndex + " Name " + eventArgs.get_gridColumn().get_uniqueName() + " was resized, width: " + eventArgs.get_gridColumn().get_element().offsetWidth);

}

What is returned from this function is the name and index of column 3 not column 4.

I have tried setting the TableLayout="fixed" but this did not solve my problem.

As always, I appreciate any help.

Tracy

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WBF SYS Email Addresses.aspx.vb" Inherits="IPS_Gateway.WBF_SYS_Email_Addresses" %>

<!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 id="Head1" runat="server">

<title></title>

<script type="text/javascript" >

function ColumnResized(sender, eventArgs) {

alert("Column with Index: " + eventArgs.get_gridColumn().get_element().cellIndex + " Name " + eventArgs.get_gridColumn().get_uniqueName() + " was resized, width: " + eventArgs.get_gridColumn().get_element().offsetWidth);

}

</script>

</head>

<body>

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

<act:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>

<telerik:RadWindowManager ID="rwmManager" runat="server"></telerik:RadWindowManager>

<telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="loading">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rgvMainGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgvMainGrid" LoadingPanelID="loading" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="loading" runat="server" Skin="" Transparency="30" >

<div >

<asp:Image ID="imgLoading" runat="server" ImageUrl="<%$ Resources:Images,Loading6%>" AlternateText="loading" />

</div>

</telerik:RadAjaxLoadingPanel>

<asp:SqlDataSource ID="SQLDS_EmailAddresses" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailAddresses-Sel-Ins-Upd-Del]" />

<asp:SqlDataSource ID="SQLDS_EmailAddress" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailAddresses-Sel-Ins-Upd-Del]" />

<asp:SqlDataSource ID="SQLDS_EmployeeLogin" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailAddresses-Sel-Ins-Upd-Del]" />

<asp:SqlDataSource ID="SQLDS_EmailGroup" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailGroups-Sel-Ins-Upd-Del]" />

<asp:SqlDataSource ID="SQLDS_EmailName" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailAddresses-Sel-Ins-Upd-Del]" />

<asp:SqlDataSource ID="SQLDS_EmailAddressGroups" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[System].[DSP_EmailGroupAddresses-Sel-Ins-Del]"/>

<asp:SqlDataSource ID="SQLDS_EmployeeStatus" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Employee].[DSP_EmployeeIdentifiers-Sel-Ins-Upd-Del]" />

<asp:SqlDataSource ID="SQLDS_EmployeeType" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Employee].[DSP_EmployeeIdentifiers-Sel-Ins-Upd-Del]" />

<asp:SqlDataSource ID="SQLDS_CompanyCode" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Company].[DSP_CompanyMaster-Sel-Ins-Upd-Del]" />

<asp:SqlDataSource ID="SQLDS_DivisionCode" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Company].[DSP_CompanyIdentifiers-Sel-Ins-Upd-Del]" />

<asp:SqlDataSource ID="SQLDS_DepartmentCode" runat="server"

ConnectionString="<%$ ConnectionStrings:IPSDataConnectionString %>" SelectCommandType="StoredProcedure" SelectCommand="[Company].[DSP_CompanyIdentifiers-Sel-Ins-Upd-Del]" />

<asp:panel ID="pnlPage" runat="server" CssClass="css_GPC01_Panel_MainContent">

<wuc:PageHeader id="wucPageHeader" runat="server"></wuc:PageHeader>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" cssClass="css_GPC01_Panel_PageContent">

<div style="width:450px; float: left;">

<telerik:RadGrid ID="rgvMainGrid" runat="server" DataSourceID="SQLDS_EmailAddresses"

EnableEmbeddedSkins="true" Skin="Office2010Silver" CssClass="css_GRD01_Grid_Master" Height="560px" Width="1230px"

EnableViewState="true" AutoGenerateColumns="false" AllowMultiRowSelection="false" AllowFilteringByColumn="true"

AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true"

EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true"

AllowSorting="true" EnableLinqExpressions="false" AllowPaging="true" PageSize="50">

<ItemStyle Wrap="false" />

<PagerStyle AlwaysVisible="true" Mode="NextPrevNumericAndAdvanced"/>

<ClientSettings AllowColumnsReorder="false" EnablePostBackOnRowClick="true" AllowExpandCollapse="true" EnableRowHoverStyle="true" >

<ClientEvents OnColumnResized="ColumnResized"

/>

<Resizing AllowColumnResize="True" AllowRowResize="False" EnableRealTimeResize="True" ResizeGridOnColumnResize="false" ></Resizing>

<Selecting AllowRowSelect="true" />

<Scrolling AllowScroll="true" />

</ClientSettings>

<HierarchySettings ExpandTooltip="Click to Show/Edit Email Groups" CollapseTooltip="Click to Hide Email Groups" />

<MasterTableView DataSourceID="SQLDS_EmailAddresses" DataKeyNames="EmailAddressId" Name="EmailAddresses"

EnableViewState="true" AllowFilteringByColumn="true"

AllowSorting="true" AllowMultiColumnSorting="true" AllowNaturalSort="false" OverrideDataSourceControlSorting="true"

EditMode="InPlace" CommandItemDisplay="Top" >

<CommandItemTemplate >

<div style="padding: 5px 5px;">

<asp:LinkButton ID="lbtAdd" runat="server" CommandName="InitInsert" ToolTip="Add New Group" style="position:absolute;left:10px;font-size:12px;" Visible='<%# rgvMainGrid.EditIndexes.Count=0 or Not rgvMainGrid.MasterTableView.IsItemInserted %>'> <asp:Image ID="imgAdd" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,AddRecord16%>" /> Add </asp:LinkButton>

<asp:LinkButton ID="lbtEdit" runat="server" CommandName="EditSelected" ToolTip="Edit Group" style="position:absolute;left:60px;font-size:12px;" Visible='<%# rgvMainGrid.EditIndexes.Count=0 and Not rgvMainGrid.MasterTableView.IsItemInserted %>'> <asp:Image ID="imgEdit" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,EditRecord16%>"/> Edit </asp:LinkButton>

<asp:LinkButton ID="lbtCancel" runat="server" CommandName="CancelAll" ToolTip="Cancel Edit/Add" style="position:absolute;left:10px;font-size:12px;" Visible='<%# rgvMainGrid.EditIndexes.Count > 0 Or rgvMainGrid.MasterTableView.IsItemInserted %>'> <asp:Image ID="imgCancel" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,CancelRecord16%>" /> Cancel </asp:LinkButton>

<asp:LinkButton ID="lbtSaveNew" runat="server" CommandName="PerformInsert" ToolTip="Save New Group" style="position:absolute;left:75px;font-size:12px;"

Visible='<%# rgvMainGrid.MasterTableView.IsItemInserted%>'>                                                  <

asp:Image ID="imgSaveNew" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,SaveRecord16%>" /> Save New</asp:LinkButton>

<asp:LinkButton ID="lbtDelete" runat="server" CommandName="DeleteSelected" ToolTip="Delete Group" style="position:absolute;left:110px;font-size:12px;" Visible='<%# rgvMainGrid.EditIndexes.Count=0

and Not rgvMainGrid.MasterTableView.IsItemInserted %>' OnClientClick="javascript:return confirm('You have selected to delete this user.\nThis process CANNOT BE UNDONE.\n\rDo you want to continue?')"> <

asp:Image ID="imgDelete" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,DeleteRecord16%>" />Delete </asp:LinkButton>

<asp:LinkButton ID="lbtSave" runat="server" CommandName="UpdateEdited" ToolTip="Save Changes" style="position:absolute;left:75px;font-size:12px;" Visible='<%# rgvMainGrid.EditIndexes.Count > 0 AND Not rgvMainGrid.MasterTableView.IsItemInserted%>'> <asp:Image ID="imgSave" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,SaveRecord16%>" /> Update </asp:LinkButton>

<asp:LinkButton ID="lbtFilters" runat="server" CommandName="ShowHideFilters" ToolTip="Show/Hide Group Filters" style="position:absolute;left:1085px;font-size:12px;"> <asp:Image ID="imgFilter" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,FilterRecord16%>" /> Filter</asp:LinkButton>

<asp:LinkButton ID="lbtRefresh" runat="server" CommandName="RebindGrid" ToolTip="Refresh Group Grid" style="position:absolute;left:1155px;font-size:12px;"> <asp:Image id="imgRefresh" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$Resources:Images, ReloadBlue16 %>" />Refresh</asp:LinkButton>

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="EmailAddressId" UniqueName="EmailAddressId"

HeaderText="Id" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="35px" AllowSorting="false" ReadOnly="true" >

<FilterTemplate></FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="EmployeeLogin" UniqueName="EmployeeLogin"

HeaderText="Login Id" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="120px" SortExpression="EmployeeLogin" ColumnEditorID="gtcEditor1">

<FilterTemplate>

<telerik:RadComboBox ID="rcbFilterEmployeeLogin" runat="server" EnableEmbeddedSkins="true" Skin="Windows7" Width="115px"

DataValueField="EmployeeLogin" DataTextField="EmployeeLogin" MarkFirstMatch="true"

EnableLoadOnDemand="true" OnItemsRequested="MasterFilter_OnItemsRequested"

OnPreRender="MasterFilter_PreRender" OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged"

</telerik:RadComboBox>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="EmailName" UniqueName="EmailName"

HeaderText="Name" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="200px" SortExpression="EmailName" ColumnEditorID="gtcEditor1" >

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="rcbFilterEmailName" Width="190px"

DataTextField="EmailName" DataValueField="EmailName" MarkFirstMatch="true"

EnableLoadOnDemand="true" OnItemsRequested="MasterFilter_OnItemsRequested"

OnPreRender="MasterFilter_PreRender" OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged"

</telerik:RadComboBox

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="EmployeeNumber" UniqueName="EmployeeNumber"

HeaderText="Employee" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="65px" SortExpression="EmployeeNumber" ReadOnly="true">

<FilterTemplate> </FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="EmailAddress" UniqueName="EmailAddress"

HeaderText="Email Address" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="240px" SortExpression="EmailAddress" ColumnEditorID="gtcEditor1">

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="rcbFilterEmailAddress" Width="230px"

DataTextField="EmailAddress" DataValueField="EmailAddress"

EnableLoadOnDemand="true" OnItemsRequested="MasterFilter_OnItemsRequested" MarkFirstMatch="true"

OnPreRender="MasterFilter_PreRender" OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged"

</telerik:RadComboBox

</FilterTemplate>

</telerik:GridBoundColumn

<telerik:GridBoundColumn DataField="CompanyCode" UniqueName="CompanyCode"

HeaderText="Company" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="65px"

SortExpression="CompanyCode" ReadOnly="true">

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="rcbFilterCompanyCode" Width="55px"

DataValueField="CompanyCode" DataTextField="CompanyCode"

EnableLoadOnDemand="true" OnItemsRequested="MasterFilter_OnItemsRequested" MarkFirstMatch="true"

OnPreRender="MasterFilter_PreRender" OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged"

</telerik:RadComboBox>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="DivisionCode" UniqueName="DivisionCode"

HeaderText="Division" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="65px"

SortExpression="DivisionCode" ReadOnly="true">

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="rcbFilterDivisionCode" Width="55px"

DataValueField="IdentifierCode" DataTextField="IdentifierCode" AllowCustomText="true"

EnableLoadOnDemand="true" OnItemsRequested="MasterFilter_OnItemsRequested" MarkFirstMatch="true"

OnPreRender="MasterFilter_PreRender" OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged"

</telerik:RadComboBox>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="DepartmentCode" UniqueName="DepartmentCode"

HeaderText="Department" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="65px"

SortExpression="DepartmentCode" ReadOnly="true">

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="rcbFilterDepartmentCode" Width="55px"

DataValueField="IdentifierCode" DataTextField="IdentifierCode" AllowCustomText="true"

EnableLoadOnDemand="true" OnItemsRequested="MasterFilter_OnItemsRequested" MarkFirstMatch="true"

OnPreRender="MasterFilter_PreRender" OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged"

</telerik:RadComboBox>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="EmployeeType" UniqueName="EmployeeType"

HeaderText="Employee Type" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="100px"

SortExpression="EmployeeType" ReadOnly="true">

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="rcbFilterEmployeeType" Width="90px"

DataValueField="Level2Code" DataTextField="Level2Code"

EnableLoadOnDemand="true" OnItemsRequested="MasterFilter_OnItemsRequested" MarkFirstMatch="true"

OnPreRender="MasterFilter_PreRender" OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged"

</telerik:RadComboBox>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="EmployeeStatus" UniqueName="EmployeeStatus"

HeaderText="Employee Status" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="90px"

SortExpression="EmployeeStatus" ReadOnly="true" >

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="rcbFilterEmployeeStatus" Width="80px"

DataTextField="Level2Code" DataValueField="Level2Code"

EnableLoadOnDemand="true" OnItemsRequested="MasterFilter_OnItemsRequested" MarkFirstMatch="true"

OnPreRender="MasterFilter_PreRender" OnSelectedIndexChanged="MasterFilter_OnSelectedIndexChanged"

</telerik:RadComboBox

</FilterTemplate>

</telerik:GridBoundColumn>

</Columns>

<DetailTables>

<telerik:GridTableView DataKeyNames="EmailGroupId, GroupEmailAddressId" HierarchyLoadMode="ServerOnDemand" Name="EmailGroups"

EditMode="InPlace" Caption=

"To Add New User, Check The Box Next To The User You Want To Add.     To Remove A User, Uncheck The Box Next To The User You Want To Remove.     To Show All Users,  Select ALL From The Selected Filter Option."

cssClass="css_GRD01_Grid_Detail" CommandItemDisplay="Top" AllowMultiColumnSorting="true" OverrideDataSourceControlSorting="true"

Width="1160px" PageSize="500" >

<CommandItemTemplate>

<div>

<asp:Label ID="lblTitle" runat="server" Text="Email Groups" Font-Bold ="true" Width="1000px"/>

<asp:LinkButton ID="lbtFilters" runat="server" CommandName="ShowHideFiltersDetail" ToolTip="Show/Hide User Filters" ><asp:Image ID="imgFilter" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$ Resources:Images,FilterRecord16%>" /> Filter</asp:LinkButton>

<asp:LinkButton ID="lbtRefresh" runat="server" CommandName="RebindGridDetail" ToolTip="Refresh User Grid" ><asp:Image id="imgRefresh" runat="server" CssClass="css_GFS01_Image_Align" ImageURL="<%$Resources:Images, ReloadBlue16 %>" />Refresh</asp:LinkButton>

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="EmailGroupId" UniqueName="EmailGroupId" Visible="false" DataType="System.Int32" />

<telerik:GridBoundColumn DataField="GroupEmailAddressId" UniqueName="GroupEmailAddressId" Visible="false" DataType="System.Int32" />

<telerik:GridBoundColumn DataField="SelectedStatus" UniqueName="SelectedStatus" Visible="false"> </telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="gtcSelectedStatus" HeaderText="Selected" HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" >

<ItemTemplate >

<asp:CheckBox id="chkSelectedStatus" runat="server" Checked='<%# Bind("SelectedStatus") %>' AutoPostBack="true" OnCheckedChanged="chkOption_OnCheckChanged" />

</ItemTemplate>

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="rcbFilterSelectedStatus"

AutoPostBack="true" AllowCustomText="true"

EnableEmbeddedSkins="true" Skin="Windows7" Width="45px" MarkFirstMatch="true"

OnPreRender="DetailFilter_PreRender" OnSelectedIndexChanged="DetailFilter_OnSelectedIndexChanged">

<Items>

<telerik:RadComboBoxItem Text="True" />

<telerik:RadComboBoxItem Text="False" />

</Items>

</telerik:RadComboBox

</FilterTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="EmailGroup" UniqueName="EmailGroup" HeaderText="Group" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="270px" SortExpression="EmailGroup" >

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="rcbFilterEmailGroup" DataSourceID="SQLDS_EmailGroup" DataTextField="EmailGroup" DataValueField="EmailGroup"

AppendDataBoundItems="true" AutoPostBack="true" AllowCustomText="true"

EnableEmbeddedSkins="true" Skin="Windows7" Width="260px" MarkFirstMatch="true"

OnPreRender="DetailFilter_PreRender" OnSelectedIndexChanged="DetailFilter_OnSelectedIndexChanged">

</telerik:RadComboBox

</FilterTemplate>

</telerik:GridBoundColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

</MasterTableView>

</telerik:RadGrid>

</div>

</telerik:RadAjaxPanel>

<telerik:GridTextBoxColumnEditor ID="gtcEditor1" runat="server" TextBoxStyle-Width="200px" />

</asp:panel>

</form>

</body>

</html>

6 Answers, 1 is accepted

answered on 10 May 2012, 09:51 AM

Hello Tracy,

You can resolve the first issue by enabling the feature ResizeGridOnColumnResize. Otherwise on resizing the browser tries to compensate the width of other column and they are resizing too.

About the other issue, it happens only in the old browsers (IE6/7). The reason for this behavior is that, in these browsers, the HTML TH element (the header cell) is removed from the DOM when the column is hidden, and re-added when the column is shown. This is required to implement proper column show/hide functionality in these browsers.

When the header is removed from the DOM, the cellIndex of the TH elements that are left visible no longer contain the original values when all the columns are visible. This means that, when successive columns are hidden, the cellIndex of the columns is one and the same. For example, when cell at index 1 is removed, cell at index 2 comes to position 1 and gets a cellIndex value of 1. When you try to remove the second next cell, it has a position 1 instead of the required 2. This breaks the show/hide logic.

To work around this problem, the cell index should be the actual index of the columns in the array of client column objects in the GridTableView instance. Therefore, you need to manually loop over all grid columns, check the unique name of the column and return the position of the column in the array.

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.

answered on 11 May 2012, 02:47 AM

Hi Galin,

Thank you for your response. Your solution fixed my first problem.

I am having a problem implementing your solution to my second problem.

To work around this problem, the cell index should be the actual index of the columns in the array of client column objects in the GridTableView instance. Therefore, you need to manually loop over all grid columns, check the unique name of the column and return the position of the column in the array.

I am assuming you are telling me I need to set the cellIndex to the column order. My problem is that I don't know how to set the cellIndex of the column or why I need to find the unique name. I searched the documentation and did not find any reference on how to set a cellIndex. Below is the function I am trying to create. Is this what I should be trying to do or do I not understand what you are telling me? Can you provide an example on how I should be implementing this functionality.

function ColumnHiddend(sender, eventArgs) {

             var tableView = sender.get_masterTableView();
             for (var i = 0; i < tableView.get_columns().length; i++) {
                 var columnName = tableView.get_columns()[i].get_uniqueName();
                 var column = tableView.get_columns()[i].cellIndex = i;   set column index
             }

Also: I am using IE8 but still have this problem, you indicated it is only a problem in IE6/IE7.

Your assistance is appreciated.

Tracy

answered on 16 May 2012, 08:24 AM

samplePage.zip

Hello Tracy,

I have find an easier way to fix this bug in IE7 (I guess you are testing in IE8 Compatibility Mode, which behavior is as the older version). You can make a dummy ajax postback at every showing/hiding event:

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">

<telerik:RadGrid ID="RadGrid1" runat="server">

<ClientSettings>

<ClientEvents OnColumnShown="RefreshGrid" OnColumnHidden="RefreshGrid" />

</ClientSettings>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

function RefreshGrid() {

if($telerik.isIE7)

$find('RadAjaxPanel1').ajaxRequest('');

}

Additionally, you can find a sample web site with this code used in the attached file. Please check it out and let me know how it goes.

Kind regards,
Galin
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Rad Grid Column Resizing Issue

6 Answers, 1 is accepted