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

RadEditor in XmlHttpPanel

7 Answers 125 Views

XmlHttpPanel

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

Scott asked on 15 Dec 2009, 07:02 PM

I'm trying to extend the "XmlHttpPanel / Initiating content load client-side" example. I would like to have a few form fields and a RadEditor inside the XmlHttpPanel. Essential I would like very similar functionality to the "Use as container" RadWindow example with the additioon of a RadEditor and no window.

Unfortunately when placing the RadEditor inside the XmlHttpPanel the editor does not behave as expected. In IE the RadEditor toolbars disappear and the content is never updated. In FireFox the content is update.

Am I doing something wrong or is this just not possible? Or is there a better alternative solution?

ASPX

                    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContentEditor.aspx.cs" Inherits="ContentEditor" %>         
                     
            <!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>         
                <telerik:radscriptblock id="RadScriptBlock" runat="server">         
                <script type="text/javascript">         
                     function rowSelected(sender, args) {         
                         var key = args.getDataKeyValue("ContentId");         
                         var panel = $find("<%=RadXmlHttpPanel.ClientID%>");         
                         panel.set_value(key);         
                     }         
                </script>         
                </telerik:radscriptblock>         
            </head>         
            <body>         
                <form id="form1" runat="server">         
                <div>         
                    <asp:scriptmanager id="ScriptManager" runat="server" />         
                    <div style="margin-bottom: 10px;">         
                        <label style="font-family:'segoe ui', arial, sans-serif;font-size:13px;">Group:</label>         
                        <telerik:radcombobox id="ContentGroupRadComboBox" runat="server" datasourceid="ContentGroupDataSource" datatextfield="ContentGroupName" datavaluefield="ContentGroupId" appenddatabounditems="true" autopostback="true" width="210" >         
                            <items>         
                                <telerik:radcomboboxitem text="All" value="0" selected="true" />         
                            </items>         
                        </telerik:radcombobox>         
                    </div>         
                    <telerik:radgrid id="ContentRadGrid" runat="server" datasourceid="ContentDataSource" allowpaging="true" autogeneratecolumns="false" width="250px" style="overflow:hidden">         
                        <mastertableview clientdatakeynames="ContentId">         
                            <columns>         
                                <telerik:gridboundcolumn uniquename="ContentName" datafield="ContentName" headertext="Name" itemstyle-wrap="false" />         
                            </columns>         
                        </mastertableview>         
                        <clientsettings enablerowhoverstyle="true" selecting-allowrowselect="true">         
                            <clientevents onrowselected="rowSelected" ondatabound="" />         
                        </clientsettings>         
                        <pagerstyle mode="NumericPages" showpagertext="false" />         
                    </telerik:radgrid>         
                    <telerik:radajaxmanager id="RadAjaxManager" runat="server" enableajax="true" defaultloadingpanelid="RadAjaxLoadingPanel">         
                        <ajaxsettings>         
                            <telerik:ajaxsetting ajaxcontrolid="ContentGroupRadComboBox">         
                                <updatedcontrols>         
                                    <telerik:ajaxupdatedcontrol controlid="ContentRadGrid" loadingpanelid="RadAjaxLoadingPanel" />         
                                    <telerik:ajaxupdatedcontrol controlid="ContentGroupRadComoboBox" />         
                                </updatedcontrols>         
                            </telerik:ajaxsetting>         
                        </ajaxsettings>         
                    </telerik:radajaxmanager>         
                    <div style="margin-top: 25px;border: dashed 2px red;">         
                        <telerik:radxmlhttppanel id="RadXmlHttpPanel" runat="server" onservicerequest="RadXmlHttpPanel_ServiceRequest">         
                            <asp:label id="selectContentLabel" runat="server" text="Select a content item." />         
                            <asp:label id="selectedContentIdLabel" runat="server" />         
                            <telerik:radeditor id="RadEditor" runat="server" />         
                        </telerik:radxmlhttppanel>         
                    </div>         
                    <telerik:radajaxloadingpanel id="RadAjaxLoadingPanel" runat="server" />         
                    <asp:sqldatasource id="ContentGroupDataSource" runat="server" connectionstring="<%$ ConnectionStrings:InternationalConnectionString %>" selectcommand="SELECT [ContentGroupId], [ContentGroupName] FROM [IS].[ContentGroupInfo] WITH (NOLOCK) WHERE [StoreId] = '49D4B1F4-236B-DE11-870E-001A6465230E' AND [CultureId] = 1033" />         
                    <asp:sqldatasource id="ContentDataSource" runat="server" connectionstring="<%$ ConnectionStrings:InternationalConnectionString %>" />         
                </div>         
                </form>         
            </body>         
            </html>         

