CallbackPanel has 2 elements:
- content element can contain contain html, js, css and other server controls - like Obout Calendar, Obout EasyMenu, ASP.NET controls (ASP Textbox, ASP DropDownList, etc.).
- loading element is optional and it can include the html to display while the panel is loading.
If ommited, a default "Loading..." text is shown and all styles from content element are applied to theloading element.
It is visible only when the callback panel is updated using client-side UpdatePanel method.
Both content and loading elements can contain style definitions.
<oajax:CallbackPanel runat="server" ID="callbackPanel1">
<content style="border:1px solid gray;width:400px;height:200px">
some content
</content>
<loading style="border:1px solid red;width:400px;height:200px">
Loading...please wait
</loading>
</oajax:CallbackPanel>
---------------------------------------------
It is very useful to load dynamic scripts, dynamic stylesheets, dynamic controls, etc. The update of the panel is done without reloading the page. Client-side update ob_post.UpdatePanel("callbackPanel1"); ob_post.UpdatePanelInContainer("callbackPanel1", "container"); ob_post.UpdatePanelFromPage("callbackPanel1", "container", "callbackPanels.aspx"); ob_post.UpdateAllPanels(); Server-side update UpdatePanel("callbackPanel1"); UpdatePanel("callbackPanel1", "container"); UpdateAllPanels();
--------------------------------------------------------------------
Update Callback Panel specified by id.
For example, you can use the next lines:
Client-side update
ob_post.UpdatePanel("callbackPanel1");
Server-side update
UpdatePanel("callbackPanel1");
Example 1 - Callback Panel contain html, css and ASP DataList control.
<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %>
<oajax:CallbackPanel runat="server" ID="callbackPanel1">
<content style="border: gray 1px solid;">
<style>
.divItem
{
border-bottom:1px solid gray;
font-size:9px;
width:130px;
padding-top:4px;
padding-bottom:4px;
}
</style>
<b>My List</b>
<asp:DataList id="dataList1" runat="server">
<ItemTemplate>
<div class="divItem">
some item content
</div>
</ItemTemplate>
</asp:DataList>
<content>
<loading style="border: gray 1px solid;">
Loading...please wait
</loading>
</oajax:CallbackPanel>
See also live UpdatePanel Example.
Example 2 - Callback Panel contain ASP Literal control.
<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %>
<oajax:CallbackPanel runat="server" ID="callbackPanel1">
<content style="border: gray 1px solid;">
<asp:Literal id="serverTime" Runat="server"></asp:Literal>
</content>
<loading style="border: gray 1px solid;">
Loading...please wait
</loading>
</oajax:CallbackPanel>
Example 3 - multiple Callback panel.
Client-side update
ob_post.UpdateAllPanels();
Server-side update
UpdateAllPanels();
public void UpdateAllPanels()
{
UpdatePanel("CallBackPanel1");
UpdatePanel("CallBackPanel2");
}
<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %>
<!-- CallbackPanel1-->
<oajax:CallbackPanel runat="server" ID="callbackPanel1">
<content style="border: gray 1px solid;">
<span style="color:red">
<asp:Literal id="serverMillisecond" Runat="server"></asp:Literal>
</span>
</content>
</oajax:CallbackPanel>
<!-- CallbackPanel2-->
<oajax:CallbackPanel runat="server" ID="callbackpanel2">
<content style="border: gray 1px solid;">
<asp:Literal id="serverTime" Runat="server"></asp:Literal>
</content>
</oajax:CallbackPanel>
Example 4- Callback Panel inside Update panel.
<%@ Register TagPrefix="oajax" Namespace="OboutInc" Assembly="obout_AJAXPage" %>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<oajax:CallbackPanel ID="CallBackPanel1" runat="server">
<Content>
<table border="0" width="100%">
<tr>
<td>
age ID="imgIndication" runat="server" Height="15px" ImageUrl="~/images/icon-delete.gif" Width="15px" />
</td>
</tr>
</table>
</Content>
</oajax:CallbackPanel>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
Server-Side Update
UpdatePanel("callbackPanel1");
