RadGrid FilterList not complete

[David]

I've got an issue where the filter list is not showing all the list items.  The top of the list is cut off and "NoFilter" is not showing.  I think it might be a CSS setting but all the attempts to fix have failed.  The RadGrid is inside column1 of a two column master page.  Also, looks like the list is "double spaced" and therefore making the list longer than it has to be.

Anyone have any suggestions?

Thanks,
David

<%@ Page Title="" Language="C#" MasterPageFile="~/Layouts/TwoColumn.master" AutoEventWireup="true" CodeFile="bus_loc.aspx.cs" Inherits="co_listings_bus_loc" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Column1" Runat="Server">
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConflictDetection="CompareAllValues"
        ConnectionString="<%$ ConnectionStrings:holhrb1_uni_common %>"
        DeleteCommand="DELETE FROM [bus_loc] WHERE [SYSTEM] = @original_SYSTEM AND [CLIENT] = @original_CLIENT AND [JOBBER] = @original_JOBBER AND (([LOC] = @original_LOC) OR ([LOC] IS NULL AND @original_LOC IS NULL)) AND (([LOC_NAME] = @original_LOC_NAME) OR ([LOC_NAME] IS NULL AND @original_LOC_NAME IS NULL)) AND (([CLASS] = @original_CLASS) OR ([CLASS] IS NULL AND @original_CLASS IS NULL))"
        InsertCommand="INSERT INTO [bus_loc] ([SYSTEM], [CLIENT], [JOBBER], [LOC], [LOC_NAME], [CLASS]) VALUES (@SYSTEM, @CLIENT, @JOBBER, @LOC, @LOC_NAME, @CLASS)"
        OldValuesParameterFormatString="original_{0}"
        SelectCommand="SELECT [SYSTEM], [CLIENT], [JOBBER], [LOC], [LOC_NAME], [CLASS] FROM [bus_loc]"
        UpdateCommand="UPDATE [bus_loc] SET [LOC] = @LOC, [LOC_NAME] = @LOC_NAME, [CLASS] = @CLASS WHERE [SYSTEM] = @original_SYSTEM AND [CLIENT] = @original_CLIENT AND [JOBBER] = @original_JOBBER AND (([LOC] = @original_LOC) OR ([LOC] IS NULL AND @original_LOC IS NULL)) AND (([LOC_NAME] = @original_LOC_NAME) OR ([LOC_NAME] IS NULL AND @original_LOC_NAME IS NULL)) AND (([CLASS] = @original_CLASS) OR ([CLASS] IS NULL AND @original_CLASS IS NULL))">
        <DeleteParameters>
            <asp:Parameter Name="original_SYSTEM" Type="String" />
            <asp:Parameter Name="original_CLIENT" Type="Int32" />
            <asp:Parameter Name="original_JOBBER" Type="Int32" />
            <asp:Parameter Name="original_LOC" Type="String" />
            <asp:Parameter Name="original_LOC_NAME" Type="String" />
            <asp:Parameter Name="original_CLASS" Type="String" />
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="LOC" Type="String" />
            <asp:Parameter Name="LOC_NAME" Type="String" />
            <asp:Parameter Name="CLASS" Type="String" />
            <asp:Parameter Name="original_SYSTEM" Type="String" />
            <asp:Parameter Name="original_CLIENT" Type="Int32" />
            <asp:Parameter Name="original_JOBBER" Type="Int32" />
            <asp:Parameter Name="original_LOC" Type="String" />
            <asp:Parameter Name="original_LOC_NAME" Type="String" />
            <asp:Parameter Name="original_CLASS" Type="String" />
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="SYSTEM" Type="String" />
            <asp:Parameter Name="CLIENT" Type="Int32" />
            <asp:Parameter Name="JOBBER" Type="Int32" />
            <asp:Parameter Name="LOC" Type="String" />
            <asp:Parameter Name="LOC_NAME" Type="String" />
            <asp:Parameter Name="CLASS" Type="String" />
        </InsertParameters>
    </asp:SqlDataSource>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True"
        AllowPaging="True" AllowSorting="True" AutoGenerateDeleteColumn="True"
        AutoGenerateEditColumn="True" DataSourceID="SqlDataSource1" GridLines="None">
<HeaderContextMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</HeaderContextMenu>