Codebehind

                    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;         
                     
            public partial class ContentEditor : System.Web.UI.Page         
            {         
                protected void Page_Init(Object sender, EventArgs e)         
                {         
                     
                }         
                     
                protected void Page_Load(object sender, EventArgs e)         
                {         
                    if (ContentGroupRadComboBox.SelectedValue == "0")         
                    {         
                        ContentDataSource.SelectCommand = "SELECT [CI].[ContentGroupId], [CI].[ContentGroupName], [CI].[ContentId], [CI].[ContentName] FROM [IS].[ContentInfo] AS [CI] WITH (NOLOCK) WHERE [CI].[StoreId] = '49D4B1F4-236B-DE11-870E-001A6465230E' AND [CI].[CultureId] = 1033";         
                        ContentRadGrid.DataBind();         
                    }         
                    else         
                    {         
                        ContentDataSource.SelectCommand = "SELECT [CI].[ContentGroupId], [CI].[ContentGroupName], [CI].[ContentId], [CI].[ContentName] FROM [IS].[ContentInfo] AS [CI] WITH (NOLOCK) WHERE [CI].[StoreId] = '49D4B1F4-236B-DE11-870E-001A6465230E' AND [CI].[ContentGroupId] = '" + ContentGroupRadComboBox.SelectedValue + "' AND [CI].[CultureId] = 1033";         
                        ContentRadGrid.DataBind();         
                    }         
                     
                }         
                     
                protected void RadXmlHttpPanel_ServiceRequest(Object sender, RadXmlHttpPanelEventArgs e)         
                {         
                    String selectedContentId = e.Value;         
                    selectedContentIdLabel.Text = selectedContentId;         
                    selectContentLabel.Visible = false;         
                    RadEditor.Content = selectedContentId;         
                }         
            }         
                     

7 Answers, 1 is accepted

answered on 18 Dec 2009, 08:15 AM

Hi Scott,

The EnableClientScriptEvaluation property of the XmlHttpPanel needs to be set to true in order for the client-scrips loaded by the RadEditor (which is placed inside the Panel) to be evaluated after a partial page update has occurred. Basically this property enables any of the RadControls placed inside, to retain their client-side functionality after a partial page update has been performed by the RadXmlHttpPanel. So it is very important to set this property to true.

Let me know in case the problem still persists, even after setting the property to true.

Kind regards,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 18 Dec 2009, 06:53 PM

Pero,

Thank you for the help. The EnableClientScriptEvaluation appears to have fixed the problem.

I have another question regarding the "ClientSideContentLoad" example. The XmlHttpPanel has an initial Value of CustomerID = ANTAR set declaratively in the ASPX. I would like the Value to be set to the first customer in RadGrid1. To accomplish this I removed the declarative setting, registered the RadGrid_DataBound event, and programmatically set the Value property of the XmlHttpPanel. Setting the Value property appears to fire the XmlHttpPanel_ServiceRequest event, which intern binds Repeater1.

This works great on the initial page load and when selecting items from RadGrid1. However when you page through RadGrid1 the XmlHttpPanel does not update even though I can clearly see the XmlHttpPanel_ServiceRequest being called and the new CustomerID is being set correctly, the XmlHttpPanel just doesn't get updated.

