Filter Column for DateTime puts filter icon on row below

9 posts, 0 answers
  1. Martin
    Martin avatar
    7 posts
    Member since:
    Mar 2012

    Posted 30 Mar 2012 Link to this post

    Hello,
    I have a RadGrid that has filtering enabled for a DateTime column.
    I'm building this in code behind:

    GridDateTimeColumn colEffectiveDate = new GridDateTimeColumn();
                radGridViewSearch.MasterTableView.Columns.Add(colEffectiveDate);
                colEffectiveDate.FilterListOptions = GridFilterListOptions.VaryByDataType;
                colEffectiveDate.DataField = "Effective_Date";
                colEffectiveDate.HeaderText = "Effective Date";
                colEffectiveDate.AllowFiltering = true;
                colEffectiveDate.AutoPostBackOnFilter = false;
                colEffectiveDate.FilterControlWidth = Unit.Pixel(200);
                colEffectiveDate.HeaderStyle.Width = Unit.Pixel(200);
                colEffectiveDate.DataFormatString = "{0:d}";


    The problem is that the filter icon keeps gettign placed below the date time picker:(see attached image)


    as you can see by the code I've tried to set the widths several times but have not been successful.
    Each time I set the width, the Textbox in the column filter just gets wider.

    Any ideas how
  2. SamJ
    SamJ avatar
    101 posts
    Member since:
    Jul 2008

    Posted 30 Mar 2012 Link to this post

    Hi Martin,

    The HeaderStyle.Width is for the width of the grid column. The FilterControlWidth is to set the width of the filter control, which is the date picker in your case. If these values are equal, it is normal that the filter icon cannot fit and goes to the next line.

    Try changing the values as below:
    colEffectiveDate.FilterControlWidth = Unit.Pixel(170);
    colEffectiveDate.HeaderStyle.Width = Unit.Pixel(200);

    Hope this works for you.

    SamJ
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin
    Martin avatar
    7 posts
    Member since:
    Mar 2012

    Posted 30 Mar 2012 Link to this post

    Hi SamJ,
    Thanks for your reply - it still seems to want to wrap (see image)

    the code changes I made are:

    GridDateTimeColumn colEffectiveDate = new GridDateTimeColumn();
                radGridViewSearch.MasterTableView.Columns.Add(colEffectiveDate);
                colEffectiveDate.HtmlEncode = true;
                colEffectiveDate.FilterListOptions = GridFilterListOptions.VaryByDataType;
                colEffectiveDate.DataField = "Effective_Date";
                colEffectiveDate.HeaderText = "Effective Date";
                colEffectiveDate.AllowFiltering = true;
                colEffectiveDate.AutoPostBackOnFilter = false;
                colEffectiveDate.FilterControlWidth = Unit.Pixel(100);
                colEffectiveDate.HeaderStyle.Width = Unit.Pixel(200);
                colEffectiveDate.DataFormatString = "{0:d}";


    Any ideas?
  5. SamJ
    SamJ avatar
    101 posts
    Member since:
    Jul 2008

    Posted 30 Mar 2012 Link to this post

    Hhmm, it seems that width settings are not applied at all!
    I see that you are adding the column dynamically. On which event do you add it and when/where is the grid declared?
    Are the filter controls wrapped on initial load or after certain action?

    SamJ
  6. Martin
    Martin avatar
    7 posts
    Member since:
    Mar 2012

    Posted 30 Mar 2012 Link to this post

    The grid is built in code behind entirely.
    Its housed within a SharePoint 2010 webpart and everything seems to be working well except for a few problems (like this one)

    the grid is and columns are added in the OnInit override


    protected override void OnInit(EventArgs e)
            {
                base.OnInit(e);
                this.Page.ClientScript.RegisterStartupScript(this.GetType(), this.ID, "_spOriginalFormAction = document.forms[0].action;_spSuppressFormOnSubmitWrapper=true;", true);
                if (this.Page.Form != null)
                {
                    string formOnSubmitAtt = this.Page.Form.Attributes["onsubmit"];
                    if (!string.IsNullOrEmpty(formOnSubmitAtt) && formOnSubmitAtt == "return _spFormOnSubmitWrapper();")
                    {
                        this.Page.Form.Attributes["onsubmit"] = "_spFormOnSubmitWrapper();";
                    }
                }
     
                ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
                if (scriptManager == null)
                {
                    scriptManager = new RadScriptManager();
                    this.Page.Form.Controls.AddAt(0, scriptManager);
                }
     
                // build the grid
                radGridViewSearch = new Telerik.Web.UI.RadGrid();
                radGridViewSearch.Skin = "Sunset";
                //radGridViewSearch.MasterTableView.DataKeyNames = new string[] { "Facility" };
                radGridViewSearch.AutoGenerateColumns = false;
                radGridViewSearch.AllowPaging = true;
                radGridViewSearch.PageSize = 25;
                radGridViewSearch.AllowFilteringByColumn = true;
                // per telerik: Depending on the data source, the filtering may be case-sensitive or case-insensitive. You can control this behavior using the GroupingSettings-CaseSensitive property
                radGridViewSearch.GroupingSettings.CaseSensitive = false;
                // advanced data filtering
                radGridViewSearch.NeedDataSource += new GridNeedDataSourceEventHandler(radGridViewSearch_NeedDataSource);
                // per telerik: In some .NET 3.5 scenarios you should also turn off the Linq expressions - EnableLinqExpressions="false"
                radGridViewSearch.EnableLinqExpressions = false;
                // needed?
                radGridViewSearch.MasterTableView.TableLayout = GridTableLayout.Auto;

    and the datetime column is added later

  7. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 31 Mar 2012 Link to this post

    Hello Martin,


    try with below code snippet.

    colEffectiveDate.FilterControlWidth = Unit.Pixel(400);
    colEffectiveDate.HeaderStyle.Width = Unit.Pixel(400);

    OR

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


    Thanks,
    Jayesh Goyani
  8. SamJ
    SamJ avatar
    101 posts
    Member since:
    Jul 2008

    Posted 31 Mar 2012 Link to this post

    Hi Martin,

    It is possible that the issue is related to the way you create the grid. Check this article.
    See, if you are adding the grid to the Page.Controls collection and then creating the columns, then the code is proper, e.g. columns are added as if you are defining the grid structure on Page_Load in the above sample.
    But is you are fist adding the columns and then adding the grid to the Page.Controls collection, you need to add the column the way it is in the Page_Init example in the above article.
  9. anu
    anu avatar
    6 posts
    Member since:
    Jul 2010

    Posted 09 Aug 2014 in reply to SamJ Link to this post

    I am also facing same issue even I am creating grid in my aspx page only. This issue is only for Internet Explorer. its working fine in firefox & chrome.
    My code :
     <telerik:GridDateTimeColumn DataField="JoiningDate" HeaderText="Joining Date" DataFormatString="{0:d}" FilterControlWidth="100px" UniqueName="JoiningDate">  </telerik:GridDateTimeColumn>

    even i tried adding below code too but no success:
     <HeaderStyle Width="450px"></HeaderStyle>

    Plz help.

    Regards,
    Anu
                                  
  10. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 13 Aug 2014 Link to this post

    Hello Anu,

    This problem is strange, indeed. I've created a sample RadGrid web site to test the described behavior and on my side the filter control is displayed on one line as expected. Can you please run the attached application and let me know if I am missing something out to reproduce the issue?

    Regards,
    Eyup
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017