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

Problem with hideColumn()

10 Answers 185 Views

Grid

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

Johnathan asked on 09 May 2011, 07:52 PM

This is getting frustrating. According to other threads and the examples I should be able to simply hide or not hide a column in javascript with a simple function. The problem is that when I use the hideColumn(x) function, it is not hiding one column, but always two. (Whatever is the next column is hidden as well) This happens regardless of what index I pass to the function. (Though I'm only interested in hiding index 1) I've tried experimenting, but no luck so far. The relevant code is below:

<telerik:RadCodeBlock ID="codeBlock1" runat="server">

<script type="text/javascript">

var grid;

function GetGridObject(sender, eventArgs)

{

grid = sender;

}

function showType(action)

{

if (action)

{

grid.get_masterTableView().showColumn(1);

}

else

{

grid.get_masterTableView().hideColumn(1);

}

</script>

</telerik:RadCodeBlock>

<telerik:RadGrid ID="gridLoads" runat="server" AllowPaging="false" EnableEmbeddedSkins="false" AutoGenerateColumns="false" Height="344px">

<MasterTableView CellSpacing="0" CellPadding="0" Width="612px" DataKeyNames="SortOrder" TableLayout="Fixed" ShowFooter="false">

<HeaderStyle BackColor="#FFFFFF" Font-Bold="true" ForeColor="#666666" Font-Names="Arial,Verdana,Sans-Serif" BorderWidth="0" BorderStyle="None" />

<ItemStyle BackColor="#EBECF2" Font-Names="Arial,Verdana,Sans-Serif" />

<AlternatingItemStyle BackColor="#EBECF2" Font-Names="Arial,Verdana,Sans-Serif" />

<NoRecordsTemplate></NoRecordsTemplate>

<Columns>

<telerik:GridTemplateColumn UniqueName="Title" HeaderText="Title" HeaderStyle-Width="320px"

ItemStyle-BorderWidth="1" ItemStyle-BorderColor="#cccccc">

<ItemTemplate>

<telerik:RadTextBox ID="txtTitle" Skin="Simple" MaxLength="50" Width="315px" runat="server">

</telerik:RadTextBox>

<asp:RequiredFieldValidator ID="rfvTitle" Display="Dynamic" ControlToValidate="txtTitle" ValidationGroup="SaveExp"

ErrorMessage="<br/>Please add a title for this item before adding!" EnableClientScript="false" runat="server">

</asp:RequiredFieldValidator>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Type" UniqueName="Type" HeaderText="Type" ItemStyle-BorderWidth="1"

ItemStyle-BorderColor="#cccccc" HeaderStyle-Width="93px" Display="false">

<ItemTemplate>

<telerik:RadComboBox ID="ddlType" Skin="Simple" Width="90px" runat="server">

<Items>

<telerik:RadComboBoxItem Text="Fuel" Value="Fuel" />

<telerik:RadComboBoxItem Text="Chaff" Value="Chaff" />

<telerik:RadComboBoxItem Text="Flares" Value="Flares" />

<telerik:RadComboBoxItem Text="Bomb" Value="Bomb" />

<telerik:RadComboBoxItem Text="Missle" Value="Missle" />

<telerik:RadComboBoxItem Text="Ammo" Value="Ammo" />

<telerik:RadComboBoxItem Text="External Tank" Value="External Tank" />

</Items>

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Weight" HeaderText="Weight" UniqueName="Weight" ItemStyle-HorizontalAlign="Right"

ItemStyle-BorderWidth="1" ItemStyle-BorderColor="#cccccc"

HeaderStyle-Width="57px" HeaderStyle-HorizontalAlign="Right">

<ItemTemplate>

<wyle:NumericTextBox ID="txtWeight" runat="server" ToolTip="Enter Weight Here"

MaxLength="10" MaxValue="9999999999.9" Skin="Simple" DecimalPlaces="1" Width="50px" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Moment" HeaderText="Moment" UniqueName="Moment" ItemStyle-HorizontalAlign="Right"

ItemStyle-BorderWidth="1" ItemStyle-BorderColor="#cccccc"

HeaderStyle-Width="79px" HeaderStyle-HorizontalAlign="Right">

<ItemTemplate>

<img src="../../Images/calculator_20.png" onclick="openArm(this, '<%=gridLoads.ClientID %>', 7, 10);" title="Calculate moment based on new ARM"

alt="Calculate moment based on new ARM" style="vertical-align:middle;" />

<wyle:NumericTextBox ID="txtMoment" runat="server" ToolTip="Enter Moment Here"

MaxLength="10" MaxValue="9999999999.9" Skin="Simple" DecimalPlaces="1" Width="50px" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings Scrolling-UseStaticHeaders="true" Scrolling-AllowScroll="true" AllowColumnHide="true">

<Resizing ClipCellContentOnResize="false" EnableRealTimeResize="true" AllowColumnResize="true" />

<ClientEvents OnGridCreated="GetGridObject"></ClientEvents>

</ClientSettings>

</telerik:RadGrid>

10 Answers, 1 is accepted

answered on 16 May 2011, 02:57 PM

Hi Johnathan,

Based on the supplied information, it is hard to determine what is causing the unwanted behavior at your end. To further track the issue, it will be best if you open a formal support ticket, and send us a small working project, demonstrating your logic, and showing the unwanted behavior. You could open a formal support ticket from your Telerik account and attach a ZIP file there. In that way we can reproduce and pinpoint the problems you are facing on our side and provide a solution.

Kind regards,
Pavlina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 24 Jul 2012, 07:12 PM

Hello Pavlina,

Thank you for responding so promptly.

This morning, I did update the RadControls to the Q2 2012, and the problem still exists.

On the web page, I am displaying all the columns pertaining to a customer account. I also added 10 checkboxes at the top of the page representing some of the columns, or column groups. The checkboxes are initially displayed as checked, because all the columns are initially displayed.

However, the user has the option to uncheck a box and hide a column, or column group. In my first test, I am trying to hide just one column, however, 2 columns are hidden on the postback after the user unchecks one of the boxes.

On my last test, I hard-coded the column number in the JavaScript command, and columns 9 and 10 were hidden on the postback.
(RadGrid1.get_masterTableView().hideColumn(9);)

I have also tried hard-coding columns 1,2,3, and it is the same result ... the selected column is hidden, as well as the following column.

I appreciate your assistance,
Jovonne

answered on 27 Jul 2012, 08:32 PM

RadGrid-hide-column.zip

Hi Jovonne,

I tried to replicate the problem you are facing but to no avail. Please find attached my test page. Give it a try and let me know what is the difference in your case.

All the best,
Pavlina
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 30 Jul 2012, 09:04 PM

Hi Pavlina,

Thank you for the code example. I am still encountering the same error ... where the column to the right is hidden with the requested column.

However, I did find where Veli responded to someone else last March, and reported it was a bug in the IE7 page rendering: http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-headercontextmenu-hiding-2-columns.aspx

Now that I think I know the root of the problem, then I can work around it, and add blank columns in between, or group the columns differently, because I would prefer the column-hide and column-display code to be client-side and avoid a postback.

Jovonne