<MasterTableView AutoGenerateColumns="False" DataKeyNames="SYSTEM,CLIENT,JOBBER"
            DataSourceID="SqlDataSource1">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
    <Columns>
        <telerik:GridBoundColumn DataField="SYSTEM" HeaderText="SYSTEM" ReadOnly="True"
            SortExpression="SYSTEM" UniqueName="SYSTEM"
            FilterListOptions="AllowAllFilters">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="CLIENT" DataType="System.Int32"
            HeaderText="CLIENT" ReadOnly="True" SortExpression="CLIENT" UniqueName="CLIENT">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="JOBBER" DataType="System.Int32"
            HeaderText="JOBBER" ReadOnly="True" SortExpression="JOBBER" UniqueName="JOBBER">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="LOC" HeaderText="LOC" SortExpression="LOC"
            UniqueName="LOC">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="LOC_NAME" HeaderText="LOC_NAME"
            SortExpression="LOC_NAME" UniqueName="LOC_NAME">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="CLASS" HeaderText="CLASS"
            SortExpression="CLASS" UniqueName="CLASS">
        </telerik:GridBoundColumn>
    </Columns>
    <PagerStyle Mode="NumericPages" />
</MasterTableView>

<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
    </telerik:RadGrid>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="GridView1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="GridView1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Column2" Runat="Server">
</asp:Content>

[Sebastian]

Hi David,

Does moving the grid outside of the master page context or increasing the z-index of the control or its filter menu alleviates the unwanted side effect? If the issue seems to be elsewhere, please provide a live url where the discrepancy can be seen and investigated. You may also consider using IE developer toolbar or FireBug to check the rendered html and find the cause of the abnormality.

Regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

Thank you for responding!

I think it is a CSS issue.  The only skin I can use with the RadGrid that works properly is "Inox".   Any other skin causes the filter items to double space and therefore, not all items show. 

My current CSS is below, do you spot anything that might be causing the issue?

Theme.css

/**************************************************************************************************************
 * Reset
 **************************************************************************************************************/
/*html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    top: 1px;
    left: 0px;
}*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

/**************************************************************************************************************
 * Globals
 **************************************************************************************************************/
body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; background-color: #ccc; }
h1, h2, h3, p, table, ul { margin: 10px; }
h1 { font-size: 14pt; font-weight: bold; }
h2 { font-size: 12pt; font-weight: bold; }
h3 { font-size: 10pt; font-weight: bold; }
li { margin: 10px 10px 10px 40px; }
th { whitewhite-space: nowrap; font-weight: bold; }
td { text-align: left; vertical-align: top; }
a
{
    color: #0000FF;
    text-decoration: none;
}
a:hover { color: #3B5E0B; text-decoration: underline; }
input.text, textarea { border: solid #3A75B6 1px; padding: 2px; }
strong { font-weight: bold; }
em { font-style: italic; }
blockquote { margin: 10px 50px; }

.clear { clear: both; }
.rightright { text-align: rightright; }

/* dont show transparent pngs in IE until the js fixes them */
.ie5 .iefix, .ie6 .iefix { display:none; }

/**************************************************************************************************************
 * Layout
 **************************************************************************************************************/
#page { margin: 0 auto; width: 950px; background-color: #fff; }
#page a { font-size: 10pt; }

#header { background-color: Maroon; color: #fff; height: 108px;
margin: 0; border: solid black 2px; overflow: hidden; text-align: rightright; }
#header ul { list-style: none; }
#header ul li { display: inline; margin: 0 2px; font-size: 8pt; }
#header ul li a { color: #fff; text-decoration: none; font-size: 8pt; }
#header ul li a:hover { text-decoration: underline; }
#header ul li.username { font-weight: normal; }
#header h1 { font-size: 24pt; margin: 0 10px; float: left; }
#header .badge { margin: 0; margin-top: 0px; }

#nav
{
    background-position: left top;
    background: left top;
    height: 48px;
    padding: 0;
    overflow: inherit;
}
#nav ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav ul li
{
    margin: 0;
    padding: 0;
}
#nav ul li a
{
    text-decoration: none;
    cursor: hand;
    float: left;
    text-decoration: none;
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #000000;
}
#nav ul li a span
{
    font-size: 10pt;
    color: #000000;
    text-align: center;
    padding: 0 15px;
}
#nav ul li a:hover span
{
    color: #0000FF;
}
#nav ul li a.selected span
{
    color: #800000;
}

#content { }

/* #columns { background: url(Images/columns_bg.png) top left repeat-y; }
#column1 { width: 700px; overflow:visible; float: left; }
#column1 a { font-size: 8pt; }
#column2 { width: 250px; overflow: hidden; float: right; }
#column2 a { font-size: 8pt; } */

#column1 { width: 700px; }
#column1 a { font-size: 10pt; }
#column2 { width: 250px; }
#column2 a { font-size: 10pt; }

/*background-color: #2764C1;*/
#footer { background-color: Maroon; color: #fff; border: solid black 2px; height: 64px;
font-size: 8pt; }
#footer p  { font-size: 8pt; }
#footer ul { list-style: none; float: rightright; font-size: 8pt; }
#footer li { display: inline; margin: 0; font-size: 8pt; }
#footer a  { color: #fff; font-size: 8pt; }

