Problem with hideColumn()

[Johnathan]

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>

[Pavlina]

Hello Johnathan,

How to hide/show columns client-side by using the control's API is demonstrated in the following online example.
http://demos.telerik.com/aspnet-ajax/grid/examples/client/clientsideapi/defaultcs.aspx?

Check it out and see what is the difference in your case.

Best wishes,
Pavlina
the Telerik team

[Johnathan]

That is the demo I used to set up the code to show or hide a column in the first place.  The only relevant difference I can see from the example is that they use automatically generated columns from the data source, and I am using template columns.  I'm wondering if there is a bug in the function that is causing the HTML to become malformed or something?

[Pavlina]

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

[LuAnn]

Pavlina,

I have the exact same problem as is described last May.  
Could you write back with the problem that was causing 2 columns to be hidden instead of one?   I am also using templated columns for some of numeric columns.

Thanks a $1m,
Jovonne

[Pavlina]

Hi Jovonne,

Can you specify which version of RadControls you are using in your project? Also make sure if the problem persists in Q2 2012 release.

Kind regards,
Pavlina
the Telerik team

[LuAnn]

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

[Pavlina]

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

[LuAnn]

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

[donavon]

I'm having the same issue. Any luck with the workaround Jovonne?

[Pavlina]

Hi Jovonne,

Can you download latest version of RadControls for ASP.NET AJAX and see if the problem with hiding columns still persists?

All the best,
Pavlina
the Telerik team