Rad Paner Bar Items moves one step down for every AjaxRequest in IE9

6 posts, 0 answers
  1. Gokul Gokul
    Gokul Gokul avatar
    17 posts
    Member since:
    May 2010

    Posted 30 Jul 2011 Link to this post

    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;
            }
        }
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 04 Aug 2011 Link to this post

    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

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gokul Gokul
    Gokul Gokul avatar
    17 posts
    Member since:
    May 2010

    Posted 04 Aug 2011 Link to this post

    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.
  5. Gokul Gokul
    Gokul Gokul avatar
    17 posts
    Member since:
    May 2010

    Posted 08 Aug 2011 Link to this post

    Hi kate, 
              I can't upload the demo which is in .avi format.
  6. Gokul Gokul
    Gokul Gokul avatar
    17 posts
    Member since:
    May 2010

    Posted 08 Aug 2011 Link to this post

    Finally I upload my PanelBar issue in ie9 demo in you tube. Please check it out 
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 09 Aug 2011 Link to this post

    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) :
    <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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017