I've also notice that the content in the RadEditor sometimes disappears (FireFox Only) when selecting items from the RadGrid. When a item is selected from the RadGrid you can see the content get loaded into the RadEditor but then it disappears quickly. Switching to HTML view the content is there but in Design mode it's completely gone.

Attached complete example of RadEditor content disappearing in FireFox 3.5.5.

One last question, how do I get the Ajax panel to display an animation while loading new content?

Thanks again for your help. Hopefully this one is as easy as setting a property as well.

Scott

Code

                    <%@ page language="C#" autoeventwireup="true" codefile="XmlHttpPanel.aspx.cs" inherits="XmlHttpPanel" %>         
                     
            <!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>         
                <telerik:radscriptblock id="RadScriptBlock" runat="server">         
                    <script type="text/javascript">         
                        //<![CDATA[        
                        function rowSelected(sender, args) {        
                            var key = args.getDataKeyValue("ContentId");        
                            var panel = $find("<%=RadXmlHttpPanel.ClientID %>");        
                            panel.set_value(key);        
                        }        
                        //]]>         
                    </script>         
                     
                </telerik:radscriptblock>         
            </head>         
            <body>         
                <form id="form1" runat="server">         
                <asp:scriptmanager id="ScriptManager" runat="server" />         
                <telerik:radajaxmanager id="RadAjaxManager" runat="server">         
                    <ajaxsettings>         
                        <telerik:ajaxsetting ajaxcontrolid="RadGrid">         
                            <updatedcontrols>         
                                <telerik:ajaxupdatedcontrol controlid="RadGrid" loadingpanelid="RadAjaxLoadingPanel" />         
                            </updatedcontrols>         
                        </telerik:ajaxsetting>         
                    </ajaxsettings>         
                </telerik:radajaxmanager>         
                <telerik:radajaxloadingpanel id="RadAjaxLoadingPanel" runat="server">         
                </telerik:radajaxloadingpanel>         
                <table>         
                    <tbody>         
                        <tr>         
                            <td valign="top">         
                                <telerik:radgrid id="RadGrid" style="margin-top:8px;width:250px;" skin="Telerik" onneeddatasource="RadGrid_NeedDataSource" allowsorting="True" pagesize="3" allowpaging="True" runat="server" autogeneratecolumns="false" gridlines="None">         
                                    <mastertableview clientdatakeynames="ContentId" summary="RadGrid table">         
                                        <columns>         
                                            <telerik:gridboundcolumn headertext="ContentId" datafield="ContentId" uniquename="ContentId" itemstyle-wrap="false" visible="false">         
                                            </telerik:gridboundcolumn>         
                                            <telerik:gridboundcolumn headertext="Name" datafield="ContentName" uniquename="ContentName" itemstyle-wrap="false">         
                                            </telerik:gridboundcolumn>         
                                        </columns>         
                                    </mastertableview>         
                                    <pagerstyle mode="NumericPages" pagebuttoncount="5" showpagertext="false" />         
                                    <clientsettings enablerowhoverstyle="true" selecting-allowrowselect="true" clientevents-onrowselected="rowSelected">         
                                    </clientsettings>         
                                </telerik:radgrid>         
                            </td>         
                            <td valign="top" style="width:100%;">         
                                <fieldset style="margin-left:10px;">         
                                    <legend>Selected Content</legend>         
                                    <div style="padding:15px;">         
                                        <telerik:radxmlhttppanel id="RadXmlHttpPanel" runat="server" value="c561e175-286b-de11-870e-001a6465230e" onservicerequest="RadXmlHttpPanel_ServiceRequest" enableclientscriptevaluation="true">         
                                            <table>         
                                                <tr>         
                                                    <td>         
                                                        Id:         
                                                    </td>         
                                                    <td>         
                                                        <asp:label id="ContentId" runat="server" />         
                                                    </td>         
                                                </tr>         
                                                <tr>         
                                                    <td>         
                                                        Name:         
                                                    </td>         
                                                    <td>         
                                                        <asp:textbox id="ContentName" runat="server" />         
                                                    </td>         
                                                </tr>         
                                                <tr>         
                                                    <td>         
                                                        Group:         
                                                    </td>         
                                                    <td>         
                                                        <telerik:radcombobox id="ContentGroups" runat="server" skin="Telerik" datavaluefield="ContentGroupId" datatextfield="ContentGroupName" />         
                                                    </td>         
                                                </tr>         
                                                <tr>         
                                                    <td valign="top">         
                                                        Content:         
                                                    </td>         
                                                    <td>         
                                                        <telerik:radeditor id="Content" runat="server" skin="Telerik" contentfilters="None" />         
                                                    </td>         
                                                </tr>         
                                            </table>         
                                        </telerik:radxmlhttppanel>         
                                    </div>         
                                </fieldset>         
                            </td>         
                        </tr>         
                    </tbody>         
                </table>         
                </form>         
            </body>         
            </html>         
                     

                    using System;         
            using System.Web.UI.WebControls;         
            using Telerik.Web.UI;         
            using System.Data;         
                     
            public partial class XmlHttpPanel : System.Web.UI.Page         
            {         
                protected void Page_Load(Object sender, EventArgs e)         
                {         
                }         
                     
                protected void RadGrid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)         
                {         
                    RadGrid.DataSource = GetContentDataTable();         
                }         
                     
                public DataTable GetContentGroupsDataTable()         
                {         
                    DataTable table = new DataTable("ContentGroups");         
                     
                    DataColumn column;         
                     
                    column = new DataColumn("ContentGroupId", Type.GetType("System.Guid"));         
                    table.Columns.Add(column);         
                     
                    column = new DataColumn("ContentGroupName", Type.GetType("System.String"));         
                    table.Columns.Add(column);         
                     
                    DataRow row;         
                     
                    row = table.NewRow();         
                    row["ContentGroupId"] = "c2b871d6-276b-de11-870e-001a6465230e";         
                    row["ContentGroupName"] = "General";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentGroupId"] = "f0bfecbd-0e6c-de11-870e-001a6465230e";         
                    row["ContentGroupName"] = "Head Shots";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentGroupId"] = "3fc05bfd-0e6c-de11-870e-001a6465230e";         
                    row["ContentGroupName"] = "Side Boxes";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentGroupId"] = "5ad0e508-0f6c-de11-870e-001a6465230e";         
                    row["ContentGroupName"] = "Site Wide";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentGroupId"] = "5bd0e508-0f6c-de11-870e-001a6465230e";         
                    row["ContentGroupName"] = "Full Page";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentGroupId"] = "f1c99814-166c-de11-870e-001a6465230e";         
                    row["ContentGroupName"] = "Support";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentGroupId"] = "faaf0dd2-75e3-de11-870e-001a6465230e";         
                    row["ContentGroupName"] = "Archive";         
                    table.Rows.Add(row);         
                     
                    return table;         
                }         
                     
                public DataTable GetContentDataTable()         
                {         
                    DataTable table = new DataTable("Content");         
                     
                    DataColumn column;         
                     
                    column = new DataColumn("ContentId", Type.GetType("System.Guid"));         
                    table.Columns.Add(column);         
                     
                    column = new DataColumn("ContentGroupId", Type.GetType("System.Guid"));         
                    table.Columns.Add(column);         
                     
                    column = new DataColumn("ContentName", Type.GetType("System.String"));         
                    table.Columns.Add(column);         
                     
                    DataRow row;         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "c561e175-286b-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "5ad0e508-0f6c-de11-870e-001a6465230e";         
                    row["ContentName"] = "Header";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "989815bc-2c6b-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "f0bfecbd-0e6c-de11-870e-001a6465230e";         
                    row["ContentName"] = "Footer";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "b6fa67ee-336b-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "5bd0e508-0f6c-de11-870e-001a6465230e";         
                    row["ContentName"] = "Top Promo";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "d91708ce-146c-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "f1c99814-166c-de11-870e-001a6465230e";         
                    row["ContentName"] = "Left Promo";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "db8a7d5d-176c-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "5bd0e508-0f6c-de11-870e-001a6465230e";         
                    row["ContentName"] = "Support";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "3d826fb0-176c-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "5bd0e508-0f6c-de11-870e-001a6465230e";         
                    row["ContentName"] = "Navigation";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "0d486be7-426c-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "c2b871d6-276b-de11-870e-001a6465230e";         
                    row["ContentName"] = "Status";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "5db3e9ef-426c-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "f0bfecbd-0e6c-de11-870e-001a6465230e";         
                    row["ContentName"] = "About";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "453a86f9-426c-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "f1c99814-166c-de11-870e-001a6465230e";         
                    row["ContentName"] = "Main";         
                    table.Rows.Add(row);         
                     
                    row = table.NewRow();         
                    row["ContentId"] = "07a34202-436c-de11-870e-001a6465230e";         
                    row["ContentGroupId"] = "f1c99814-166c-de11-870e-001a6465230e";         
                    row["ContentName"] = "Intro";         
                    table.Rows.Add(row);                 
                     
                    return table;         
                }         
                     
                protected void RadXmlHttpPanel_ServiceRequest(object sender, RadXmlHttpPanelEventArgs e)         
                {         
                    DataTable table = GetContentDataTable();         
                    DataRow[] rows = table.Select("ContentId = '" + e.Value + "'");         
                     
                    RadGrid.Items[0].Selected = true;         
                     
                    ContentId.Text = rows[0]["ContentId"].ToString();         
                    ContentName.Text = rows[0]["ContentName"].ToString();         
                             
                    ContentGroups.DataSource = GetContentGroupsDataTable();         
                    ContentGroups.DataBind();         
                     
                    RadComboBoxItem contentGroup = ContentGroups.FindItemByValue(rows[0]["ContentGroupId"].ToString());         
                    contentGroup.Selected = true;         
                    ContentGroups.Text = contentGroup.Text;         
                     
                    Content.Content = rows[0]["ContentName"].ToString();         
                }         
            }         

