Grid Filtering Not Working For IE

[Vimal Kumar]

Hi there,

I am using telerik grid, in which i have facilitate with  filter,sorting and virtual loading. The problem i am facing is that, when i use to do filter, its working fine for other browser like mozilla firefox, opera, safari. But when i will do filter in IE, i am getting white space below.
I am sending the coding which i am using for filter ... Can anybody help me to come out of this problem.

  <script type="text/javascript">  
         //------ Grid Resize ------ //
         function GridCreated()   
           {
             var grid = document.getElementById('<%=radgrid1.ClientID %>');
             var scrollArea = document.getElementById("<%= radgrid1.ClientID %>" + "_GridData");                             
             var dataHeight =  document.getElementById("ctl00_ContentPlaceHolder1_radgrid1_ctl00");                  
            if(dataHeight.clientHeight < 350)
               {    
                 alert('GridCreated1');
                 //alert(dataHeight.clientHeight);
                 func="test";
                 scrollArea.style.height = dataHeight.clientHeight + 1 + "px";
                 //alert(scrollArea.style.height);
                 scrollArea.style.overflow = "auto";
               }
             }
        </script>

[Sebastian]

Hello Vimal,

I suggest you avoid hard-coding ids for elements on the page and use the approach for reducing the scroll height of the grid data div from this section of the RadGrid documentation:

http://www.telerik.com/help/aspnet-ajax/grdresizegridwithscrollingwhenlessdata.html

It should work properly under different browsers.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Vimal Kumar]

Hi Sebastian

I got the mail, what you sent on my mail id,Thanks for your reply. As you suggest me, i removed all hard-coding and also i went through the site you sent. But still the problem is same. I think if i will show you my screen shot then the things will be more clear. But here, option is not available to send the screen shot. So Can i have your mail id, so that i send you the screen shot.
 
Regards,
Vimal Kumar Srivastava
Email Id: [e-mail]
 

[Sebastian]

Hi Vimal,

Can you please double-check that the height of the grid scrollable div is applied as expected by inspecting the html of the page using IE developer toolbar or FireBug? If the issue still persists using this approach, I will appreciate if you provide a live url where the problem can be observed. Thus I will do my best to assist you further.

I do not think that a screenshot will help us address the issue at hand since it will allow us to provide a direct solution. Nevertheless, to send us files/test projects, you can use our support ticket system by logging from your account on our site.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Vimal Kumar]

Hi Sebastian,

