Filter Icon displayed on next line, under filter textbox, while using AllowFilteringByColumn

17 posts, 0 answers
  1. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 28 Jan 2011 Link to this post

    hi,
    I am using 2009.3.1103.20 version of Telerik Controls.
    Now I simply added filtering to columns in my grid and that worked fine on my machine.
    But when I deployed it to Test Server, the problem is that the filter icon is displayed on next line, underneath filter textbox, for my first column.
    For rest of the columns, its looking good and this is happening only on my Test Server.
    I tried giving FiltercontrolWidth, HeaderStyle-Width but didnt work.

    Any idea why the filter icon is displayed underneath filter textbox?
    Here is my grid. I have about 15 fields so I kept only few fields here.
    The first column 

    <

     

    telerik:GridNumericColumn DataField="RequestInfoID"

     

    is displaying Filter Icon underneath filter textbox, any idea how do I make it display next to textbox?


    <div class="Scrollgrid" style="width: 1100px; height: 600px;">
                                                    <telerik:RadGrid ID="RadGridAllRequests" runat="server" AllowPaging="true" AllowSorting="true"
                                                        AllowFilteringByColumn="true" AutoGenerateColumns="False" BorderStyle="None"
                                                        GridLines="Both" OnNeedDataSource="RadGridAllRequests_needdatasource" OnItemDataBound="RadGridAllRequests_ItemDataBound"
                                                        OnItemCreated="RadGridAllRequests_ItemCreated" OnItemCommand="RadGridAllRequests_ItemCommand"
                                                           
                                                           
                                                        AllowMultiRowSelection="true" SelectedItemStyle-CssClass="SelectedItem" Width="100%"
                                                        Skin="WebBlue">
                                                        <PagerStyle Mode="NextPrevNumericAndAdvanced" Position="TopAndBottom" AlwaysVisible="true" />
                                                        <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
                                                            <Selecting AllowRowSelect="true" />
                                                        </ClientSettings>
                                                          
                                                          
                                                          
                                                        <MasterTableView 
                                                             
                                                        ShowHeadersWhenNoRecords="true" 
                                                        AllowFilteringByColumn="true" DataKeyNames="RequestInfoID">
                                                            <Columns>
                                                                  
                                                                <telerik:GridNumericColumn DataField="RequestInfoID" HeaderText="Request No." SortExpression="RequestInfoID"
                                                                    DataType="System.Int64" FilterControlWidth="40px" HeaderStyle-Width="100px"
                                                                        
                                                                    >
                                                                         
                                                                </telerik:GridNumericColumn>
                                                                <telerik:GridDateTimeColumn HeaderStyle-Width="130px" DataField="CreationDate" HeaderText="Created On"
                                                                    FilterControlWidth="100px" CurrentFilterFunction="Contains" PickerType="DatePicker"
                                                                    DataFormatString="{0:MM/dd/yyyy}" SortExpression="CreationDate">
                                                                </telerik:GridDateTimeColumn>
                                                                <telerik:GridNumericColumn DataField="TotalAmount" HeaderText="Total Amount" SortExpression="TotalAmount"
                                                                    HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" DataType="System.Decimal"
                                                                    FilterControlWidth="70px" DataFormatString="{0:#,##0.00}">
                                                                    <FooterStyle Font-Bold="true" />
                                                                </telerik:GridNumericColumn>
                                                                <telerik:GridBoundColumn DataField="RequestedFrom_Email" HeaderText="Requested From"
                                                                    SortExpression="RequestedFrom_Email">
                                                                </telerik:GridBoundColumn>
                                                                <telerik:GridBoundColumn DataField="SuggestedVendor" HeaderText="Suggested Vendor"
                                                                    SortExpression="SuggestedVendor" UniqueName="SuggestedVendor">
                                                                </telerik:GridBoundColumn>
    <telerik:GridTemplateColumn HeaderText="Describe Reason and Reject" UniqueName="rejectrequest"
                                                                    AllowFiltering="false">
                                                                    <ItemTemplate>
                                                                        <table width="240px" cellpadding="0" cellspacing="0">
                                                                            <tr valign="top">
                                                                                <td>
                                                                                    <asp:Label ID="lblNextApprovalRequiredFor" runat="server" Visible="false" Text='<%#Eval ( "NextApprovalRequiredFor").ToString()%>'></asp:Label>
                                                                                    <asp:Label ID="lblUnder5000ApprovedORRejected" runat="server" Visible="false" Text='<%#Eval ( "Under5000ApprovedORRejected").ToString()%>'></asp:Label>
                                                                                    <asp:Label ID="lblOver5000ApprovedORRejected" runat="server" Visible="false" Text='<%#Eval ( "Over5000ApprovedORRejected").ToString()%>'></asp:Label>
                                                                                    <asp:Label ID="lblFinanceApprovedORRejected" runat="server" Visible="false" Text='<%#Eval ( "FinanceApprovedORRejected").ToString()%>'></asp:Label>
                                                                                    <asp:Label ID="lblOver25000CFOApprovedORRejected" runat="server" Visible="false"
                                                                                        Text='<%#Eval ( "Over25000CFOApprovedORRejected").ToString()%>'></asp:Label>
                                                                                    <asp:Label ID="lblOver25000COOApprovedORRejected" runat="server" Visible="false"
                                                                                        Text='<%#Eval ( "Over25000COOApprovedORRejected").ToString()%>'></asp:Label>
                                                                                    <asp:Label ID="lblOver25000CEOApprovedORRejected" runat="server" Visible="false"
                                                                                        Text='<%#Eval ( "Over25000CEOApprovedORRejected").ToString()%>'></asp:Label>
                                                                                    <asp:Label ID="lblRejectedMessage" runat="server" Text="Rejected"></asp:Label>
                                                                                    <asp:TextBox Width="150px" runat="server" MaxLength="150" ValidationGroup="vgRejection"
                                                                                        ID="txtRejectionReason" ToolTip="Enter Rejection Reason"></asp:TextBox>
                                                                                    <%--                                                            <asp:RequiredFieldValidator 
                                                                    ID="rvRejectionReason" 
                                                                    Display="Dynamic"
                                                                    ValidationGroup="vgRejection"
                                                                    runat="server" 
                                                                    SetFocusOnError="true"
                                                                    ControlToValidate="txtRejectionReason" 
                                                                    ErrorMessage="Enter Rejection Reason" 
                                                                    ToolTip="Enter Rejection Reason">
                                                                </asp:RequiredFieldValidator>                        
    --%>
                                                                                    <asp:Button CssClass="ButtonCSS" runat="server" ID="btnRejectRequest" Text="Reject"
                                                                                        ToolTip="Click Here to Reject Request" CausesValidation="true" ValidationGroup="vgRejection"
                                                                                        OnClick="btnRejectRequest_Click" OnClientClick="javascript:var agree= confirm('Are you sure you want to reject this Request? '); if(agree){ Page_BlockSubmit = false;buttonClicked_WithObj(this); return true; };else {return false;};"
                                                                                        CommandArgument='<%# 
                                                                    Eval ( "RequestInfoID").ToString() 
                                                                    + ";" +
                                                                    Eval ( "NextApprovalRequiredFor").ToString() 
                                                                    + ";" +
                                                                    Eval ( "TotalAmount").ToString() 
                                                                      
                                                                    %>' />
                                                                                </td>
                                                                            </tr>
                                                                        </table>
                                                                    </ItemTemplate>
                                                                </telerik:GridTemplateColumn>
                                                                <telerik:GridBoundColumn DataField="Request_Current_Status_DisplayText" HeaderText="Current Status"
                                                                    SortExpression="Request_Current_Status_DisplayText" UniqueName="Request_Current_Status_DisplayText">
                                                                </telerik:GridBoundColumn>
                                                                <telerik:GridTemplateColumn HeaderText="Cancel Request" UniqueName="cancelrequest">
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="lblCancelled" runat="server" Visible="false" Text='<%#Eval ( "Cancelled").ToString()%>'></asp:Label>
                                                                        <asp:Label runat="server" ID="lblCompleted" Text='<%# Eval("Completed").ToString()%>'
                                                                            Visible="false"></asp:Label>
                                                                        <asp:Label runat="server" ID="lblCompletedMessage" Text='<%# Eval("CompletedStatus").ToString()%>'></asp:Label>
                                                                        <asp:Label runat="server" ID="lblCancellationStatus" Text='<%# Eval("CancellationStatus").ToString()%>'></asp:Label>
                                                                        <asp:Button CssClass="ButtonCSS" runat="server" ID="btnCancelRequest" Text="Cancel Request"
                                                                            ToolTip="Click Here to cancel Request" CausesValidation="False" OnClick="btnCancelRequest_Click"
                                                                            OnClientClick="javascript:var agree= confirm('Are you sure you want to cancel/delete this Request? '); if(agree){ Page_BlockSubmit = false;buttonClicked_WithObj(this); return true; };else {return false;};"
                                                                            CommandArgument='<%# Eval ( "RequestInfoID").ToString() %>' />
                                                                    </ItemTemplate>
                                                                </telerik:GridTemplateColumn>
                                                                <telerik:GridTemplateColumn HeaderText="Request No." SortExpression="RequestInfoID"
                                                                    AllowFiltering="false" Visible="false" UniqueName="requestinfoid">
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="lblRequestInfoID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "RequestInfoID")%>'></asp:Label></ItemTemplate>
                                                                </telerik:GridTemplateColumn>
                                                            </Columns>
                                                            <EditFormSettings>
                                                                <PopUpSettings ScrollBars="None" />
                                                            </EditFormSettings>
                                                            <ExpandCollapseColumn Resizable="False" Visible="False">
                                                                <HeaderStyle />
                                                            </ExpandCollapseColumn>
                                                            <RowIndicatorColumn Visible="False">
                                                                <HeaderStyle />
                                                            </RowIndicatorColumn>
                                                        </MasterTableView>
                                                    </telerik:RadGrid>
                                                </div>






  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 31 Jan 2011 Link to this post

    Hello Nirav,

    I took the sample code you provided and put it in a sample page following a similar scenario you have, but I cannot reproduce the behavior you are describing. I am attaching the page for your reference. Please let me know if you manage to reproduce what you are getting in this project, and what steps to follow, so that we can test it too.

    All the best,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 31 Jan 2011 Link to this post

    Hi,
    Thanks for this.
    But like I said, I could not reproduce it on my local development machine.
    Everything works fine on my local machine but when I deployed it on my Test Server, this is happening only on Test Server.

    when any one access application from my machine, everything is fine. Icon is displayed next to filter textbox. But when anyone access application from Test Server, for that specific field Icon is displayed on next line.

    I could not reproduce this on my local machine yet. I tried so many different options, tried setting width and everything but nothing worked on Test Server.

    So after trying so many things, I changed that column from <telerik:GridNumericColumn To <telerik:GridTemplateColumn. And that looks fine on Test Server also now. But there is one thing that I am still finding for. Now how do I make sure that user can enter only numeric values in search textbox while using ItemTemplate?
    Here is what I added instead of <telerik:GridNumericColumn.
    <telerik:GridTemplateColumn HeaderText="Request No."
     DataType="System.Int64" 
        DataField="RequestInfoID" SortExpression="RequestInfoID">
        <ItemTemplate>
            <asp:Label ID="lblRequestInfoIDForFilter" 
            runat="server" Text='<%# Eval ( "RequestInfoID").ToString()%>'></asp:Label>
        </ItemTemplate>
    </telerik:GridTemplateColumn>


    That worked fine and icon is now getting displayed next to the textbox. The only problem is that filter textbox accepts any text value but I want it to accept only numeric values. Is there any way that I can define here to accept only numeric values?
    When I had <telerik:GridNumericColumn, it automatically added validation for filter textbox that did allow to enter only numeric values.
    So can you tell me how do I add numericvalidation to this filter textbox for this column?

    Thanks
  4. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 03 Feb 2011 Link to this post

    Hi Nirav,

    Can you please try setting <nobr> tag around the filter cells as below and see if it resolves the problem with filter icon when you use GridNumericColumn:
    C#:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
      {
          if (e.Item is GridFilteringItem)
          {
              foreach (TableCell cell in e.Item.Cells)
              {
                  if (cell.Controls.Count > 0)
                  {
                      cell.Controls.AddAt(0, new LiteralControl("<nobr>"));
                      cell.Controls.Add(new LiteralControl("</nobr>"));
                  }
              }
          }
      }

    Regards,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 03 Feb 2011 Link to this post

    Excellent. This worked.
    Now filter icon is displayed next to filter textbox even on my Test Server.

    Thanks a lot.

  6. Dean Brown
    Dean Brown avatar
    2 posts
    Member since:
    Oct 2012

    Posted 16 Oct 2012 Link to this post

    This is how to reproduce the issue: In IE8, and in the developer tools window (on the Browser Mode main manu), swap between the two browser modes (Internet Explorer 7 and Internet Explorer 8). On IE7, the issue is not present. In IE8, the icon goes beneath the filter text box.

    The previous post fixes it, on my machine in both modes.
  7. Graeme Mc
    Graeme Mc avatar
    17 posts
    Member since:
    Aug 2009

    Posted 22 Oct 2012 Link to this post

    Hi,
    This solution didn't work for me on IE (versions 7,8 and 9). One of the problems is that we need to be able to set the properties for the filter on the skin because we have many RadGrids on various pages. Is there a way to do this?

    Thanks,
    Graeme
  8. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 23 Oct 2012 Link to this post

    are you having same issue that filter icon is displayed underneath filter textbox?
    If so, this should have fixed that. 
    If not, please post your code.
  9. Graeme Mc
    Graeme Mc avatar
    17 posts
    Member since:
    Aug 2009

    Posted 24 Oct 2012 Link to this post

    Yes, please see attached image, displaying what happens on IE7 when the screen is resized to a smaller size.
    On IE8 and IE9, it seems to be ok, except that the filter icons get slightly cut off.

    css:
    .rgFilterRow .rgFilterBox {float: left; width:70px;  }
    .rgFilterRow .RadComboBox table td.rcbInputCell, .RadComboBox .rcbInputCell .rcbInput .element.style { width: 120px !important; }
    .rgDataDiv td { white-space: nowrap; text-overflow: ellipsis; }

    skin:
    <telerik:RadGrid runat="server" AllowPaging="True" GridLines="None"
                     PageSize="15" AllowSorting="True" AllowMultiRowSelection="false"
                     AutoGenerateColumns="false" EnableLinqExpressions="false">
        <FilterMenu EnableAjaxSkinRendering="true" />
        <GroupingSettings ShowUnGroupButton="True" CaseSensitive="false" />
        <ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True"
                        ReorderColumnsOnClient="False" EnableRowHoverStyle="True" >
            <ClientEvents OnRowClick="RowClick" />
            <Selecting AllowRowSelect="true" />
            <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="true" />
            <Resizing AllowColumnResize="true" ClipCellContentOnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="True" />
        </ClientSettings>   
        <MasterTableView TableLayout="Fixed" Width="100%" />
    </telerik:RadGrid>
  10. Graeme Mc
    Graeme Mc avatar
    17 posts
    Member since:
    Aug 2009

    Posted 24 Oct 2012 Link to this post

    And another issue is that on all browsers except Firefox, the filter icons are being clipped when I reduce the window size. Please see attached image.

    Any ideas why this is?
  11. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 25 Oct 2012 Link to this post

    Hi,

    I suggest that you try setting FilterControlWidth property for the columns in px and see if it helps.

    Here is an example
    http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/filtering/defaultcs.aspx

    Regards,
    Pavlina
    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.
  12. Graeme Mc
    Graeme Mc avatar
    17 posts
    Member since:
    Aug 2009

    Posted 25 Oct 2012 Link to this post

    Thanks, I've seen that example, but the problem is it's not just one grid that I need to fix. We have many grid on various pages and I don't want to set the widths on every page. It needs to be controlled centrally by a skin/css. I've mostly fixed this using the following css:

    /* RadGrid Filters */
    .rgFilterRow td { width: 100%;}
    .rgFilterRow .rgFilter {width:30% !important; }
    .rgFilterRow .rgFilterBox {width:70% !important; }
    .rgFilterRow .RadComboBox_Default  {width:100% !important}

    The only issues that remain are:
    1. When resizing the window, the grid flickers a bit (I presume when the css kicks in?), which is annoying but not too serious
    2. On IE7, the filter icon moves over the date picker (see attached image)

    Any suggestions (particularly with number 2)?
  13. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 30 Oct 2012 Link to this post

    Hi Nirav,

    I tried to replicate the described problem with filter icon in IE7 in the following online example, but to no avail.
    http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/filtering/defaultcs.aspx

    Give it a try and let me know what is the difference in your case.

    Regarding grid flickering - when scrolling and static headers are enabled the control always needs to readjust its layout with some Javascript calculations during window resize, so some flickering is expected.

    The flickering may be reduced if there are enough data rows in RadGrid, so that there is always a vertical scrollbar.

    All the best,
    Pavlina
    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.
  14. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 02 Nov 2012 Link to this post

    Hi Greame,
    Sorry for late reply. 

    Actually my problem was that filter icon was displayed underneath filter textbox. 
    Yours seems some different issue. 
    I saw the image you posted. This seems some wrapping issue.
    Not sure really. 

    I suggest create a new question for this.
    I am sure Telerik Support Team will identify this issue also.

    Sorry again, 

    Nirav

  15. Swarna
    Swarna avatar
    1 posts
    Member since:
    Jun 2013

    Posted 17 Dec 2013 Link to this post

    I have a similar problem, filter icon is showing up in next line for a griddatetime column(beneath date picker). and this happens only on IE11.
  16. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 20 Dec 2013 Link to this post

    Hi Swarna,

    Can you try setting FilterControlWidth property for the Grid Column and see if it makes any difference?

    Regards,
    Pavlina
    Telerik
    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 the blog feed now.
  17. Brahim
    Brahim avatar
    1 posts
    Member since:
    Aug 2017

    Posted 27 Aug 2017 Link to this post

    Hi, 

     

    Just as a matter of note for anyone else out there still having this problem. 

    I am using the 2017.2.711 version and ran into this issue when I had multiple grids on the one page.

    As per above suggestions I tried adding the <nobr></nobr> tags around the filterbox to no avail and also set the FilterControlWidth property, this also did not fix the issue

     

    I did find that adding the below did fix it. 

     

    Hope this helps someone

     

    .RadGrid_Glow input.rgFilterBox {
        float: left;
    }

     

Back to Top