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

PageSlider alignment missing in IE 7.

3 Answers 35 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Praveen
Top achievements
Rank 1
Praveen asked on 14 Jun 2012, 09:56 PM
Hello,

I was working on telerik controls from the past 1year. So far I found few issues respect to the IE7 and we could able to fix those.
From the past 2-3weeks one issue is paining us like anything and which is only with IE7.

I have page with 'div' and in that I kept a radgrid control with pageslider, and when I open this page in IE7 I am seeing the alignment of pageslider is missing and it is not at its place where it should be.

Following is the markup page which has div and radgrid control.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadGridDemo.aspx.cs" Inherits="WebApplication2.RadGridDemo" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:500px; height:300px; overflow:auto;">
        <asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server" scriptmode="Release"
            loadscriptsbeforeui="false" combinescripts="true" enablehistory="true" enablepagemethods="true">
        </asp:toolkitscriptmanager>
        <telerik:radgrid id="RadGrid1" runat="server" pagesize="10" width="800px"
            onitemcreated="RadGrid_ItemCreated" onneeddatasource="RadGridInner_OnNeedDataSource"
            allowpaging="true" enableheadercontextmenu="true"
            enableheadercontextfiltermenu="true">
         <MasterTableView PageSize="10" AllowSorting="true" AllowFilteringByColumn="true"
            HierarchyLoadMode="Client" DataKeyNames="ID" AutoGenerateColumns="false">
            <PagerStyle Position="Bottom" PageButtonCount="5" Mode="Slider" PageSizeLabelText="Records per Page:"
                Visible="true" ShowPagerText="true" AlwaysVisible="true"></PagerStyle>
                <Columns>
                <telerik:GridBoundColumn DataField="ID" DataType="System.Int32" AllowSorting="true"
                    EmptyDataText="-" UniqueName="ID" HeaderText="Employee ID" SortExpression="ID" />
                <telerik:GridBoundColumn ItemStyle-Font-Bold="true" DataField="FirstName" DataType="System.String"
                    AllowSorting="true" EmptyDataText="-" UniqueName="FirstName" HeaderText="First Name"
                    SortExpression="FirstName" />
                <telerik:GridBoundColumn DataField="LastName" DataType="System.String" AllowSorting="true"
                    EmptyDataText="-" UniqueName="LastName" HeaderText="Last Name" SortExpression="LastName" />
                <telerik:GridBoundColumn DataField="DateOfJoin" DataType="System.DateTime" AllowSorting="true"
                    EmptyDataText="-" DataFormatString="{0:MM/dd/yyyy}" UniqueName="Date Of Join"
                    HeaderText="Date Of Join" SortExpression="DateOfJoin">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Designation" DataType="System.String" AllowSorting="true"
                    EmptyDataText="-" UniqueName="Designation" HeaderText="Designation" SortExpression="Designation" />
                <telerik:GridBoundColumn DataField="CompanyName" DataType="System.String" AllowSorting="true"
                    EmptyDataText="-" UniqueName="CompanyName" HeaderText="Company Name" SortExpression="CompanyName" />
                    </Columns>
        </MasterTableView>
    </telerik:radgrid>
    </div>
    </form>
</body>
</html>