answered on 21 Dec 2009, 01:26 PM

Hi Scott,

1. I believe the content of the XmlHttpPanel is not updated after you change the page index of the Grid control, simply because only the content of the Grid is updated by the AJAX refresh (i.e. you have set that only the RadGrid should be updated when AJAX request occurs initiated by the RadGrid). Please modify your ajax settings so that the XmlHttpPanel is also updated when you initiate AJAX calls with the Grid control. The AjaxSettings should look like the following:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadXmlHttpPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

2. The problem with missing RadEditor's Design content after partial page update by the XmlHttpPanel is caused by the fact that the content is pasted in the XmlHttpPanel before all of the scripts loaded by the Editor have been evaluated. Please handle the OnClientResponseEnding client-side event of the XmlHttpPanel and set some timeout so that the scripts will be evaluated before the content is pasted. The modified project is pasted below.

3. You need to explicitly set the Skin (i.e. Skin="Default") property of the RadAjaxLoadingPanel or place some content inside the panel, that you want to be displayed during the AJAX call.

Modified source code:
.aspx

<%@ 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 id="Head1" runat="server">

<title></title>

<telerik:RadScriptBlock ID="RadScriptBlock" runat="server">

<script type="text/javascript">

//<![CDATA[

function rowSelected(sender, args)