Thanks once again.
Here i am sending you my full .aspx page.

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="IssueList.aspx.cs" Inherits="IssueList" Title="Datascan, LP - Issue Tracker" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

        <script type="text/javascript">  
             window.onresize = reSize;
             var browser=navigator.appName;
             var b_version=navigator.appVersion;
             var version=parseFloat(b_version);
             var func;
             function reSize()
             {
               grid = document.getElementById('<%=rgIssueList.ClientID %>');                
               h = 0;
               w = 0;
               if(!window.innerWidth)
               {
                 //strict mode
                   if(!(document.documentElement.clientWidth == 0))
                   {
                   w = document.documentElement.clientWidth;
                    h = document.documentElement.clientHeight;
                  }
                 //quirks mode
                  else
                  {
                    w = document.body.clientWidth;
                    h = document.body.clientHeight;
                  }
               }
               //w3c
               else
               {
                 w = window.innerWidth-20;
                 h = window.innerHeight-50;
               }
               if((browser=="Netscape") && (version>=3))
               {
                 
                 if(func!="test"){
                 if(h-205 > 20)
                 {
                   grid.style.height = (h - 105) + "px";
                 }
                 else
                 {
                   grid.style.height = 100;
                 }
               }
               if(w-590 > 100)
               {
                 grid.style.width = (w - 25) + "px";
               }    
               else
               {
                 grid.style.width = "650px";
               }        
             }
             else if((browser=="Microsoft Internet Explorer") && (version>=3))
             {
               if(func!="test")
               {
                 if(h-335 > 20)
                 {
                   grid.style.height = (h - 200) + "px";
                 }
                 else
                 {
                   grid.style.height = 150;
                 }
               }
               else
               {
                 if(h-185 > 20)
                 {
                   grid.style.height = 75;
                 }
                 else
                 {
                 }
               }
               if(w-590 > 100)
               {
                 grid.style.width = (w - 5) + "px";
               }    
               else
               {
                 grid.style.width = "600px";
               }        
             }
             else
             {
               if(h-305 > 20)
               {
                 grid.style.height = (h - 180) + "px";
               }
               else
               {
                 grid.style.height = 100;
               }
               if(w-590 > 100)
               {
                 grid.style.width = (w - 25) + "px";
               }    
               else
               {
                 grid.style.width = "600px";
               }        
             }    
           };            
        </script>

        <script type="text/javascript">
        //------ Grid Resize ------ //                  
        var browser=navigator.appName;
        var b_version=navigator.appVersion;
        var version=parseFloat(b_version);
        function GridCreated()   
        {
          var scrollArea = document.getElementById("<%= rgIssueList.ClientID %>" + "_GridData");                             
          var dataHeight =  document.getElementById("ctl00_ContentPlaceHolder1_rgIssueList_ctl00");    
              
          if((browser=="Microsoft Internet Explorer") && (version>=3))
          {
          if(dataHeight.clientHeight < 100)
            {
              func ="test";
              scrollArea.style.height = dataHeight.clientHeight + 10 + "px";
              scrollArea.style.overflow = "auto";
            }
            else
            {
            }
          }
          else
          {
            if(dataHeight.clientHeight < 350)
            {    
              func ="test";
              scrollArea.style.height = dataHeight.clientHeight + 20 + "px";
              alert(scrollArea.style.width);
              scrollArea.style.overflow = "auto";
            }
            else
              {
              }
            }
        }
        </script>

        <script type="text/javascript">
        //------ Row Double Click ------ //
        function RowDblClick(sender, eventArgs)
        {
          var index = eventArgs.get_itemIndexHierarchical();               
          document.getElementById("radGridClickedRowIndex").value = index;      
          $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RowDblClicked");            
        }
        </script>

        <script type="text/javascript">
        //------ Row Right Click ------ //
        function RowContextMenu(sender, eventArgs)
        {              
          var menu = $find("<%=RadMenu1.ClientID %>");
          var evt = eventArgs.get_domEvent();
          if(evt.target.tagName == "INPUT" || evt.target.tagName == "A")
          {
            return;
          }
               
          var index = eventArgs.get_itemIndexHierarchical();
          document.getElementById("radGridClickedRowIndex").value = index;
               
          sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
          menu.show(evt);
          
          evt.cancelBubble = true;
          evt.returnValue = false;
          if (evt.stopPropagation)
          {
            evt.stopPropagation();
            evt.preventDefault();
          }
        }
        </script>

        <script type="text/javascript">
        //------ Enter key for search button ------ //
        function clickButton(e)
        {               
          var evt = e ? e : window.event;
          var bt = document.getElementById('btnSrch');      
          if (bt)
          {
            if (evt.keyCode == 13)
            {
              bt.click();
              return false;
            }
          }
        }
        </script>

    </telerik:RadScriptBlock>
    <h2>
        Issues</h2>
    <table bgcolor="LightSteelBlue" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <table cellpadding="3" cellspacing="0">
                    <tr>
                        <td style="height: 29px">
                            <asp:Button ID="btnAdd" runat="server" Text="Add" CssClass="styButton" OnClick="btnAdd_Click" /></td>
                        <td style="height: 29px">
                            <asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="styButton" OnClick="btnCancel_Click">
                            </asp:Button></td>
                        <td class="styLabel" style="height: 29px">
                            Search Text:</td>
                        <td style="height: 29px">
                            <asp:TextBox ID="txtSearch" runat="server" CssClass="styDefault" onkeypress="javascript:return clickButton(event)"></asp:TextBox></td>
                        <td class="styLabel" style="height: 29px">
                            View:</td>
                        <td style="height: 29px">
                            <asp:DropDownList ID="ddlView" AutoPostBack="true" runat="server" EnableViewState="False"
                                OnChange="Search()">
                                <asp:ListItem>Unapproved</asp:ListItem>
                                <asp:ListItem>Unassigned</asp:ListItem>
                                <asp:ListItem Selected="True">Open issues by priority</asp:ListItem>
                                <asp:ListItem>Open issues by customer</asp:ListItem>
                                <asp:ListItem>Open test issues</asp:ListItem>
                                <asp:ListItem>Recently changed</asp:ListItem>
                                <asp:ListItem>Scanner group</asp:ListItem>
                                <asp:ListItem>Server group</asp:ListItem>
                                <asp:ListItem>Test group</asp:ListItem>
                                <asp:ListItem>All</asp:ListItem>
                            </asp:DropDownList></td>
                        <td style="height: 29px">
                            <input id="btnSrch" class="styButton" type="button" value="Search" onclick="Search()" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <telerik:RadGrid Width="979px" ID="rgIssueList" runat="server" GridLines="Horizontal"
                                Skin="WebBlue" AllowSorting="True" AllowPaging="True" PageSize="15" AutoGenerateColumns="false"
                                OnNeedDataSource="rgIssueList_NeedDataSource" OnPreRender="rgIssueList_PreRender">
                                <ClientSettings ReorderColumnsOnClient="True" AllowColumnsReorder="True" EnableRowHoverStyle="true">
                      <ClientEvents OnGridCreated="GridCreated" OnRowDblClick="RowDblClick" OnRowContextMenu="RowContextMenu">
                                    </ClientEvents>
                                    <DataBinding EnableCaching="True" />
                                    <Resizing EnableRealTimeResize="True" ResizeGridOnColumnResize="True" AllowColumnResize="True">
                                    </Resizing>
                                    <Selecting AllowRowSelect="True"></Selecting>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" EnableVirtualScrollPaging="True" />
                                </ClientSettings>
                                <MasterTableView TableLayout="Auto" Width="100%" DataKeyNames="issue_id,assigned_to">
                                    <Columns>
                                        <telerik:GridBoundColumn DataField="issue_id" HeaderText="Issue" SortExpression="issue_id"
                                            UniqueName="issue_id" HeaderStyle-Width="35px">
                                        </telerik:GridBoundColumn>
                                      <telerik:GridBoundColumn DataField="customer_desc" HeaderText="Customer" SortExpression="customer_desc"
                                            UniqueName="customer_desc" HeaderStyle-Width="60px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="job_number" HeaderText="Job" SortExpression="job_number"
                                            UniqueName="job_number" HeaderStyle-Width="25px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="job_desc" HeaderText="Job Desc" SortExpression="job_desc"
                                            UniqueName="job_desc" HeaderStyle-Width="60px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="system" HeaderText="System" SortExpression="system"
                                            UniqueName="system" HeaderStyle-Width="60px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="subsystem" HeaderText="Sub System" SortExpression="subsystem"
                                            UniqueName="subsystem" HeaderStyle-Width="60px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="title" HeaderText="Title" SortExpression="title"
                                            UniqueName="title" HeaderStyle-Width="120px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="due_date" HeaderText="Due" SortExpression="due_date"
                                            DataFormatString="{0:MM/dd/yyyy}" UniqueName="due_date" HeaderStyle-Width="50px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="priority" HeaderText="Priority" SortExpression="priority"
                                            UniqueName="priority" HeaderStyle-Width="50px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="status" HeaderText="Status" SortExpression="status"
                                            UniqueName="status" HeaderStyle-Width="80px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="assigned_to" HeaderText="Assigned" SortExpression="assigned_to"
                                            UniqueName="assigned_to" HeaderStyle-Width="80px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="tester" HeaderText="Tester" SortExpression="tester"
                                            UniqueName="tester" HeaderStyle-Width="80px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="last_modified" HeaderText="Modified" SortExpression="last_modified"
                                            DataFormatString="{0:MM/dd/yyyy}" UniqueName="last_modified" HeaderStyle-Width="60px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="last_modified_by" HeaderText="Modified By" SortExpression="last_modified_by"
                                            UniqueName="last_modified_by" HeaderStyle-Width="80px">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="created_by" HeaderText="Created by" SortExpression="created_by"
                                            UniqueName="created_by" HeaderStyle-Width="80px">
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                </MasterTableView>
                                <ItemStyle Font-Size="9pt" HorizontalAlign="left" />
                                <AlternatingItemStyle Font-Size="9pt" HorizontalAlign="left" />
                                <HeaderStyle Font-Bold="true" Font-Size="9pt" />
                                <PagerStyle Visible="false" />
                            </telerik:RadGrid>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
                                <AjaxSettings>
                                    <telerik:AjaxSetting AjaxControlID="ddlView">
                                        <UpdatedControls>
                                            <telerik:AjaxUpdatedControl ControlID="rgIssueList" LoadingPanelID="AjaxLoadingPanel1" />
                                        </UpdatedControls>
                                    </telerik:AjaxSetting>
                                    <telerik:AjaxSetting AjaxControlID="rgIssueList">
                                        <UpdatedControls>
                                            <telerik:AjaxUpdatedControl ControlID="rgIssueList" LoadingPanelID="AjaxLoadingPanel1" />
                                        </UpdatedControls>
                                    </telerik:AjaxSetting>
                                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                                        <UpdatedControls>
                                            <telerik:AjaxUpdatedControl ControlID="rgIssueList" LoadingPanelID="AjaxLoadingPanel1" />
                                        </UpdatedControls>
                                    </telerik:AjaxSetting>
                                </AjaxSettings>
                            </telerik:RadAjaxManager>
                            <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Height="100%"
                                BackColor="#E0E0E0" Width="100%" Transparency="50">
                                <img alt="Loading..." src="Images/ajax-loader.gif" style="border: 0;" />
                            </telerik:RadAjaxLoadingPanel>
                            <input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />
                            <telerik:RadContextMenu ID="RadMenu1" runat="server" Skin="Gray" OnItemClick="RadMenu1_ItemClick">
                                <Items>
                                    <telerik:RadMenuItem Text="View" runat="server" />
                                </Items>
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                            </telerik:RadContextMenu>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="9" align="left" bgcolor="lightcyan" style="height: 18px">
                <span class="styLabel">Status:</span>
                <asp:Label ID="lblStatus" runat="server" ForeColor="Green" CssClass="styDefault"></asp:Label>
            </td>
        </tr>
    </table>
    <asp:ObjectDataSource ID="odsIssueList" runat="server" OldValuesParameterFormatString="original_{0}"
        SelectMethod="GetData" TypeName="IssueDALTableAdapters.IssueListTableAdapter">
        <SelectParameters>
            <asp:ControlParameter ControlID="txtSearch" Name="search_string" PropertyName="Text"
                Type="String" />
            <asp:ControlParameter ControlID="ddlView" Name="view_name" PropertyName="SelectedValue"
                Type="String" />
        </SelectParameters>
    </asp:ObjectDataSource>
