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

PageSlider alignment missing in IE 7.

3 Answers 32 Views

Grid

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

PageSlider alignment missing in IE 7.

3 Answers, 1 is accepted