This is a migrated thread and some comments may be shown as answers.

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

17 Answers 521 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nirav
Top achievements
Rank 1
Nirav asked on 28 Jan 2011, 11:29 PM
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>






17 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 31 Jan 2011, 03:01 PM
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.
0
Nirav
Top achievements
Rank 1
answered on 31 Jan 2011, 03:33 PM
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
0
Pavlina
Telerik team
answered on 03 Feb 2011, 09:57 AM
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.
0
Nirav
Top achievements
Rank 1
answered on 03 Feb 2011, 05:32 PM
Excellent. This worked.
Now filter icon is displayed next to filter textbox even on my Test Server.

Thanks a lot.

0
Dean Brown
Top achievements
Rank 1
answered on 16 Oct 2012, 07:20 PM
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.
0
Graeme Mc
Top achievements
Rank 1
answered on 22 Oct 2012, 10:46 AM
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
0
Nirav
Top achievements
Rank 1
answered on 23 Oct 2012, 05:33 PM
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.
0
Graeme Mc
Top achievements
Rank 1
answered on 24 Oct 2012, 08:24 AM
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>
0
Graeme Mc
Top achievements
Rank 1
answered on 24 Oct 2012, 11:06 AM
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?
0
Pavlina
Telerik team
answered on 25 Oct 2012, 01:23 PM
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.
0
Graeme Mc
Top achievements
Rank 1
answered on 25 Oct 2012, 03:44 PM
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)?
0
Pavlina
Telerik team
answered on 30 Oct 2012, 04:36 PM
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.
0
Nirav
Top achievements
Rank 1
answered on 02 Nov 2012, 07:09 PM
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

0
Swarna
Top achievements
Rank 1
answered on 17 Dec 2013, 06:21 PM
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.
0
Pavlina
Telerik team
answered on 20 Dec 2013, 04:17 PM
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.
0
Brahim
Top achievements
Rank 1
answered on 28 Aug 2017, 12:27 AM

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;
}

 

0
Ajay
Top achievements
Rank 1
answered on 02 Apr 2020, 07:34 AM

I faced this issue to only on IE browser,

None of above solutions worked for me.

I solved it by adding below style

 

.RadPicker_Metro {
    -ms-wrap-flow: end;
}

Tags
Grid
Asked by
Nirav
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Nirav
Top achievements
Rank 1
Dean Brown
Top achievements
Rank 1
Graeme Mc
Top achievements
Rank 1
Swarna
Top achievements
Rank 1
Brahim
Top achievements
Rank 1
Ajay
Top achievements
Rank 1
Share this question
or