Following is the codebehind file which basically I am using to bind the data.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
namespace WebApplication2
{
    public partial class RadGridDemo : System.Web.UI.Page
    {
        static List<DemoEmployee> employeeList = new List<DemoEmployee>();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                employeeList = GetEmployeeList();
                RadGrid1.DataSource = employeeList;
                RadGrid1.DataBind();
            }
        }
 
        protected void RadGrid_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridGroupHeaderItem)
            {
                (e.Item as GridGroupHeaderItem).Cells[0].Controls.Clear();
            }
 
            if (e.Item is GridFilteringItem)
            {
                System.Web.UI.HtmlControls.HtmlGenericControl dynDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
                dynDiv.ID = "imgHeaderExpandAndCollpase";
                dynDiv.Attributes.Add("class", "imageExpand");
                dynDiv.Attributes.Add("onclick", "javascript:ToggleGridRows()");
 
                (e.Item as GridFilteringItem).Cells[0].Controls.Add(dynDiv);
            }
 
            if (e.Item is GridPagerItem)
            {
                GridPagerItem pager = (GridPagerItem)e.Item;
 
                Label lblPager = new Label();
                lblPager.ID = "PageSizeLabel";
                lblPager.CssClass = "lblPageSize";
                lblPager.Text = "Records per Page:";
 
                RadComboBox combo = new RadComboBox();
                combo.ID = "PageSizeComboBox";
                combo.CssClass = "pagerCombo";
                combo.AutoPostBack = true;
 
 
                // Adding items to combobox
                combo.Items.Add(new RadComboBoxItem("10", "10"));
                combo.FindItemByText("10").Attributes.Add("ownerTableViewId",
                                                          RadGrid1.MasterTableView.ClientID);
                combo.Items.Add(new RadComboBoxItem("25", "25"));
                combo.FindItemByText("25").Attributes.Add("ownerTableViewId",
                                                          RadGrid1.MasterTableView.ClientID);
                combo.Items.Add(new RadComboBoxItem("50", "50"));
                combo.FindItemByText("50").Attributes.Add("ownerTableViewId",
                                                          RadGrid1.MasterTableView.ClientID);
                combo.Items.Add(new RadComboBoxItem("100", "100"));
                combo.FindItemByText("100").Attributes.Add("ownerTableViewId",
                                                           RadGrid1.MasterTableView.ClientID);
                combo.SelectedValue = "10";
                combo.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(combo_SelectedIndexChanged);
 
                e.Item.Controls[0].Controls[0].Controls[0].Controls[0].Controls.Add(lblPager);
 
                e.Item.Controls[0].Controls[0].Controls[0].Controls[0].Controls.Add(combo);
 
            }
        }
 
        private void combo_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            RefreshData();
        }
 
 
 
        protected void RadGridInner_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            RefreshData();
        }
 
        private void RefreshData()
        {
            RadGrid1.MasterTableView.PageSize = Convert.ToInt32("10");
            employeeList = GetEmployeeList();
            RadGrid1.DataSource = employeeList;
        }
 
         
 
        public static List<DemoEmployee> GetEmployeeList()
        {
            List<DemoEmployee> empList = new List<DemoEmployee>();
 
            for (int i = 1; i <= 30; i++)
            {
                DemoEmployee emp = new DemoEmployee();
                emp.ID = i;
                emp.FirstName = "FirstName " + i.ToString();
                emp.LastName = "LastName " + i.ToString();
                emp.DateOfJoin = DateTime.Now;
                emp.Designation = "Designation " + i.ToString();
                emp.CompanyName = "CompanyName " + i.ToString();
                List<Experience> experienceList = new List<Experience>();
                for (int j = 1; j <= 3; j++)
                {
                    Experience experience = new Experience();
                    experience.Company = "Company " + j.ToString();
                    experience.Years = j.ToString();
                    experience.Location = "Location " + j.ToString();
                    experienceList.Add(experience);
                }
 
                emp.ExperienceList = experienceList;
                empList.Add(emp);
            }
 
            return empList;
        }
    }
 
    [Serializable]
    public class DemoEmployee
    {
        public int ID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime DateOfJoin { get; set; }
        public string Designation { get; set; }
        public string CompanyName { get; set; }
        public List<Experience> ExperienceList { get; set; }
    }
 
    [Serializable]
    public class Experience
    {
        public string Company { set; get; }
        public string Years { set; get; }
        public string Location { set; get; }
    }
}


Can anyone suggest me how to overcome this situation. [PageSlider in Grid is not aligned properly in IE7]
Please don't advise to remove the 'div', we need that div.

Thanks,
Praveen 

3 Answers, 1 is accepted

Sort by
0
Tsvetoslav
Telerik team
answered on 19 Jun 2012, 04:25 PM
Hi Praveen,

Could you confirm that the problem is being reproduced with the Q2 2012 version of the controls as I was not able to replicate it on my side.

All the best,
Tsvetoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Praveen
Top achievements
Rank 1
answered on 28 Jun 2012, 05:00 PM
I am using  Telerik.Web.UI Version=2011.2.1011.40
0
Tsvetoslav
Telerik team
answered on 02 Jul 2012, 07:46 AM
Hi Praveen,

Just upgrade to the latest version of the controls.

All the best,
Tsvetoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Praveen
Top achievements
Rank 1
Answers by
Tsvetoslav
Telerik team
Praveen
Top achievements
Rank 1
Share this question
or