Changing ContentURL using AJAX on the server-side.

[B]

I have two RadPanes. The one on the left has a RadGrid in it. On the SelectedIndexChanged event, the right pane should load the appropriate web page using AJAX though server-side code. I have gotten this to work with a postback, but once I try to Ajaxify it using the RadAjaxManager it stops working (I set the RagGrid as the control that initiates the AJAX request and the right RadPane as the control that is updated by the respective AJAX). I want to do it through the AJAX on the server-side because I want to show a RadAjaxLoadingPanel as its loading. Is there a way to do this?


Thanks,
Blake

[Shaun Peet]

Hello Blake,

My suggestion in your case would be to use client-side script to accomplish what you're after - particularly if the only reason you want to use AJAX is to show a loading panel.  Use your client script to show a "loading panel" div, and then set the content page in the right pane.  Then hide the loading panel after the page has loaded in your right-hand pane.  For example:

function loadDetails(args) {
  toggleLoading(true);
  var splitter = $find("<%= RadSplitter1.ClientID %>");
  var pane = splitter.getPaneById("RightPaneID");
  pane.set_contentUrl("RightSidePage.aspx?Args=" + args);
}

function toggleLoading(show) {
    var panel = document.getElementById("LoadingPanelDiv");
    if (show) {
      panel.style.visibility = 'visible';
    }
    else {
      panel.style.visibility = 'hidden;
    }
}

So then set your grid to fire a client-click event to call loadDetails() with the necessary arguments.  Finally, in the server-side Page_Load event of the page that is loaded on the right-hand side, add this (in VB):

Page.ClientScript.RegisterStartupScript(Type.GetType("System.String"),"hideTheLoading","parent.toggleLoading(false)",true)

This will be far, far faster than using ajax and / or server postbacks.  The server is already doing enough work loading that right-hand side page over and over again ;)

Hope that helps,

Shaun.

[B]

Thanks for your reply. I just have one more question. How do I show the loading panel only in the right pane where the page is being loaded?

[Shaun Peet]

Hello Blake,

Probably the easiest way would be to use absolute positioning with z-index.  For example, on the page with the splitter, add this:

<div id="LoadingPanelDiv" style="visibility:hidden;">
  Loading... Please Wait.
</div>

And in your stylesheet:

#LoadingPanelDiv {
  position: absolute; z-index: 1000;
  top: 20px; right: 0px; width: 200px;
  height: 100px; line-height: 100px;
  font-size: 20px; font-weight: bold; text-align: right; 
  color: #fff; background: #444;
}

So just imagine this as a layer on top of the right-hand pane.  You can play around with the widths & heights as necessary.

Shaun.

[Tsvetie]

Hi Blake,
I just wanted to add another approach you could use to position the RadAjaxLoadingPanel - use the show client method of loading panel control and specify the ID of the DIV, holding the content of the RadPane as a parameter. You can get a reference to this element, using the getContentElement client method of the RadPane client object.

Regards,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.