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

Filter Column for DateTime puts filter icon on row below

8 Answers 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 30 Mar 2012, 06:32 PM
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

8 Answers, 1 is accepted

Sort by
0
SamJ
Top achievements
Rank 1
answered on 30 Mar 2012, 08:46 PM
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
0
Martin
Top achievements
Rank 1
answered on 30 Mar 2012, 08:52 PM
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?
0
SamJ
Top achievements
Rank 1
answered on 30 Mar 2012, 08:59 PM
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
0
Martin
Top achievements
Rank 1
answered on 30 Mar 2012, 09:09 PM

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

0
Jayesh Goyani
Top achievements
Rank 2
answered on 31 Mar 2012, 06:01 AM
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
0
SamJ
Top achievements
Rank 1
answered on 31 Mar 2012, 08:43 AM
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.
0
anu
Top achievements
Rank 1
answered on 09 Aug 2014, 07:06 AM
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
                              
0
Eyup
Telerik team
answered on 13 Aug 2014, 01:33 PM
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.

 
Tags
Grid
Asked by
Martin
Top achievements
Rank 1
Answers by
SamJ
Top achievements
Rank 1
Martin
Top achievements
Rank 1
Jayesh Goyani
Top achievements
Rank 2
anu
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or