Filter Menu Floats on the page

4 posts, 0 answers
  1. Paulo
    Paulo avatar
    30 posts
    Member since:
    Mar 2013

    Posted 25 Mar 2013 Link to this post

    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
  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 28 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paulo
    Paulo avatar
    30 posts
    Member since:
    Mar 2013

    Posted 28 Mar 2013 Link to this post

    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>

     

  5. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 02 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top