Gokul Gokul
Top achievements
Rank 2
Rank 2
Gokul Gokul
asked on 30 Jul 2011, 09:23 AM
Hello all,
I am having a problem in radpanelbar particularly in IE9, The problem is whenever I made an Ajax Request using RadAjaxManager from client script. my RadPanelbar Items moves one step down automatically. Please find me the solution because I already spend LOT in this.
Here is my aspx page
................................................................................................................................................................................................................
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadPanelBarTester._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>
<style type="text/css">
.Tools
{
width: 120px;
height: 20px;
border: solid 1px blue;
border-top:none;
padding: 2px;
margin: 4px;
color: Black;
font: normal 11.5px "Segoe UI", Arial, sans-serif;
text-align: center;
cursor: move;
display:block;
overflow:hidden;
background-image:url('RootItemBg.png');
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
onajaxrequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadPanelBar1"/>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadPanelBar ID="RadPanelBar1" ExpandMode="SingleExpandedItem" Skin="Outlook"
runat="server">
</telerik:RadPanelBar>
<asp:HiddenField ID="myHiddenField" runat="server" />
<br />
<input id="Button1" type="button" onclick="callsvr()" value="Test" />
</div>
</form>
<script type="text/javascript">
function callsvr() {
$find("RadAjaxManager1").ajaxRequest("test");
}
</script>
</body>
</html>
My server side code
.....................................................................................................................................................................................................
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;
using System.Web.UI.HtmlControls;
namespace RadPanelBarTester
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
InitialzeToolBox();
}
}
private void InitialzeToolBox()
{
for (int i = 0; i < 5; i++)
{
RadPanelItem radItem = new RadPanelItem("TAB TEST" + i);
var motherDiv = new HtmlGenericControl("div");
motherDiv.Attributes.Add("align", "center");
for (int j = 0; j < 5; j++)
{
HtmlGenericControl childDiv = new HtmlGenericControl("div");
childDiv.Attributes.Add("class", "Tools");
childDiv.Style.Add(HtmlTextWriterStyle.ZIndex, "2");
childDiv.InnerText = "TAB TEST" + i + "Tool" + j;
childDiv.ID = "TAB TEST" + i + "Tool" + j;
motherDiv.Controls.Add(childDiv);
}
RadPanelItem itemTemplate = new RadPanelItem();
TemplateItem template = new TemplateItem(motherDiv);
itemTemplate.ItemTemplate = template;
radItem.Items.Add(itemTemplate);
RadPanelBar1.Items.Add(radItem);
}
RadPanelBar1.Items.FindItemByText("TAB TEST0").Expanded = true;
}
protected override void OnLoad(EventArgs e)
{
for (int i = 0; i < RadPanelBar1.Items.Count; i++)
{
var motherDiv = new HtmlGenericControl("div");
motherDiv.Attributes.Add("align", "center");
for (int j = 0; j < 5; j++)
{
HtmlGenericControl childDiv = new HtmlGenericControl("div");
childDiv.Attributes.Add("class", "Tools");
childDiv.InnerText = "TAB TEST" + i + "Tool" + j;
childDiv.ID = "TAB TEST" + i + "Tool" + j;
motherDiv.Controls.Add(childDiv);
}
RadPanelItem itemTemplate = new RadPanelItem();
TemplateItem template = new TemplateItem(motherDiv);
itemTemplate.ItemTemplate = template;
RadPanelBar1.Items[i].Items.Add(itemTemplate);
}
base.OnLoad(e);
}
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
}
}
}
Template item class
............................................................................................................................................................................................
public class TemplateItem:ITemplate
{
Control control;
#region ITemplate Members
public void InstantiateIn(Control container)
{
container.Controls.Add(control);
}
#endregion
public TemplateItem(Control ctrl)
{
control = ctrl;
}
}
I am having a problem in radpanelbar particularly in IE9, The problem is whenever I made an Ajax Request using RadAjaxManager from client script. my RadPanelbar Items moves one step down automatically. Please find me the solution because I already spend LOT in this.
Here is my aspx page
................................................................................................................................................................................................................
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadPanelBarTester._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>
<style type="text/css">
.Tools
{
width: 120px;
height: 20px;
border: solid 1px blue;
border-top:none;
padding: 2px;
margin: 4px;
color: Black;
font: normal 11.5px "Segoe UI", Arial, sans-serif;
text-align: center;
cursor: move;
display:block;
overflow:hidden;
background-image:url('RootItemBg.png');
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
onajaxrequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadPanelBar1"/>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadPanelBar ID="RadPanelBar1" ExpandMode="SingleExpandedItem" Skin="Outlook"
runat="server">
</telerik:RadPanelBar>
<asp:HiddenField ID="myHiddenField" runat="server" />
<br />
<input id="Button1" type="button" onclick="callsvr()" value="Test" />
</div>
</form>
<script type="text/javascript">
function callsvr() {
$find("RadAjaxManager1").ajaxRequest("test");
}
</script>
</body>
</html>
My server side code
.....................................................................................................................................................................................................
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;
using System.Web.UI.HtmlControls;
namespace RadPanelBarTester
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
InitialzeToolBox();
}
}
private void InitialzeToolBox()
{
for (int i = 0; i < 5; i++)
{
RadPanelItem radItem = new RadPanelItem("TAB TEST" + i);
var motherDiv = new HtmlGenericControl("div");
motherDiv.Attributes.Add("align", "center");
for (int j = 0; j < 5; j++)
{
HtmlGenericControl childDiv = new HtmlGenericControl("div");
childDiv.Attributes.Add("class", "Tools");
childDiv.Style.Add(HtmlTextWriterStyle.ZIndex, "2");
childDiv.InnerText = "TAB TEST" + i + "Tool" + j;
childDiv.ID = "TAB TEST" + i + "Tool" + j;
motherDiv.Controls.Add(childDiv);
}
RadPanelItem itemTemplate = new RadPanelItem();
TemplateItem template = new TemplateItem(motherDiv);
itemTemplate.ItemTemplate = template;
radItem.Items.Add(itemTemplate);
RadPanelBar1.Items.Add(radItem);
}
RadPanelBar1.Items.FindItemByText("TAB TEST0").Expanded = true;
}
protected override void OnLoad(EventArgs e)
{
for (int i = 0; i < RadPanelBar1.Items.Count; i++)
{
var motherDiv = new HtmlGenericControl("div");
motherDiv.Attributes.Add("align", "center");
for (int j = 0; j < 5; j++)
{
HtmlGenericControl childDiv = new HtmlGenericControl("div");
childDiv.Attributes.Add("class", "Tools");
childDiv.InnerText = "TAB TEST" + i + "Tool" + j;
childDiv.ID = "TAB TEST" + i + "Tool" + j;
motherDiv.Controls.Add(childDiv);
}
RadPanelItem itemTemplate = new RadPanelItem();
TemplateItem template = new TemplateItem(motherDiv);
itemTemplate.ItemTemplate = template;
RadPanelBar1.Items[i].Items.Add(itemTemplate);
}
base.OnLoad(e);
}
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
}
}
}
Template item class
............................................................................................................................................................................................
public class TemplateItem:ITemplate
{
Control control;
#region ITemplate Members
public void InstantiateIn(Control container)
{
container.Controls.Add(control);
}
#endregion
public TemplateItem(Control ctrl)
{
control = ctrl;
}
}
5 Answers, 1 is accepted
0
Hi Gokul,
I was able to run and test the code that you provided but I could not get the behaviour that you encounter. Are there any specific steps for reproducing the issue? Can you please make a video of the problematic behaviour (you could use Jing for example)and send it to me so I can get a clear idea of the issue?
All the best,
Kate
the Telerik team
I was able to run and test the code that you provided but I could not get the behaviour that you encounter. Are there any specific steps for reproducing the issue? Can you please make a video of the problematic behaviour (you could use Jing for example)and send it to me so I can get a clear idea of the issue?
All the best,
Kate
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Gokul Gokul
Top achievements
Rank 2
Rank 2
answered on 04 Aug 2011, 09:49 AM
Hello kate,
Thanks for the reply. this issue happens to me in ie9 while not in compatibility mode. I will send you the issue demo video soon.
Thanks for the reply. this issue happens to me in ie9 while not in compatibility mode. I will send you the issue demo video soon.
0
Gokul Gokul
Top achievements
Rank 2
Rank 2
answered on 08 Aug 2011, 07:38 AM
Hi kate,
I can't upload the demo which is in .avi format.
I can't upload the demo which is in .avi format.
0
Gokul Gokul
Top achievements
Rank 2
Rank 2
answered on 08 Aug 2011, 08:21 AM
Finally I upload my
PanelBar issue in ie9 demo in you tube. Please check it out
0
Hi Gokul Gokul,
We were able to reproduce the issue that you describe. As a workaround you could use the following modified code (please note that in this case the button runs on the server) :
You can also find your Telerik points updated.
Greetings,
Kate
the Telerik team
We were able to reproduce the issue that you describe. As a workaround you could use the following modified code (please note that in this case the button runs on the server) :
<body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" UpdatePanelsRenderMode="Inline"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="Button1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadPanelBar1"/> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadPanelBar ID="RadPanelBar1" ExpandMode="SingleExpandedItem" Skin="Outlook" runat="server" Width="500" Height="500"> </telerik:RadPanelBar> <asp:HiddenField ID="myHiddenField" runat="server" /> <br /> <input id="Button1" type="button" runat="server" aonclick="callsvr()" value="Test" /> </div> </form> <script type="text/javascript"> function callsvr() { //$find("RadAjaxManager1").ajaxRequest("test"); } </script></body>You can also find your Telerik points updated.
Greetings,
Kate
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.