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

Rad Ajax Panel not rendering properly on Editing

7 Answers 127 Views

Ajax

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

Manisha asked on 05 Apr 2013, 06:42 AM

I am using Telerik Ajax tools in my project. Recently we upgraded the .NET Ajax tools to the latest 2012.3.1308.35 product version. One issue is pertaining to a single page. It is the improper rendering of the Ajax Panel on edit mode. The page looks somewhat like this :

<RadAjaxPanel ....>
    <asp:FormView...... >
        <Header Template >
                User control with certain controls as Edit, Save, Toggle, etc.
        </Header Template>
        <Item Template>
            <Label... />
        </ Item Template >
        <Edit Item Template >
            <Custom Validator... />
                <asp:Button />
            <Rad Editor... /> (It uses the same internal Rad Editor Skin )
         < / Edit Item Template >
    </ Form View>
< / RadAjaxPaneI>

It has two such above mentioned sections. In ReadOnly Mode, the page looks fine but when the FormView is changed to Edit mode for the FIRST TIME, the entire panel becomes too wide to be enclosed within the screen, all the save, edit etc buttons on the right top corner of the panel is not visible as the panel extends invariably towards the right. We have a toggle button on the left top corner which minimises or maximises the panel ( by default panel is maximised ). After this, if we minimise the panel and maximize again, everything becomes fine and takes the correct positions with proper width and visible buttons. Later any number of edits wold not affect anyway and will show proper result.

As I mentioned above, we have two panel sections. This happens for the panel (only one time) which is pushed into edit mode FIRST after the rendering of the page. The other section which is edited second works properly at all times. Even after multiple refreshing of the page, this erroneous behaviour remains the same.

Please help me with this.

7 Answers, 1 is accepted

answered on 10 Apr 2013, 01:03 PM

First-look-on-page-rendering.png

Incorrect-Panel-rendering-on-edit.png

Look-on-toggle-button-near-the-header.png

Ideal-required-look.png

Hi Maria,

I was unable to add the UpdatePanelHeight property as we are not using Rad Ajax Manager and Rad Ajax Panel is not recognising that property.

Please find attached the required screenshots in the same order as it occurs..

Thanks for your help...

Regards,

Manisha

answered on 16 Apr 2013, 02:40 PM

Incorrect-rendering-of-Toolbar.jpg

Hello Maria,

Thanks for your help. The Panel is rendering fine now but there is still a minor issue with the rendering. The toolbar of the editor is being rendered haphazardly on the first EDIT, later on it works fine as the issue before with the panel.

I used this code from the forum link provided by you and added it to Master Page :

<head id="Head1" runat="server">

<title></title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Editor.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Skins.Default.Editor.Default.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Window.css") %>'

rel="stylesheet" type="text/css" />

<link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadWindow), "Telerik.Web.UI.Skins.Default.Window.Default.css") %>'

rel="stylesheet" type="text/css" />

</telerik:RadCodeBlock>

</head>

Please help me with this issue and let me know what is to be done now. I am attaching a screenshot of the incorrect toolbar, please compare it with the required Ideal toolbar look in the screenshot I attached before.

Thanks & Regards,

Manisha