{

var key = args.getDataKeyValue("ContentId");

var panel = $find("<%=RadXmlHttpPanel1.ClientID %>");

panel.set_value(key);

}

function OnClientResponseEnding(panel, args)

{

setTimeout("", 10);

}

//]]>

</script>

</telerik:RadScriptBlock>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager" runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadXmlHttpPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<table>

<tbody>

<tr>

<td valign="top">

<telerik:RadGrid ID="RadGrid1" Style="margin-top: 8px; width: 250px;" Skin="Telerik"

OnNeedDataSource="RadGrid_NeedDataSource" AllowSorting="True" PageSize="3" AllowPaging="True"

runat="server" AutoGenerateColumns="false" GridLines="None">

<MasterTableView ClientDataKeyNames="ContentId" Summary="RadGrid table">

<Columns>

<telerik:GridBoundColumn HeaderText="ContentId" DataField="ContentId" UniqueName="ContentId"

ItemStyle-Wrap="false" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Name" DataField="ContentName" UniqueName="ContentName"

ItemStyle-Wrap="false">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<PagerStyle Mode="NumericPages" PageButtonCount="5" ShowPagerText="false" />

<ClientSettings EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" ClientEvents-OnRowSelected="rowSelected">

</ClientSettings>

</telerik:RadGrid>

