Cannot set Filter control width.

[Gary]

Just starting with RadGrid control.  Adding and configuring the basic for the grid was easy.  Had problems with getting the column to set to a specific width, but fix that issue with TableLayout attribute to "Fixed" instead of "Auto".  The problem I'm having now is the Filter controls are too wide.  So I tried to used the "FilterControlWidth" attribute for the column, but it's not working.  What am I missing?  See code below.  TIA, Gary

    <telerik:RadGrid ID="rgDCR" runat="server" AllowFilteringByColumn="True"
        AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
        DataSourceID="BCRDataSource" GridLines="Vertical" Skin="Hay" >
        <ClientSettings AllowColumnsReorder="true">
        </ClientSettings>
        <MasterTableView datakeynames="BCRkey" datasourceid="BCRDataSource" TableLayout="Fixed">
            <Columns>
                <telerik:GridHyperLinkColumn
                    HeaderText="BCR Request No."
                    SortExpression="BCRRequestNumber"
                    DataTextFormatString="{0}"
                    DataNavigateUrlFields="BCRkey"
                    UniqueName="BCRRequestNumber"
                    DataNavigateUrlFormatString="~/BCRRequest.aspx?BCRPKey={0}"
                    DataTextField="BCRRequestNumber"
                    FilterControlWidth="40px"
                    >
<HeaderStyle Width="60px"></HeaderStyle>
                </telerik:GridHyperLinkColumn>
                <telerik:GridBoundColumn
                    DataField="BCRRequestedDate"
                    DataType="System.DateTime"
                    HeaderText="Request Date"
                    SortExpression="BCRRequestedDate"
                    UniqueName="BCRRequestedDate"
                    DataFormatString="{0:dd-MMM-yyyy}"
                    FilterControlWidth="40px"
                    >
<HeaderStyle Width="60px"></HeaderStyle>
               </telerik:GridBoundColumn>
                <telerik:GridBoundColumn
                    DataField="BCREffectiveDate"
                    DataType="System.DateTime"
                    HeaderText="Effective Date"
                    SortExpression="BCREffectiveDate"
                    UniqueName="BCREffectiveDate"
                    DataFormatString="{0:dd-MMM-yyyy}"
                    FilterControlWidth="40px"
                    >
<HeaderStyle Width="60px"></HeaderStyle>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn
                    DataField="BCRDescription"
                    HeaderText="Request Description"
                    SortExpression="BCRDescription"
                    UniqueName="BCRDescription"
                    FilterControlWidth="180px"
                    >
<HeaderStyle Width="200px"></HeaderStyle>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn
                    DataField="BCRFirstName"
                    HeaderText="First Name"
                    SortExpression="BCRFirstName"
                    UniqueName="BCRFirstName"
                    FilterControlWidth="40px"
                    >
<HeaderStyle Width="60px"></HeaderStyle>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn
                    DataField="BCRLastName"
                    HeaderText="Last Name"
                    SortExpression="BCRLastName"
                    UniqueName="BCRLastName"
                    FilterControlWidth="40px"
                    >
<HeaderStyle Width="60px"></HeaderStyle>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn
                    DataField="BCRStatus"
                    HeaderText="Status"
                    SortExpression="BCRStatus"
                    UniqueName="BCRStatus"
                    FilterControlWidth="40px"
                    >
<HeaderStyle Width="60px"></HeaderStyle>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn
                    DataField="BCRLastUpdated"
                    DataType="System.DateTime"
                    HeaderText="Last Updated"
                    SortExpression="BCRLastUpdated"
                    UniqueName="BCRLastUpdated"
                    DataFormatString="{0:dd-MMM-yyyy}"
                    FilterControlWidth="40px"
                    >
<HeaderStyle Width="60px"></HeaderStyle>
                </telerik:GridBoundColumn>
            </Columns>
            <FilterItemStyle Width="50px" />
        </MasterTableView>
    </telerik:RadGrid>
    <asp:ObjectDataSource ID="BCRDataSource" runat="server" SelectMethod="SelectRows" TypeName="BLL.BCRBLL"></asp:ObjectDataSource>

[Princy]

Hi Gary,

I tried setting the FilterControlWidth property for the Grid Column and it is working fine. I am not sure what is happening on your end. One another suggestion will be to set the width for the filter textbox in the code behind as shown below.

CS:

protected void rgDCR_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridFilteringItem)
        {
            GridFilteringItem filterItem = (GridFilteringItem)e.Item;
            ((TextBox)filterItem["BCRRequestedDate"].Controls[0]).Width = Unit.Pixel(40);
        }
   }

Princy

[Gary]

Princy,

The code-behind worked, but it's unfortunate that the markup didn't work.  I was able to do everything required in markup except set the filter control width.  I thought maybe the div html tag around the grid might be causing the problem, but it was not.  Although, it did change the size of filter controls, but many were still overlapping.  At this point, I'm just happy to see it work and be able to move on to my next task.  Thanks, Gary.

[Roger]

Hi Gary,Princy,

I want to try same but in my case i don't know the column name  

protected void rgDCR_ItemDataBound(object sender, GridItemEventArgs e)  
    {  
        if (e.Item is GridFilteringItem)  
        {  
            GridFilteringItem filterItem = (GridFilteringItem)e.Item;  
            ((TextBox)filterItem[ ].Controls[0]).Width = Unit.Pixel(40);  
        }  
   }  

May i know what am I missing or what can i use in this case.

[Eyup]

Hello Roger,

You can achieve this requirement using the following approach:

protected void RadGrid1_DataBinding(object sender, EventArgs e)
{
    foreach (GridColumn col in RadGrid1.MasterTableView.RenderColumns)
    {
        col.FilterControlWidth = 40;
    }
}

Hope this helps. Please give it a try and let me know if it works for you.

Regards,
Eyup
Telerik

[Roger]

Thanks Eyup, But it appears to work only for few fields. I have set the FilterControlWidth to 10, so as to make it more distinguishable. Please check the attached image. The data is from AdventureWorks2008 database (Sample Database provided by Microsoft) - if you wish to replicate at your side. I think the problem is the DataType of the column, not sure though. please let me know, how can i fix this.

Setting FilterControlWidth programmatically is even weird on column of DateTime Datatype. It would be great if you can also tell me how to set the width to 100% of the column size. 

 

[Roger]

Thanks Eyup, It did really work!. Actually while i was trying to fix this, i have added some style to width through css for filter textboxes. As soon as i removed it, everything looked fine. I was also able to set the width in percentage as shown below.

col.FilterControlWidth = Unit.Percentage(80);

Thanks again for all your help.

[Eyup]

Hello Roger,

I'm glad the suggested solution has proven helpful.
The advantage of this approach is that it is generic for all kind of columns and it is set only once instead of manually setting it for every column defined in the aspx page.

Regards,
Eyup
Telerik