Radgrid HeaderContextMenu hiding 2 columns

[Arlyne]

Hi All,
I am encountering this issue with the radgrid enableheadercontextmenu, When I click one of the columns on my radgrid, the column on the right of my grid are getting hidden too. So it's hiding two columns at the same time. I can't find any settings that is allowing this. I already tried Tablelayout = "fixed" but still got the same problem. Below is the setting of my radgrid.

 

<telerik:RadGrid ID="grid" runat="server" Skin="Office2007"

 

AllowPaging="true" AllowSorting="true"  

 

 

 

 

 

PageSize="20" AutoGenerateColumns="false" 

 

 

 

ShowStatusBar="true" GridLines="None" Width="99%" 

 

 

 

OnNeedDataSource="grid_NeedDataSource"

 

OnItemCreated ="grid_ItemCreated"  

 

SelectedItemStyle-BackColor="LightSteelBlue"

 

 

 

AllowMultiRowSelection="False" > 

 

<SelectedItemStyle BackColor="LightSteelBlue"></SelectedItemStyle>

 

<HeaderStyle Font-Names="Verdana, Century Gothic" Font-Bold="true" Font-Size="8" ForeColor

="Navy"/> 

 

<ItemStyle Font-Names="Verdana, Century Gothic" Font-Size="8" Wrap

="false"/>

 

<PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" />

 

 

 

<AlternatingItemStyle BackColor="AliceBlue" Font-Names="Verdana, Century Gothic" Font-Size="8" Wrap="false" />

 

<MasterTableView Width="100%" AllowMultiColumnSorting="true" TableLayout="Auto"

 

 

 

AllowFilteringByColumn="true" IsFilterItemExpanded="false" EnableHeaderContextFilterMenu="true" EnableHeaderContextMenu ="true">

 

 

 

<GroupByExpressions>  

 

<telerik:GridGroupByExpression>  

 

<SelectFields>  

 

<telerik:GridGroupByField FieldAlias="Week" FieldName="Rotation" FormatString

="{0 : S}"

HeaderValueSeparator = " : " />

 

 

 

</SelectFields>  

 

<GroupByFields>

<telerik:GridGroupByField FieldName="Rotation" SortOrder="Ascending"/>

 

</GroupByFields>
</telerik:GridGroupByExpression> 

 

</GroupByExpressions>

 

 

 

<Columns>

 

 

 

<telerik:GridTemplateColumn UniqueName="CategoryName" DataField="Categoryname" HeaderText

="Category">

 

<ItemStyle Wrap="true" Width="130" Font-Names

="Verdana"/>

 

 

<HeaderStyle Width="130" Wrap="true" />

 

<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text='<%#Eval("CategoryName") %>' Width="130"></asp:Label>

 

 

</ItemTemplate>  

 

</telerik:GridTemplateColumn>  

 

<telerik:GridBoundColumn UniqueName="Status" DataField="Status" HeaderText

="Status">

<ItemStyle Wrap="true" Width="150" Font-Names

="Verdana"/> 

 

<HeaderStyle Width="150" Wrap="true" />

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridTemplateColumn UniqueName="EventName" DataField="Eventname" HeaderText

="Event Name">

 

<ItemStyle Wrap="true" Width="150" Font-Names

="Verdana"/> 

 

<HeaderStyle Width="150" Wrap="true" />  

 

<ItemTemplate>

 

<asp:Label ID="lblEventName" runat="server" Text='<%#Eval("EventName") %>' Width="150"></asp:Label>

 

</ItemTemplate>

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn UniqueName="EventDetails" DataField="EventDetails" HeaderText

="EventDetails">

 

<ItemStyle Wrap="true" Width="200" Font-Names

="Verdana"/>

 

<HeaderStyle Width="200" Wrap="true" />  

 

<ItemTemplate>

 

<asp:Label ID="lblDetails" runat="server" Text='<%#Eval("EventDetails") %>' Width="200px"></asp:Label> 

 

</ItemTemplate>

 

</telerik:GridTemplateColumn> 

 

<telerik:GridBoundColumn UniqueName="BrandFl" DataField="CompanyEvent" HeaderText="Priority Brand" >

 

 

 

</telerik:GridBoundColumn>

 

 

 

</Columns>

 

<NoRecordsTemplate></NoRecordsTemplate>

 

</MasterTableView>

 

 

 

<FilterMenu EnableImageSprites="False"></FilterMenu>

 

<ClientSettings AllowColumnsReorder="true">

 

 

 

</ClientSettings>

 

</telerik:RadGrid>

 

 

[Veli]

Hi Arlyne,

This is a bug in IE7's rendering engine. It can be reproduced in the following browser versions and modes:

1. IE7 standards mode
2. IE7 quirks mode
3. IE8 compatibility view (IE7 document mode)
4. IE8 compatibility view (IE7 document mode)

You do not need RadGrid or any other server control to reproduce this. A simple HTML page will do:

<!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>
    <title></title>
    <style type="text/css">
        #table1
        {
            border-spacing:0;
        }

        #table1 td
        {
            border:1px solid gray;
        }
    </style>
</head>
<body>
    <table id="table1">
        <colgroup>
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <tr>
                <td>col1</td>
                <td>col2</td>
                <td>col3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>row1col1</td>
                <td>row1col2</td>
                <td>row1col3</td>
            </tr>
        </tbody>
    </table>

    <input type="button" value="hide col2" onclick="hideCol2()" />

    <script type="text/javascript">
        function hideCol2()
        {
            var table1 = document.getElementById("table1");
            var cols = table1.getElementsByTagName("col");

            //hide second col element
            cols[1].style.display = "none";

            for (var i = 0; i < table1.rows.length; i++)
            {
                //hide second cell from every row
                table1.rows[i].cells[1].style.display = "none";
            }
        }
    </script>
</body>
</html>

In the above HTML page, clicking on the "hide col2" button will hide the middle and the rightmost column in the table.

Veli
the Telerik team

[Arlyne]

Thanks for the response. Is there a workaround on this problem? I was able to solve it by adding a ajaxrequest on the radajaxmanager in order for it to refresh, but I still don't like the way it behaves since it has to close the column selection every single column that I hide.

[Arlyne]

Thanks for the response. Is there a workaround on this problem? I was able to solve it by adding a ajaxrequest on the radajaxmanager in order for it to refresh, but I still don't like the way it behaves since it has to close the column selection every single column that I hide.

[Veli]

Hello Arlyne,

Posting your page through AJAX is probably the most viable approach. The other involves removing the <col> elements from the master table html structure. However, this approach is not recommended, as together with the removed col elements, you remove any predefined or dynamically resized column widths.

Veli
the Telerik team

[Sam]

We are still facing the problem. Code is same as like above....



Where as it is working in IE7 and IE8 Compatible. not working in IE8


pl help us asap.

[Pavlina]

Hi Sam,

I already answered your support ticket with the same question. To avoid duplicate posts I will ask you to continue our communication there.

All the best,
Pavlina
the Telerik team