</asp:Content>

Regards,
Vimal Kumar Srivastava
Madhepura, Bihar
Email Id: [e-mail]

[Vimal Kumar]

Hi Sebastian ,

Still i am waiting for your reply.

Regards,
Vimal Kumar Srivastava
Email Id: [e-mail]

[Vimal Kumar]

Hi Sebastian ,

I am using same telerik grid for my all pages. And due to this issues my all pages are still pending. So can you reply soon.

Regards:
Vimal Kumar Srivastava
Email Id: [e-mail]

[Sebastian]

Hello Vimal,

Have you reviewed the rendered html with IE developer toolbar or FireBug as suggested previously? Can you please share with us what the results are? Additionally, I noticed that you have a duplicate forum thread on this subject in which you receive responses by my colleague Dimo. You can share your findings there and continue the communication in the same thread.

Regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Vimal Kumar]

Hi Sebastian,

I will continue my communication with you.
  I reviewed the rendered html with IE developer toolbar or FireBug as you suggested. I too like to share my result with you. But here no option is available to share the screen shot. That's why i asked before itself to send your mail id, so that i can send you my screen shot. Else tell me the way how to send you my result.

Thanks & Regards:
Vimal Kumar Srivastava
Email Id: [e-mail]

[Sebastian]

Hi Vimal,

See the quote below from one of my previous messages:

I do not think that a screenshot will help us address the issue at hand since it will allow us to provide a direct solution. Nevertheless, to send us files/test projects, you can use our support ticket system by logging from your account on our site.

Regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.