Changing ContentURL using AJAX on the server-side.

5 posts, 0 answers
  1. B
    B avatar
    9 posts
    Member since:
    Jul 2008

    Posted 07 Aug 2008 Link to this post

    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
  2. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 08 Aug 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. B
    B avatar
    9 posts
    Member since:
    Jul 2008

    Posted 08 Aug 2008 Link to this post

    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?
  5. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 08 Aug 2008 Link to this post

    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.
  6. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 11 Aug 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017