[Solved] Grid filter window clipped when inside a PanelBar

[Daniel]

I'm using Q2 2010 Telerik Extensions for MVC. When a Grid is placed in a PanelBar, if there are only a few rows being rendered by the active page of the Grid the popup filter parameters window is clipped as shown in the attached file.

Is there a way of getting the filter parameters window to render without being clipped?

[Georgi Krustev]

Hi Daniel,

You can try to define z-index of the filter menu like so:

<style type="text/css">
    .t-filter-options
    {
        -moz-box-shadow:2px 2px 2px #AAAAAA;
        border-style:solid;
        border-width:1px;
        padding:3px;
        position:absolute;
        width:148px;
        z-index: 1000;
    }
</style>

Sincerely yours,
Georgi Krustev
the Telerik team

[Daniel]

Hi Georgi,
thanks for that suggestion - I'm afraid I'm a novice at applying styles. Where would I insert that styling fragment?

I've tried inserting it into the view and appending it (suitably modified) to the stylesheet file telerik.outlook.min.css (as that's the theme I happen to be using whilst testing) without success.

[Georgi Krustev]

Hello Daniel,

CSS class should be placed in the header of the page. Something like that:

<asp:Content ID="Content1" contentPlaceHolderID="MainContent" runat="server">
<% Html.Telerik().PanelBar()
       .Name("shit")
       .Items(item =>
       {
           item.Add().Text("grid")
               .ContentHtmlAttributes(new { style="height:200px" })
               .Content(() =>
               {
                   Html.Telerik().Grid<Customer>()
                       .Name("Grid")
                       .Columns(columns =>
                       {
                           columns.Bound(c => c.CustomerID)
                               .ClientTemplate("<img width='100' height='110' alt='<#= CustomerID #>' src='"
                                   + Url.Content("~/Content/Grid/Customers/")
                                   + "<#= CustomerID #>.jpg' />")
                               .Title("Picture");
                           columns.Bound(c => c.ContactName).Title("Name");
                           columns.Bound(c => c.Phone);
                       })
                       .DataBinding(dataBinding => dataBinding.Ajax().Select("_TemplatesClientSide", "Grid"))
                       .Sortable()
                       .Scrollable(s => s.Height(100))
                       .Filterable()
                       .Pageable().Render();
               });
           item.Add().Text("Fake");
       }).Render();
%>

</asp:Content>

<asp:Content ID="header" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
    .t-filter-options
    {
        -moz-box-shadow:2px 2px 2px #AAAAAA;
        border-style:solid;
        border-width:1px;
        padding:3px;
        position:absolute;
        width:148px;
        z-index: 1000;
    }
</style>

</asp:Content>

Kind regards,
Georgi Krustev
the Telerik team

[Daniel]

Hi Georgi,
thanks for your help. Your z-index style for the filter menu has fixed the problem in Chrome (5.0.375.127), FireFox (3.6.9) and Internet Explorer 8. Unfortunately Internet Explorer 8 in compatibility view still has the clipping problem, but this is a great help.
Thanks again.