extra line on radgrid header

[JJ]

<telerik:RadGrid ID="mygrid" runat="server" AllowFilteringByColumn="True"
                             Width="950px" AllowPaging="True" AllowSorting="True" CellSpacing="0" GridLines="None"
                             OnNeedDataSource="mygrid_NeedDataSource" AutoGenerateColumns="False"
                             EnableLinqExpressions="False" CssClass="bodytext" OnItemCreated="mygrid_ItemCreated"
                             OnItemDataBound="mygridI_temDataBound" OnPdfExporting="mygrid_PdfExporting"
                             OnHTMLExporting="mygrid_HTMLExporting" OnGridExporting="mygrid_GridExporting"
                             OnInit="mygrid_Init" OnItemCommand="mygrid_ItemCommand">
                             <GroupingSettings CaseSensitive="false" />
                             <MasterTableView PageSize="10"  TableLayout="Auto"  EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true">

when I set EnableHeaderContextMenu="true" for radgrd , I use  UseStaticHeaders="True" and try to hide some of the column using ContextFilterMenu,  I got extra line behind the hiding column -- see attached image, I think this is caused by multiline header how can I get rid of it or make this look better? 

how can I make the visible column expand to full grid with instead of leaving empty space for the hidden column?

I tried to remove UseStaticHeaders="True", but still having empty space for hidden column.
 
Not sure what I missed, I feel I did the same as the demo. But just can not get rid of the ending white space.
http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/headercontextfiltermenu/defaultcs.aspx

 

 

 

 

Please help!

 

 Thanks! 

 

 

 

[Princy]

Hi,

I could replicate the issue when setting AllowScroll to true. Please try the following Javascript.

ASPX:

<ClientSettings>
        <ClientEvents OnColumnHidden="onColumnHidden" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>

Javascript:

<script type="text/javascript">
    function onColumnHidden(sender, args)
    {
        sender.get_masterTableView().get_element().style.tableLayout = "auto";
        sender.get_masterTableViewHeader().get_element().style.tableLayout = "auto";
        window.setTimeout(function () {
            sender.get_masterTableViewHeader().get_element().style.tableLayout = "fixed";
            sender.get_masterTableView().get_element().style.tableLayout = "fixed";
        }, 1)
    }
</script>

Thanks,
Princy.