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 523 Views

Grid

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

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

answered on 31 Jan 2011, 03:01 PM

FilterControlWidth.zip

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.

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

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

answered on 24 Oct 2012, 08:24 AM

filters.jpg

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>

answered on 24 Oct 2012, 11:06 AM

filters2.jpg

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?

answered on 25 Oct 2012, 03:44 PM

datepicker.jpg

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)?

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

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

17 Answers, 1 is accepted