[Solved] Filter Textbox Resizing Issue in IE 8

[Casey]

Hello,

I'm using version 2009.1.311.20 and IE 8. The following does not resize the filter textbox width for any of the filter items. If I switch to compatability mode the textboxes are resized, but the layout of the page is messed up. Here is the RadGrid definition and the event code.

Thanks,
Casey

RadGrid:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"
                 GridLines="None" Skin="Office2007"
                 DataSourceID="SqlDataSource1" oninit="RadGrid1_Init"
                 onitemcreated="RadGrid1_ItemCreated">
    <MasterTableView CellSpacing="-1" DataSourceID="SqlDataSource1">
            <CommandItemSettings RefreshText="" />
        <Columns>
            <telerik:GridBoundColumn UniqueName="column5"
            DataField="REQUESTOR_ID" Visible="false" Display="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Requestor" UniqueName="column"
            DataField="REQUESTOR">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Requested Person"  UniqueName="column1"
            DataField="REQUESTED_PERSON">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Personal Information System" UniqueName="column3"
            DataField="DESCRIPTION">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn HeaderText="Date/Time" UniqueName="column4"
            DataField="DATE_REQUESTED">
            </telerik:GridDateTimeColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Event Code:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridFilteringItem)
        {
            GridFilteringItem filteringItem = e.Item as GridFilteringItem;
            //set dimensions for the filter textbox
            TextBox box = filteringItem["column"].Controls[0] as TextBox;
            box.Width = Unit.Pixel(75);
            TextBox box1 = filteringItem["column1"].Controls[0] as TextBox;
            box1.Width = Unit.Pixel(100);
            TextBox box2 = filteringItem["column3"].Controls[0] as TextBox;
            box2.Width = Unit.Pixel(200);
            RadDatePicker box3 = filteringItem["column4"].Controls[0] as RadDatePicker;
            box3.Width = Unit.Pixel(100);
        }
    }
    protected void RadGrid1_Init(object sender, EventArgs e)
    {
        GridFilterMenu menu = RadGrid1.FilterMenu;
        int i = 0;
        while (i < menu.Items.Count)
        {
            if (menu.Items[i].Text == "NoFilter" ||
               menu.Items[i].Text == "Contains" ||
               menu.Items[i].Text == "EqualTo" ||
               menu.Items[i].Text == "GreaterThan" ||
               menu.Items[i].Text == "LessThan")
            {
                i++;
            }
            else
            {
                menu.Items.RemoveAt(i);
            }
        }

    }

[Casey]

Another issue I am experiencing with the RadGrid in IE8 is the following. When the RadGrid is in a <div>, and that <div> is following another <div> the border of the RadGrid does not appear in the <div> it should be contained in. Below is a sample, I had to put 12 breaks in before I declared the <div> that contains the RadGrid to move the border down. In IE6 the RadGrid appears inside the <div>; however, it is 12 breaks below the end of the first <div>. Is there a known issue with the RadGrid being used inside a <div>?

Thanks,
Casey

<div align="center">
    <asp:Label ID="Label1" runat="server" Text="Label1" Font-Bold="True" Font-Size="16" Font-Underline="True"></asp:Label>
</div>
<br />
<div>
<div style="float: left; margin-left: 225px">
    <asp:Label ID="Label2" runat="server" Text="Requestor:"
                AssociatedControlID="Requestor"></asp:Label>
    <br />
    <telerik:RadTextBox ID="Requestor" runat="server">
    </telerik:RadTextBox>
    <br />
    <br />
    <asp:Label ID="Label3" runat="server" Text="First Name:"
               AssociatedControlID="FirstName"></asp:Label>
    <br />
    <telerik:RadTextBox ID="FirstName" runat="server">
    </telerik:RadTextBox>
    <br />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
    ErrorMessage="RequiredFieldValidator" ControlToValidate="FirstName"
    Text="Please enter the first name to continue."></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="Label4" runat="server" Text="Last Name:"
               AssociatedControlID="LastName"></asp:Label>
    <br />
    <telerik:RadTextBox ID="LastName" runat="server">
    </telerik:RadTextBox>
    <br />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
    ErrorMessage="RequiredFieldValidator" ControlToValidate="LastName"
    Text="Please enter the last name to continue."></asp:RequiredFieldValidator>
</div>
<div style="float: right; margin-right:225px">
    <asp:Label ID="Label5" runat="server" Text="Personal Information System:"
               AssociatedControlID="PI_SYSTEM"></asp:Label>
    <br />
    <telerik:RadComboBox ID="PI_SYSTEM" runat="server"
        DataSourceID="SqlDataSource2" DataTextField="DESCRIPTION"
        DataValueField="PI_SYSTEM_ID" AppendDataBoundItems="true">
        <Items>
        <telerik:RadComboBoxItem Text="" runat="server" />
        </Items>
    </telerik:RadComboBox>
    <br />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
    ErrorMessage="RequiredFieldValidator" ControlToValidate="PI_SYSTEM"
    Text="Please select a system to proceed."></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="Label6" runat="server" Text="Date and Time:"
               AssociatedControlID="DateTime"></asp:Label>
    <br />
    <telerik:RadDateTimePicker ID="DateTime" runat="server"
        Culture="English (United States)">
<TimePopupButton ImageUrl="" HoverImageUrl="" Visible="False"></TimePopupButton>

<TimeView CellSpacing="-1" Enabled="False"></TimeView>

<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"
            ViewSelectorText="x" ShowRowHeaders="False"></Calendar>

<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
    </telerik:RadDateTimePicker>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
    ErrorMessage="RequiredFieldValidator" ControlToValidate="DateTime"
    Text="Please select a date to proceed."></asp:RequiredFieldValidator>
    <br />
    <br />
    <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Update</asp:LinkButton>
    <asp:HiddenField ID="REQUESTOR_ID" runat="server" />
    <asp:HiddenField ID="REQUESTOR_FNAME" runat="server" />
    <asp:HiddenField ID="REQUESTOR_LNAME" runat="server" />
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="width: 95%">
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"
                 GridLines="None" Skin="Office2007"
                 DataSourceID="SqlDataSource1" oninit="RadGrid1_Init"
                 onitemcreated="RadGrid1_ItemCreated"
                 AllowSorting="true">
<MasterTableView CellSpacing="-1" DataSourceID="SqlDataSource1" AllowSorting="true">
    <CommandItemSettings RefreshText="" />
    <Columns>
        <telerik:GridBoundColumn UniqueName="column5"
            DataField="REQUESTOR_ID" Visible="false" Display="false">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn HeaderText="Requestor" UniqueName="column"
            DataField="REQUESTOR" FilterControlWidth="150px">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn HeaderText="Requested Person" UniqueName="column1"
            DataField="REQUESTED_PERSON"
             FilterControlWidth="150px">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn HeaderText="Personal Information System" UniqueName="column3"
            DataField="DESCRIPTION" FilterControlWidth="200px">
        </telerik:GridBoundColumn>
        <telerik:GridDateTimeColumn HeaderText="Date/Time" UniqueName="column4"
            DataField="DATE_REQUESTED" FilterControlWidth="75px">
        </telerik:GridDateTimeColumn>
    </Columns>
</MasterTableView>
    </telerik:RadGrid>
    </div>

[Pavel]

Hi Casey,

The version of the controls that you are using was released before the official release of IE8. Thus I will ask you to update to a more recent version of the controls to ensure that they are compatible with the browser. You can find more details on how to upgrade in this knowledge base article. Let us know if you encounter any problems after that.

Greetings,
Pavel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.