/**************************************************************************************************************
 * Page Styles
 **************************************************************************************************************/
/* ~/Admin/Default.aspx */
#dashboard { width: 950px; margin: 0; padding: 0; }
#dashboard .column1 { width: 700px; }
#dashboard .column1 table { margin-right: 0; }
#dashboard .column2 { width: 250px; }

/* ~/Admin/Users.aspx */
#searchterms { margin: 10px; background-color: #eee; border: solid #3A75B6 1px; }
#searchterms li, a { font-size: 8pt; }
#searchterms li { margin-top: 2px; margin-bottom: 2px; }
#searchterms p { margin: 2px 4px; }

#userlist { }
#userlist .gv { margin: 0 10px; }
#userlist .count { margin: 0 10px; text-align: rightright; font-size: 8pt; font-weight: bold; }
#userlist .gvedrs td { width: 730px; padding: 5px; }

/* ~/Admin/Roles.aspx */
#roles { }
#roles .list { margin: 0 10px; padding: 10px; border: solid #3A75B6 1px; background-color: #eee; }
#roles .list table { margin: 0; padding: 0; }
#roles .list td { padding: 4px; }
#roles .list label { margin-left: 5px; }
#roles .note { margin: 0 10px; }

/* ~/Login.aspx */
#login { margin: 50px; }
#login .container { width: 200px; margin-left: auto; margin-right: auto; }
#login h1 { margin: 0 0 10px 0; padding: 0; }
#login p { margin: 10px 0 0 0; padding: 0; font-size: 10pt; }
#login a { font-size: 10pt; }
#login label { display: block; font-weight: bold; }
#login input.text { width: 195px; }

/* ~/Signup.aspx */
#signup { margin: 50px 195px; width: 355px; }
#signup h1 { margin: 0 0 10px 0; padding: 0; }
#signup table { margin: 0 0 10px 0; border: none; width: 355px; }
#signup td { padding: 5px; }

/* ~/ForgotPassword.aspx */
#passwordrecovery { margin: 50px; }
#passwordrecovery .container { width: 300px; margin-left: auto; margin-right: auto; }
#passwordrecovery h1 { margin: 0 0 10px 0; padding: 0; }
#passwordrecovery p { margin: 10px 0 0 0; padding: 0; }
#passwordrecovery label { display: block; font-weight: bold; }
#passwordrecovery input.text { width: 295px; }

/* ~/Member/Account.aspx */
#accountinfo { }

/******************************************************************************
 * ASP.NET Controls
 ******************************************************************************/

