Filter Column for DateTime puts filter icon on row below

[Martin]

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

[SamJ]

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

[Martin]

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?

[SamJ]

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

[Martin]

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

[Jayesh Goyani]

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

[SamJ]

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.

[anu]

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
                              

[Eyup]

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