stop wrapping of filter text box

[John Davis]

1. The first filter (for a date column) wraps, such that the filter icon is below the text box instead of to the right.
How can I resize or keep it from wrapping?  I tried many different filter sizes in the aspx and TableLayout="auto"
and TableLayout="fixed".  It looks like there is not enough space for the text box, the date picker icon, and the filter icon.

2. I tried this technique:
http://www.telerik.com/help/aspnet-ajax/grdsettingfiltertextboxdimensions.html

But I do not know what value to use for "ContactName" in:
TextBox box = filteringItem["ContactName"].Controls[0] as TextBox;

I tried the Unique Name for the GridDateTimeColumn but it did not work

3. I tried this technique. It executed without error, but it did not change anything.  Do I need to delete the size declarations in the aspx? Or does this code override?
http://www.telerik.com/community/code-library/aspnet-ajax/grid/filter-textbox-sizing.aspx

4. aspx below

<rad:RadGrid ID="RadGrid1" Font-Size="Smaller" runat="server" PageSize="40" AllowPaging="True"
AutoGenerateColumns="False" ShowStatusBar="True" GridLines="None" MasterTableView-NoMasterRecordsText="No records; try different settings"
DataSourceID="MasterDatasource1" OnInit="RadGrid1_Init" AllowFilteringByColumn="True" AllowSorting="True"
Width="989px" OnItemCreated="RadGrid1_ItemCreated" >
<PagerStyle Mode="Slider" />
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">
</Scrolling>
<Selecting AllowRowSelect="true" />
</ClientSettings>
<MasterTableView AutoGenerateColumns="False" Width="100%" DataKeyNames="Day" TableLayout="auto">
<ExpandCollapseColumn Visible="True"></ExpandCollapseColumn>
<Columns>
 <rad:GridDateTimeColumn DataField="Day" HeaderText="Day" UniqueName="Day" ReadOnly="true" DataFormatString="{0:d}" 
 PickerType="DatePicker" FilterControlWidth="90px" >
 <HeaderStyle Width="160px" />
 <ItemStyle Width="160px" />
 </rad:GridDateTimeColumn>
 <rad:GridBoundColumn DataField="MinPerPickTicket" HeaderText="MinPerPickTicket" UniqueName="MinPerPickTicket" ReadOnly="true" DataFormatString="{0:#,###.##}" FilterControlWidth="50px" >
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="SecPerPickLin" HeaderText="SecPerPickLin" UniqueName="SecPerPickLin" ReadOnly="true" FilterControlWidth="50px" >
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="SecPerQtyToPick" HeaderText="SecPerQtyToPick" UniqueName="SecPerQtyToPick" ReadOnly="true" FilterControlWidth="50px" >
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="PickDuration" HeaderText="PickDuration" UniqueName="PickDuration" ReadOnly="true" FilterControlWidth="50px" >
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="NumPickTicket" HeaderText="PickTicket" UniqueName="NumPickTicket" ReadOnly="true" FilterControlWidth="50px" >
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="NumPickLin" HeaderText="PickLine"  UniqueName="NumPickLin" ReadOnly="true" FilterControlWidth="50px" >
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="QtyToPick" HeaderText="ToPick" UniqueName="QtyToPick" ReadOnly="true" FilterControlWidth="50px" >
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="QtyPicked" HeaderText="Picked" UniqueName="QtyPicked" ReadOnly="true" FilterControlWidth="50px" >
 </rad:GridBoundColumn>
</Columns>
<DetailTables>
<rad:GridTableView DataSourceID="DetailDataSource1" Name="DS1Detail"
CellSpacing="-1">
<ParentTableRelation>
 <rad:GridRelationFields DetailKeyField="Day" MasterKeyField="Day" />
</ParentTableRelation>
<Columns>
  <rad:GridBoundColumn DataField="PickTicket" HeaderText="PickTicket" UniqueName="PickTicket">
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="PickDurationSecPerPickLin" HeaderText="PickDurationSecPerPickLin" UniqueName="PickDurationSecPerPickLin">
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="PickDurationSecPerQtyToPick" HeaderText="PickDurationSecPerQtyToPick" UniqueName="PickDurationSecPerQtyToPick">
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="PickDurationSec" HeaderText="PickDurationSec" UniqueName="PickDurationSec">
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="NumPickLin" HeaderText="NumPickLin" UniqueName="NumPickLin">
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="QtyToPick" HeaderText="QtyToPick" UniqueName="QtyToPick">
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="QtyPicked" HeaderText="QtyPicked" UniqueName="QtyPicked">
  </rad:GridBoundColumn>