/**** <asp:GridView /> ****/
.gv
{
    background-color: #ccc;
    border: 1px solid #800000;
    border-collapse: collapse;
}
.gv th, .gv td
{
    text-align: left;
    padding: 2px;
    font-size: 8pt;
}
.gv th
{
    color: #fff;
    background-color: #800000;
}
.gv th a
{
    color: #fff;
    text-decoration: none;
}
.gvar { background-color: #fff; }
.gvpr td
{
    color: #fff;
    font-weight: bold;
    background-color: #800000;
    font-size: 10pt;
}
.gvpr a
{
    color: #ccc;
    font-weight: bold;
}
.gvpr td table { margin: 0; }

/**** <asp:DetailsView /> ****/
.dv { background-color: #ccc; border: solid #3A75B6 1px; border-collapse: collapse; }
.dv td { padding: 4px; }
.dvh { text-align: rightright; whitewhite-space: nowrap; color: #fff; background-color: #2764C1; font-weight: bold; }

/* <asp:ValidationSummary /> */
.vs { color: #fff; background-color: #c00; margin: 0; padding: 4px; }
.vs ul { margin: 0; padding: 0; list-style: none; }
.vs li { margin: 0; padding: 0; font-size: 8pt; font-weight: normal; }

/* <hc:Dialog /> */
.dialog { color: #000; background-color: #fff; border: solid #2764C1 2px; }
.dialog_title { color: #fff; background-color: #2764C1; font-size: 10pt; font-weight: bold; padding: 4px; text-align: left; }
.dialog_content { text-align: left; }
.dialog_content .gv, .dialog_content .dv, .dialog_content table, .dialog_content p { margin: 10px 10px 0 10px; }
.dialog_buttons { padding: 10px; text-align: rightright; }
.dialog_background { background-color: Gray; filter: alpha(opacity=70); opacity: 0.7; }

/* <hc:Button /> */
button.btn { background-color: transparent; border: none; margin: 0; padding: 0; }
button.btn div { border: 0; cursor: pointer; padding: 0 10px 0 0; text-align: center; height: 28px; }
button.btn div span { display: block; whitewhite-space: nowrap; padding: 0 0 0 10px; color: #fff; font-size: 10pt; font-weight: bold; height: 28px; line-height: 28px; }
/* button graphics */
button.btn div { background: url(Images/button_right.png) top rightright no-repeat; }
button.btn div span { background: url(Images/button_left.png) top left no-repeat; }
button.btn:hover div { background-position: 100% -28px; }
button.btn:hover div span { background-position: 0% -28px; }
/* button browser specific tweaks */
.ie button.btn { width: auto; overflow: visible; padding: 0 0 0 4px; }

/************************************************************************************
 * AjaxControlToolkit Popup Calendar
 ************************************************************************************/
.ajax__calendar_container {padding:4px;position:absolute;cursor:default;width:240px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}
.ajax__calendar_body {height:139px;width:240px;position:relative;overflow:hidden;margin:auto;}
.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
.ajax__calendar_container TD {font-size:8pt;padding:0;}
.ajax__calendar_header {height:20px;width:100%;}
.ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(Images/arrow-left.gif);}
.ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:rightright;background-repeat:no-repeat;background-position:50% 50%;background-image:url(Images/arrow-rightright.gif);}
.ajax__calendar_title {cursor:pointer;font-weight:bold;}
.ajax__calendar_footer {height:15px;}
.ajax__calendar_today {cursor:pointer;padding-top:3px;}
.ajax__calendar_dayname {height:17px;width:17px;text-align:rightright;padding:0 2px;}
.ajax__calendar_day {height:17px;width:18px;text-align:rightright;padding:0 2px;cursor:pointer;}
.ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}

.ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}
.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}

.ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}

Theme.skin

<%@ Register TagPrefix="hc" Namespace="Hero.Common.Controls" %>
<%@ Register TagPrefix="hc" Namespace="Hero.Membership.Controls" %>

<hc:Button CssClass="btn" runat="server" />
<hc:Dialog ButtonCssClass="btn" runat="server" />

<asp:Image SkinID="Badge" CssClass="badge fixie" ImageUrl="~/App_Themes/Sunny/Images/badge.png" AlternateText="" Width="125px" Height="125px" runat="server" />
<asp:Image SkinID="Logo" ImageUrl="~/App_Themes/Sunny/Images/logo.gif" AlternateText="" runat="server" />
<asp:ImageButton SkinID="CalendarButton" ImageUrl="~/App_Themes/Sunny/Images/Calendar.png" runat="server" />
<asp:TextBox CssClass="text" runat="server" />
<asp:ValidationSummary CssClass="vs" BackColor="" ForeColor="" DisplayMode="BulletList" runat="server" />

<asp:GridView CssClass="gv" GridLines="None" AutoGenerateColumns="false" runat="server">
  <RowStyle CssClass="gvr" />
  <HeaderStyle CssClass="gvhr" />
  <AlternatingRowStyle CssClass="gvar" />
  <SelectedRowStyle CssClass="gvsr" />
  <EmptyDataRowStyle CssClass="gvedrs" />
  <PagerStyle CssClass="gvpr" />
</asp:GridView>

<asp:DetailsView CssClass="dv" GridLines="None" AutoGenerateRows="false" runat="server">
  <FieldHeaderStyle CssClass="dvh" />
  <RowStyle CssClass="dvr" />
</asp:DetailsView>

Thanks,
David

[Sebastian]

Hi David,

Unfortunately from your style definitions I am not able to determine the exact cause of the discrepancy in your particular case. Furthermore, Theme file you provided contains regular MS GridView and DetailsView controls.

I suggest you utilize one of the tools mentioned in my previous reply to trace the cause of the abnormality and eliminate it.

Regards,

Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

Sebastia, thank you so much for your suggestion of using Firebug.  I've played around with in for a few moments and already solved a couple of other CSS related issues.  I'm sure I'll figure out the spacing issue soon. 

Thanks,
David