Refresh only content using UpdatePanel control - asp.net

Question

Is it possible to use UpdatePanel control with navigating through the left panel (menu)?
In Main.master there are left menu
<dx:ASPxNavBar ID="ASPxNavBar1" runat="server" AutoCollapse="True" EnableAnimation="True" Width="100%">
<dx:NavBarGroup Text="Group">
<Items>
<dx:NavBarItem NavigateUrl="Content/Content1.aspx" Text="Content1"></dx:NavBarItem>
<dx:NavBarItem NavigateUrl="Content/Content2.aspx" Text="Data Subject"></dx:NavBarItem>
</Items>
</dx:NavBarGroup>
</dx:ASPxNavBar>
and I'm trying to use refresh only content using UpdatePanel control
<div class="contentPane">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" updatemode="conditional">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
but it doesn't work; header and menu still reloading when navigating through the menu.
Content1.aspx and Content2.aspx files have just an usual content inside of <asp:content> tag
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" KeyFieldName="PK" Width="750px">
<Columns>
<dx:GridViewCommandColumn ShowNewButtonInHeader="True" VisibleIndex="0" ShowDeleteButton="True" ShowEditButton="True">
</dx:GridViewCommandColumn>
<dx:GridViewDataTextColumn FieldName="PK" ReadOnly="True" Visible="false" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Name" VisibleIndex="2">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
</asp:Content>

Answer 1

I wonder why you are using an UpdatePanel is that a requeriment?
I would use an ASPxCallbackPanel which is a great replacement for the UpdatePanel and you can use it since you are using DevExpress controls
<script type="text/javascript">
var postponedCallbackRequired = false;
function OnListBoxIndexChanged(s, e) {
if(CallbackPanel.InCallback())
postponedCallbackRequired = true;
else
CallbackPanel.PerformCallback();
}
function OnEndCallback(s, e) {
if(postponedCallbackRequired) {
CallbackPanel.PerformCallback();
postponedCallbackRequired = false;
}
}
</script>
<dx:ASPxListBox runat="server" Height="221px" Width="100%" TextField="Name" DataSourceID="EmployeesDataSource1"
ValueField="EmployeeID" ID="ASPxListBox1" ClientInstanceName="ListBox" BackColor="Transparent">
<Border BorderWidth="0px"></Border>
<ItemStyle>
<Border BorderWidth="0px"></Border>
</ItemStyle>
<ClientSideEvents SelectedIndexChanged="OnListBoxIndexChanged" />
</dx:ASPxListBox>
<dx:ASPxCallbackPanel runat="server" ID="ASPxCallbackPanel1" Height="250px" ClientInstanceName="CallbackPanel" RenderMode="Table">
<ClientSideEvents EndCallback="OnEndCallback"></ClientSideEvents>
<PanelCollection>
<dx:PanelContent ID="PanelContent3" runat="server">
</dx:PanelContent>
</PanelCollection>
</dx:ASPxCallbackPanel>
You can see a complete sample code here