ASPxLoadingPanel + ASPxCallback


<asp:Content ID="Content2" ContentPlaceHolderID="phContent" runat="Server">
     <dxcb:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="Callback">
         <ClientSideEvents CallbackComplete="function(s, e) { LoadingPanel.Hide(); }" />
     </dxcb:ASPxCallback>

     <dxe:ASPxCheckBox ID="ASPxCheckBox1" runat="server" AutoPostBack="true" Checked="True"
         Text="Display the ASPxLoadingPanel over a specific control">
     </dxe:ASPxCheckBox>
     <br />
     <div style="padding: 0px 100px;">
         <table style="width: 100%;"><tr><td id="Panel" align="center" valign="middle" class="Panel">
             <dxe:ASPxButton ID="ASPxButton1" runat="server" Text="Show Loading Panel" AutoPostBack="False">
                 <ClientSideEvents Click="function(s, e) {
     Callback.PerformCallback();
     LoadingPanel.Show();

 }"
                     />
             </dxe:ASPxButton>
         </td></tr></table>
     </div>
     <dxlp:ASPxLoadingPanel ID="LoadingPanel" runat="server" ClientInstanceName="LoadingPanel" Modal="True">
     </dxlp:ASPxLoadingPanel>

 </asp:Content>

ASPxCallback Example

 <dxcb:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="Callback1" OnCallback="ASPxCallback1_Callback">
     <ClientSideEvents CallbackComplete="function(s, e) {
         var element = GetDetailsContainer(e.parameter);
         element.innerHTML = e.result;
     }" />
 </dxcb:ASPxCallback>
----------------
  protected void ASPxCallback1_Callback(object source, CallbackEventArgs e) {       
         string xpath = string.Format("//items/item[@newsID='{0}']", e.Parameter);
         XmlNode node = XmlDataSource1.GetXmlDocument().SelectSingleNode(xpath);
         if (node != null)
             e.Result = node.Attributes["Description"].Value;
     }
----------------
function GetDetailsContainer(id) {
    return document.getElementById("details" + id.toString());
}        
function ShowDetails(id) {
    GetDetailsContainer(id).style.paddingTop = "14px";
    GetDetailsContainer(id).style.paddingRight = "12px";
    GetDetailsContainer(id).innerHTML = "Loading&hellip;";
    Callback1.PerformCallback(id);
}

ASPxCallbackPanel + menu examle

For that purposes you can use our ASPxCallbackPanel control.

ASPX:

<

table style="width: 640px;">
   
<tr>
       
<td style="text-align: center;">View Selector</td>
       
<td style="text-align: center;">Dynamic View</td>
   
</tr>
   
<tr>
       
<td style="width: 100px; border: 1px solid #FA3385;">
           
<dxm:ASPxMenu ID="ASPxMenu1" runat="server" Orientation="Vertical">
               
<ClientSideEvents ItemClick="function(s, e) { callbackPanel.PerformCallback(e.item.index); }" />
                
<Items>
                   
<dxm:MenuItem Text="View #1" Name="View1" />
                    
<dxm:MenuItem Text="View #2" Name="View2" />
               
</Items>
            
</dxm:ASPxMenu>
         
</td>
        
<td style="border: 1px solid #B6FC35;">
            
<dxcp:ASPxCallbackPanel ID="ASPxCallbackPanel1" runat="server" ClientInstanceName="callbackPanel" OnCallback="OnCallback">
                
<PanelCollection>
                    
<dxp:PanelContent runat="server">
                        
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                            
<asp:View ID="View1" runat="server">
                                
View #1 Content
                             
</asp:View>
                            
<asp:View ID="View2" runat="server">
                                 
View #2 Content
                            
</asp:View>
                        
</asp:MultiView>
                     
</dxp:PanelContent>
                 
</PanelCollection>
              
</dxcp:ASPxCallbackPanel>
         
</td>
     
</tr>
</table>

CS:

protected

void OnCallback(object source, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e) {
    MultiView1.ActiveViewIndex =
Int32.Parse(e.Parameter);
}