Filter Menu Floats on the page

[Paulo]

Hi
In my page I have a RadGrid with filter menu. When I click on the menu button the little box with the menu options does not have a consistent place. Sometimes it is close to the button sometimes in the middle of the page. Most of the time this hapen when the internet explorer is not fully opened.
I and not using css file for menu.
Could you please explain where is the setting for the location of the filter menu? or how can I fix the problem.


Thanks

[Radoslav]

Hello Paulo,

The described issue is very strange.  Could you please post your aspx page markup with the related code behind file? Thus we will be able to gather more details about your scenario and provide you with more to the point answer.

Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team

[Paulo]

For security reasons I am not alowed to post the code behind.

<%

 

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content ID="Content1" ContentPlaceHolderID="contentHead" runat="server">

<style type="text/css">

 .style4

{

 width: 616px;

}

.style14

{

}

 .style16

{

 width: 145px;

 }

 .style20

{

}

.style21

{

width: 201px;

}

 .style22

{

width: 145px;

height: 90px;

}

.style23

{

width: 201px;

height: 90px;

}

.style24

{

height: 90px;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="BeforeForm" runat="server">

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainTop" runat="server">

</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="BeforeMessageBar" runat="server">

</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="AfterMessageBar" runat="server">

</asp:Content>

<asp:Content ID="Content6" ContentPlaceHolderID="SubTabContent" runat="server">  

<asp:Content>

<asp:Content ID="Content7" ContentPlaceHolderID="BeforeContent" runat="server">

</asp:Content>

<asp:Content ID="Content8" ContentPlaceHolderID="content" runat="server">

<div style="margin-left: 50px; margin-right: 50px">
<p>

<strong>Enter search criteria to narrow your results or select submit for previous 2 weeks.</strong></p>

<p> &nbsp;</p>

<table class="style4">

<tr>

<td class="style16">

</td>

<td class="style21">

From:

</td>

<td> &nbsp;To:

</td>

</tr>
<tr>

<td class="style16">

Request Date Range:

</td>

<td class="style21">

<telerik:RadDatePicker ID="DateRangeFrom" runat="server" DateInput-DateFormat="dd/MMM/yyyy"

 DateInput-EmptyMessage="dd/mm/yyyy" Width="120px">

<DateInput ID="DateInput1" runat="server" DateFormat="MM/dd/yyyy" DisplayDateFormat="MM/dd/yyyy">

</DateInput>

</telerik:RadDatePicker>

</td>

<td align="left">

<telerik:RadDatePicker ID="DateRangeTo" runat="server" DateInput-DateFormat="dd/MMM/yyyy"

DateInput-EmptyMessage="dd/mm/yyyy" Width="120px">

<DateInput ID="DateInput2" runat="server" DateFormat="MM/dd/yyyy" DisplayDateFormat="MM/dd/yyyy">

</DateInput>

</telerik:RadDatePicker>

</td>

</tr>

<tr>

<td class="style16">

Access Requested For:
</td>

<td class="style14" colspan="2">

<telerik:RadComboBox ID="cmbAccessFor" runat="server" Width="200px" EmptyMessage="Enter Name"

OnClientItemsRequested="OnClientItemsRequestedHandler" OnClientItemsRequestFailed="OnClientItemsRequestFailedHandler"

EnableLoadOnDemand="True" ShowMoreResultsBox="true" DataTextField="fullname"

AllowCustomText="true" EnableVirtualScrolling="True" OnItemsRequested="cmbAccessFor_ItemsRequested">

<ExpandAnimation Type="none" />

<CollapseAnimation Type="none" />

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td class="style16">

Access Requested By:

</td>

<td class="style14" colspan="2">

<telerik:RadComboBox ID="cmbAccessBy" runat="server" Width="200px" EmptyMessage="Enter Name"

OnClientItemsRequested="OnClientItemsRequestedHandler" OnClientItemsRequestFailed="OnClientItemsRequestFailedHandler"

EnableLoadOnDemand="true" ShowMoreResultsBox="true" DataTextField="fullname"

AllowCustomText="false" EnableVirtualScrolling="True" OnItemsRequested="cmbAccessBy_ItemsRequested">

<ExpandAnimation Type="none" />

<CollapseAnimation Type="none" />

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td class="style16">
Role Requested:

</td>

<td class="style20" colspan="2">

<telerik:RadComboBox ID="cmbRole" runat="server" Width="420px" EmptyMessage="Enter Role"

OnClientItemsRequested="OnClientItemsRequestedHandler" OnClientItemsRequestFailed="OnClientItemsRequestFailedHandler"

AllowCustomText="false" ShowMoreResultsBox="true" DataTextField="role" EnableLoadOnDemand="true"

EnableVirtualScrolling="True" OnItemsRequested="cmbRole_ItemsRequested">

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td class="style16">

&nbsp;

</td>

<td class="style21">

</td>

<td>

&nbsp;

</td>

</tr>

<tr>
<td class="style16" valign="top">

Approval Status:

</td>
<td class="style21">
<telerik:RadButton ID="rbApprStatus1" runat="server" ToggleType="Radio" ButtonType="ToggleButton"

GroupName="Radios2" AutoPostBack="false" Text="Approved" SplitButtonPosition="Left">

</telerik:RadButton>

<br />

<telerik:RadButton ID="rbApprStatus2" runat="server" ToggleType="Radio" ButtonType="ToggleButton"

GroupName="Radios2" AutoPostBack="false" Text="Rejected" SplitButtonPosition="Left">

</telerik:RadButton>

<br />

<telerik:RadButton ID="rbApprStatus3" runat="server" ToggleType="Radio" ButtonType="ToggleButton"

GroupName="Radios2" AutoPostBack="false" Text="All" SplitButtonPosition="Left"> 

</telerik:RadButton>

</td>

<td>

&nbsp;

</td>

</tr>

<tr>

<td class="style22">

 &nbsp;

</td>

<td class="style23">

<telerik:RadButton ID="rbClearForm" runat="server" Enabled="true" Text="Reset " Width="100px"

OnClick="btnReset_Click">

</telerik:RadButton>

</td>

<td class="style24">

<telerik:RadButton ID="rbSubmit" runat="server" Text="Submit" Width="100px" OnClick="btnSubmit_Click">

</telerik:RadButton>

</td>
</tr> 
</table>
<ajaxsettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1">
</telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>

</ajaxsettings>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"> 

<telerik:RadGrid ID="RadGrid1" Width="100%" AlternatingItemStyle-BackColor="AliceBlue" AllowSorting="True" AllowPaging="True" GroupingSettings-CaseSensitive="false" AllowFilteringByColumn="True" runat="server" AutoGenerateColumns="False" Visible="False" OnNeedDataSource="RadGrid1_NeedDataSource" CellSpacing="0" GridLines="None" MasterTableView-ItemStyle-Wrap="false" PageSize="10" >

<PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="true"></PagerStyle>

<AlternatingItemStyle BackColor="AliceBlue"></AlternatingItemStyle>

<MasterTableView DataKeyNames="subjectid" TableLayout="Auto">

<Columns>

<telerik:GridDateTimeColumn UniqueName="requestdate" AllowFiltering="true" DataField="requestdate" HeaderText="REQUEST DATE"

HeaderStyle-Width="200px" DataType="System.DateTime" PickerType="None" HeaderStyle-Wrap="false" DataFormatString="{0:dd/MM/yyyy}">

<HeaderStyle Width="100px"></HeaderStyle>

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn UniqueName="requestedfor" AllowFiltering="true" DataField="requested for" HeaderText="REQUESTED FOR" HeaderStyle-Width="200px" DataType="System.String">

<HeaderStyle Width="100px"></HeaderStyle>

</telerik:GridBoundColumn> 
<telerik:GridBoundColumn UniqueName="subjectid" AllowFiltering="true" DataField="subjectid" HeaderText="SUBJECT ID" HeaderStyle-Width="200px" DataType="System.String">

<HeaderStyle Width="100px"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="requestedby" AllowFiltering="true" DataField="requested by" HeaderText="REQUESTED BY" HeaderStyle-Width="200px" DataType="System.String">

<HeaderStyle Width="100px"></HeaderStyle>

</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="requesterid" AllowFiltering="true" DataField="requesterid" HeaderText="REQUESTEr ID" HeaderStyle-Width="200px" DataType="System.String">

<HeaderStyle Width="100px"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="roles" AllowFiltering="true" DataField="roles" HeaderText="ROLES"

HeaderStyle-Width="200px" DataType="System.String">
<HeaderStyle Width="200px"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="outcome" AllowFiltering="true" DataField="outcome" HeaderText="OUTCOME" HeaderStyle-Width="200px" DataType="System.String">

<HeaderStyle Width="100px"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="justification" AllowFiltering="true" DataField="justification" HeaderText="JUSTIFICATION" HeaderStyle-Width="200px" DataType="System.String">

<HeaderStyle Width="200px"></HeaderStyle>
</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="expiration" AllowFiltering="true" DataField="expiration" HeaderText="EXPIRATION" HeaderStyle-Width="200px" DataType="System.String">

<HeaderStyle Width="100px"></HeaderStyle>

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

</MasterTableView>

<GroupingSettings CaseSensitive="False"></GroupingSettings>

<ClientSettings>

<ClientEvents OnFilterMenuShowing="filterMenuShowing" />

</ClientSettings>

<FilterMenu OnClientShown="MenuShowing" />

</telerik:RadGrid>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var column = null;
function MenuShowing(sender, args) {
if (column == null) return;

var menu = sender; var items = menu.get_items();

if (column.get_dataType() == "System.String") {

var i = 0;

while (i < items.get_count()) {

if (!(items.getItem(i).get_value() in { 'NoFilter': '', 'Contains': '' })) {

var item = items.getItem(i);

if (item != null)

item.set_visible(false);

}
else {

var item = items.getItem(i);

if (item != null)

 item.set_visible(

 true);

 } i++;

}

}

if (column.get_dataType() == "System.DateTime") {

var j = 0; while (j < items.get_count()) {

if (!(items.getItem(j).get_value() in { 'NoFilter': '', 'EqualTo': '' })) {

var item = items.getItem(j); if (item != null)

item.set_visible(false);

}

else { var item = items.getItem(j);
if (item != null)
item.set_visible(true);
}
 j++; }

}

column = null;

 menu.repaint();

}

function filterMenuShowing(sender, eventArgs) {

column = eventArgs.get_column();

}
</script>

 </telerik:RadCodeBlock>

</telerik:RadAjaxPanel>

<br />
</div>
<script language="javascript" type="text/javascript">

function OnClientItemsRequestFailedHandler(sender, eventArgs) {

var response = eventArgs.get_text();

var statusCode = unescape(eventArgs.get_errorMessage());

var myResult = statusCode.replace("&#39;", "'");
statusCode = myResult.replace("&#39;", "'");

if (statusCode.toString().length > 0)
{
alert(statusCode + "\n\nPlease Contact Customer Service.");

}

else {

 alert("Data Connection Error. Please Contact Customer Service.");

}

eventArgs.set_cancel(true);

window.location = window.location.toString().replace("Default.aspx", "Default.aspx");

}

var _WebForm_ExecuteCallback = WebForm_ExecuteCallback;

WebForm_ExecuteCallback = function (callbackObject) {

var response = callbackObject.xmlRequest.responseText;

var separatorIndex = response.indexOf("|");

if (response.charAt(0) != "s" && response.charAt(0) != "e" && separatorIndex == -1) {

if ((typeof (callbackObject.errorCallback) != "undefined") && (callbackObject.errorCallback != null))

 callbackObject.errorCallback(callbackObject.xmlRequest.status + "", response);

}

else _WebForm_ExecuteCallback(callbackObject);

};

function OnClientItemsRequestedHandler(sender, eventArgs) {

//set the max allowed height of the combo

var MAX_ALLOWED_HEIGHT = 220;

//this is the single item's height

var SINGLE_ITEM_HEIGHT = 22;

var calculatedHeight = sender.get_items().get_count() * SINGLE_ITEM_HEIGHT;

var dropDownDiv = sender.get_dropDownElement();

if (calculatedHeight > MAX_ALLOWED_HEIGHT) {
setTimeout(function () { dropDownDiv.firstChild.style.height = MAX_ALLOWED_HEIGHT + "px"; }, 20);

}

else {

setTimeout(function () { ropDownDiv.firstChild.style.height = calculatedHeight + "px"; }, 20);

}

}

</script>

</asp:Content>

 

[Radoslav]

Hello Paulo,

To avoid the described behavior you need to get the column on OnClientShowing event instead of on OnClientShown:

<ClientSettings>
    <ClientEvents OnFilterMenuShowing="filterMenuShowing" />
</ClientSettings>
<FilterMenu OnClientShowing="MenuShowing"  />

Please give it try and let me know if the issue still persists. Looking forward for your reply.

Regards,
Radoslav
the Telerik team