stop wrapping of filter text box

12 posts, 0 answers
  1. John Davis
    John Davis avatar
    119 posts
    Member since:
    Apr 2007

    Posted 30 Mar 2009 Link to this post

    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>

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 Mar 2009 Link to this post

    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.
  3. John Davis
    John Davis avatar
    119 posts
    Member since:
    Apr 2007

    Posted 31 Mar 2009 Link to this post

    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>

     

  4. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 03 Apr 2009 Link to this post

    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.
  5. Adam Ooten
    Adam Ooten avatar
    15 posts
    Member since:
    Mar 2009

    Posted 22 Apr 2009 Link to this post

    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?
  6. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 24 Apr 2009 Link to this post

    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.
  7. Adam Ooten
    Adam Ooten avatar
    15 posts
    Member since:
    Mar 2009

    Posted 24 Apr 2009 Link to this post

    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.
  8. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 24 Apr 2009 Link to this post

    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.
  9. Adam Ooten
    Adam Ooten avatar
    15 posts
    Member since:
    Mar 2009

    Posted 27 Apr 2009 Link to this post

    I just submitted a support ticket with a project attached that shows the error I am having.
  10. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 27 Apr 2009 Link to this post

    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.
  11. Adam Ooten
    Adam Ooten avatar
    15 posts
    Member since:
    Mar 2009

    Posted 28 Apr 2009 Link to this post

    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 ;
    }
  12. Celeste
    Celeste avatar
    4 posts
    Member since:
    Aug 2013

    Posted 06 Jan 2017 Link to this post

    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
Back to Top