</Columns>
</rad:GridTableView>
</DetailTables>
</MasterTableView>
</rad:RadGrid>

[Princy]

Hi John,

Try setting the width of the columns such that the filter row does not wrap and also adjust the width of the grid accordingly together with TableLayout property set to fixed and it should probably help you achieve the required.
aspx:

<telerik:RadGrid ID="RadGrid2" AllowFilteringByColumn="true" Width="300px" runat="server">
    <MasterTableView TableLayout="Fixed" DataSourceID="SqlDataSource1" >
       <Columns>
         <telerik:GridBoundColumn HeaderText="Column1" UniqueName="Column1">
         <HeaderStyle Width="100px" />
</telerik:GridBoundColumn>
         <telerik:GridBoundColumn HeaderText="Column2" UniqueName="Column2">
         <HeaderStyle Width="100px" />
</telerik:GridBoundColumn>
         <telerik:GridBoundColumn HeaderText="Column3" UniqueName="Column3">
          <HeaderStyle Width="100px" />
</telerik:GridBoundColumn>
       </Columns>

Thanks
Princy.

[John Davis]

Princy,

Is there anything else I may try?

With the aspx below, I have set  <MasterTableView TableLayout="Fixed" as you suggested.
The total header widths are equal to the radgrid width.

When displayed, the "Day" column header width is much less than the others. The filter text box for "Day" is VERY narrow. To its right is a calendar icon, and below it is the filter icon.

However the column item widths are as specified for the header widths. The item widths seem correct.

The header text and the filter boxes are correctly aligned vertically, but they are not aligned with the item data in the rows below.

For example, the left side of the 2nd column header, MinPerPickTicket, is over the middle of the data in the 1st column, "Day", and the right side
of this header ends prior to the left side of the 2nd data item.

When I reduce the  <HeaderStyle Width="100px" /> to  <HeaderStyle Width="50px" /> for all columns except the first,
then the column widths for items are reduced accordingly, but the headers and filter boxes look exactly the same as before.

Steve

<div style="background: url(Images/GridBg1500RptBox1.jpg) no-repeat; padding: 7px 5px;
width: 1022px;">
<div style="padding: 4px 30px;">
&nbsp;&nbsp; <span class="titleGrid">Picking</span></div>
<rad:RadGrid ID="RadGrid1" Font-Size="Smaller" runat="server" PageSize="40" AllowPaging="True"
AutoGenerateColumns="False" ShowStatusBar="True" GridLines="None" MasterTableView-NoMasterRecordsText="No records; try different settings"
DataSourceID="MasterDatasource1" OnInit="RadGrid1_Init" AllowFilteringByColumn="True" AllowSorting="True"
Width="989px" OnItemCreated="RadGrid1_ItemCreated" >
<PagerStyle Mode="Slider" />
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">
</Scrolling>
<Selecting AllowRowSelect="true" />
</ClientSettings>
<MasterTableView AutoGenerateColumns="False" DataKeyNames="Day" TableLayout="fixed">
<ExpandCollapseColumn Visible="True"></ExpandCollapseColumn>
<Columns>
 <rad:GridDateTimeColumn DataField="Day" HeaderText="Day" UniqueName="Day" ReadOnly="true" DataFormatString="{0:d}" 
 PickerType="DatePicker" >
 <HeaderStyle Width="189px" />
 </rad:GridDateTimeColumn>
 <rad:GridBoundColumn DataField="MinPerPickTicket" HeaderText="MinPerPickTicket" UniqueName="MinPerPickTicket" ReadOnly="true" DataFormatString="{0:#,###.##}" >
 <HeaderStyle Width="100px" />
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="SecPerPickLin" HeaderText="SecPerPickLin" UniqueName="SecPerPickLin" ReadOnly="true" >
  <HeaderStyle Width="100px" />
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="SecPerQtyToPick" HeaderText="SecPerQtyToPick" UniqueName="SecPerQtyToPick" ReadOnly="true" >
  <HeaderStyle Width="100px" />
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="PickDuration" HeaderText="PickDuration" UniqueName="PickDuration" ReadOnly="true" >
  <HeaderStyle Width="100px" />
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="NumPickTicket" HeaderText="PickTicket" UniqueName="NumPickTicket" ReadOnly="true" >
  <HeaderStyle Width="100px" />
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="NumPickLin" HeaderText="PickLine"  UniqueName="NumPickLin" ReadOnly="true" >
  <HeaderStyle Width="100px" />
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="QtyToPick" HeaderText="ToPick" UniqueName="QtyToPick" ReadOnly="true" >
  <HeaderStyle Width="100px" />
 </rad:GridBoundColumn>
 <rad:GridBoundColumn DataField="QtyPicked" HeaderText="Picked" UniqueName="QtyPicked" ReadOnly="true" >
  <HeaderStyle Width="100px" />
 </rad:GridBoundColumn>