</td>

<td valign="top" style="width: 100%;">

<fieldset style="margin-left: 10px;">

<legend>Selected Content</legend>

<div style="padding: 15px;">

<telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server" Value="c561e175-286b-de11-870e-001a6465230e"

OnServiceRequest="RadXmlHttpPanel_ServiceRequest" EnableClientScriptEvaluation="true"

LoadingPanelID="RadAjaxLoadingPanel1" OnClientResponseEnding="OnClientResponseEnding">

<table>

<tr>

<td>

Id:

</td>

<td>

<asp:Label ID="ContentId" runat="server" />

</td>

</tr>

<tr>

<td>

Name:

</td>

<td>

<asp:TextBox ID="ContentName" runat="server" />

</td>

</tr>

<tr>

<td>

Group:

</td>

<td>

<telerik:RadComboBox ID="ContentGroups" runat="server" Skin="Telerik" DataValueField="ContentGroupId"

DataTextField="ContentGroupName" />

</td>

</tr>

<tr>

<td valign="top">

Content:

</td>

<td>

<telerik:RadEditor ID="Content" runat="server" Skin="Telerik" ContentFilters="None" />

</td>

</tr>

</table>

</telerik:RadXmlHttpPanel>

</div>

</fieldset>

</td>

</tr>

</tbody>

</table>

</form>

</body>

</html>

I hope this is helpful.

Regards,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 22 Dec 2009, 03:20 PM

Hello Scott,

This online demo shows how to display a specified AjaxLoadingPanel during the callback request. The LoadingPanelID property of the XmlHttpPanel control needs to be set to the ID of the AjaxLoadingPanel.

Are you setting the Value of the XmlHttpPanel in any of the server side events of the Grid control, because in the project that you have sent me in one of your previous posts I couldn't see where you set this property? Another way is to initiate a partial page update after the AJAX request has finished, by rendering client-side from the server. The following demo shows how to execute client-script after the AJAX request has finished, using RadAjaxManager: http://demos.telerik.com/aspnet-ajax/ajax/examples/common/recreatescripts/defaultcs.aspx.

Greetings,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 22 Dec 2009, 05:45 PM

safari.jpg

ie.jpg

Pero,

Setting the LoadingPanelID of the XmlHttpPanel appears to have solved the problem (Note: Only on IE an FF, Safari & Chrome don't show the animate). I attached a couple of screen shots.

Thanks for all your help. I'm looking into the other example you provided now.

Scott

answered on 23 Dec 2009, 07:40 AM

Hello Scott,

There are two ways to make the AjaxLoadingPanel show when viewing the page with Safari or Chrome:

When RenderMode="Inline" (which is the default value) the XmlHttpPanel is rendered as a <span> element, and you need to set fixed width and height to the XmlHttpPanel in order for the LoadingPanel to be displayed. For example in the project that you sent the XmlHttpPanel has Width="743px" and Height="490px". Setting these properties overcomes the issue.
Set RenderMode="Block" and you don't need to set width and height. This way the XmlHttpPanel is rendered as a <div> element and the AjaxLoadingPanel will be shown over the whole <div> and not just over the content in the <div>.

All the best,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

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

RadEditor in XmlHttpPanel

7 Answers, 1 is accepted