DevExpress CallbackPanel PerformCallback hangs when content includes PageControl or TabControl

Question

I would like to refresh the tabs in my TabControl on demand, when a separate client action occurs on the page. I have placed my TabControl extension (tried PageControl also) within a CallbackPanel, and the EndCallBack event never fires. If ShowLoadingPanel is set to true, you see that the call is hanging because the loading panel never disappears. Both OnBeginCallback and the actual Controller callback action are executed. I assume there are some sort of conflicting callbacks occuring between the panel and tabs but I cannot figure out how to resolve it. If I replace the TabControl with basic html or other simpler DevExpress controls, everything works fine.

TabControl Partial (CallbackTestPageControl.cshtml):

@Html.DevExpress().TabControl(settings => {
    settings.Name = "testTabControl";
    settings.Width = Unit.Percentage(100);
    settings.Tabs.Add("tab 1");
    settings.Tabs.Add("tab 2");
    settings.Tabs.Add("tab 3");
}).GetHtml()

Panel Partial (CallbackTestPanel.cshtml):

@Html.DevExpress().CallbackPanel(settings =>
{
    settings.Name = "cbpTabStrip";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "CallbackTestPanel" };
    settings.ClientSideEvents.BeginCallback = "OnBeginCallback";
    settings.ClientSideEvents.EndCallback = "OnEndCallback";
    settings.SetContent(() => Html.RenderPartial("CallbackTestPageControl"));
}).GetHtml()

View (CallbackTest.cshtml):

<script type="text/javascript">
    var testId = null;
    function ButtonClicked(s, e) {
        alert('click');
        testId = 1;
        if (!cbpTabStrip.InCallback())
            cbpTabStrip.PerformCallback();
    }
    function OnBeginCallback(s, e) {
        alert('begin');
        e.customArgs["Id"] = testId;
        testId = null;
    }
    function OnEndCallback(s, e) {
        alert('end');
        if (testId != null)
            cbpTabStrip.PerformCallback();
    }
</script>

@Html.DevExpress().Button(settings => {
    settings.Name = "CallbackButton";
    settings.Text = "Callback";
    settings.ClientSideEvents.Click = "ButtonClicked";
}).GetHtml()

@Html.Partial("CallbackTestPanel")

Controller (HomeController.cs):

public ActionResult CallbackTest()
{
    return View();
}
public ActionResult CallbackTestPanel()
{
    int id = !String.IsNullOrEmpty(Request.Params["Id"]) ? int.Parse(Request.Params["Id"]) : 0;
    return PartialView("CallbackTestPanel");
}

ADDITIONAL INFO: Also, I have tried updating the DevExpress configuration in the web.config based on other suggestions online. Specifically - updating the enableResourceMerging attribute on the compression element to false rather than true. This seemed to allow the callback to end intermittantly. I really don't want to disable resource merging anyway, so I'm actually glad this didn't provide a reliable solution. So, this is what I currently have:

<devExpress>
    <themes enableThemesAssembly="true" styleSheetTheme="" theme="Office2010Silver" />
    <compression enableHtmlCompression="true" 
        enableCallbackCompression="true" 
        enableResourceCompression="true" 
        enableResourceMerging="true" />
    <settings rightToLeft="false" />
    <errors callbackErrorRedirectUrl="" />
</devExpress>

Answer 1

I'm sorry if I wasted anyone's time on this. In the end, the problem was that I had all my non-DevExpress scripts at the bottom of my layout body. I needed to move jQuery into the head prior to the DevExpress scripts. Strangely enough, everything else had been working fine prior to this issue. Thanks to anyone who tried to reproduce.

Answer 2

I know this is old but my issue is I had caching enabled that form i.e.

Once I removed that everything worked. Hope this helps someone else in the future.