</Columns>
<DetailTables>
<rad:GridTableView DataSourceID="DetailDataSource1" Name="DS1Detail"
CellSpacing="-1">
<ParentTableRelation>
 <rad:GridRelationFields DetailKeyField="Day" MasterKeyField="Day" />
</ParentTableRelation>
<Columns>
  <rad:GridBoundColumn DataField="PickTicket" HeaderText="PickTicket" UniqueName="PickTicket" ReadOnly="true" >
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="PickDurationSecPerPickLin" HeaderText="PickDurationSecPerPickLin" UniqueName="PickDurationSecPerPickLin" ReadOnly="true" >
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="PickDurationSecPerQtyToPick" HeaderText="PickDurationSecPerQtyToPick" UniqueName="PickDurationSecPerQtyToPick" ReadOnly="true" >
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="PickDurationSec" HeaderText="PickDurationSec" UniqueName="PickDurationSec" ReadOnly="true" >
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="NumPickLin" HeaderText="NumPickLin" UniqueName="NumPickLin" ReadOnly="true" >
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="QtyToPick" HeaderText="QtyToPick" UniqueName="QtyToPick" ReadOnly="true" >
  </rad:GridBoundColumn>
  <rad:GridBoundColumn DataField="QtyPicked" HeaderText="QtyPicked" UniqueName="QtyPicked" ReadOnly="true" >
  </rad:GridBoundColumn>
</Columns>
</rad:GridTableView>
</DetailTables>
</MasterTableView>
</rad:RadGrid>

 

[Dimo]

Hello John,

Judging by your support tickets, you are using IE8 and Q1 2009. This is the reason why the filtering row does not look as expected. Please upgrade to Q1 2009 SP1, released yesterday.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Adam Ooten]

I am using the newest internal build 2009.1.422.35.

I am still getting this issue on IE8 and actually on IE7 and IE6 too.  I get it on IE8 with or without the compatibility meta tag.  But if I use the "Compatibility View" button on IE8 then it looks right.  Crazy :)

My grids are using the UseStaticHeaders="True" and  AllowScroll="True" if that makes any difference.  The issue is definitely only on GridDateTimeColumns.

Any ideas?

[Dimo]

Hello Adam,

Since you have explicit column widths, the best option is to use the FilterControlWidth property to set width to the filtering date picker inside the date column.

Here is an example:

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

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Adam Ooten]

I have already tried the FilterControlWidth.  That does not fix the problem.  No matter the size set on the FilterControlWidth, the filter icon always goes to the 2nd line for a DateTimeColumn.

[Dimo]

Hi Adam,

In this case I will appreciate if you send me a simple runnable web page, so that I can reproduce the undesired behavior and give further advice. (Please use the format code block tool to paste the page code here or use a support ticket to attach an ASPX file). Thank you.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Adam Ooten]

I just submitted a support ticket with a project attached that shows the error I am having.

[Sebastian]

Hello Adam,

We will review the example and will get back to you with our findings.

Best,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Adam Ooten]

Here is the fix for this folks:

The problem is caused by the IE8 meta tag.

<

 

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

 

The browser reports itself as IE8, but behaves like IE7. This confuses the date picker controls, which are rendered with some browser-specific styles (in order to display like inline-block elements).

Here is the workaround:
.rgFilterRow  .RadPicker
{
       float: left ;
}

[Celeste]

Just FYI, I tried all these solutions and none worked. What worked was setting HeaderStyle-Wrap="false". I use IE11 and am running UI for AJAX Q2 2016