Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
405
pane.set_contentUrl() to use ajax_indicator()
posted

We are using a WebSplitter and calling from javascript the "pane.set_contentUrl()" method to load a page into a splitter pane.

Unfortunately it seems the WebSplitter doesn't support the global ajaxIndicator (at least I couldn't find it anywhere - the splitter.get_ajaxIndicator() returns null).

How can we implement such functionality in the WebSplitter?

Thanks in advance

Parents
No Data
Reply
  • 24497
    posted

    Hi Leon,

    The ajaxIndicator is related to asynchronously loaded content similar to content of submitted UpdatePanel. The $IG.LayoutPane.set_contentUrl(...) sets src of iframe, and that is completely different functionality.

    It is possible to show an indicator when src is modified and hide that indicator when iframe was loaded. Similar is used as a built-in functionality of WebTab to show progress of newly loaded url (mostly if tab was not visible on initial load or when new tab was added on client). But WebSplitter does not target similar scenario: in most cases splitter panes are visible on start.

    I wrote for you a sample, which uses IG.AjaxIndicator to show loading progress when src of splitter pane was modified (assumes that you want to load url into first content pane of WebSplitter1)

    <script type="text/javascript">
    var ai;
    function loadUrl() {
     
    var splitter = $find('WebSplitter1');
     
    var cp = splitter.getPaneAt(0);
     
    cp.set_contentUrl(http://es.infragistics.com);
     
    var
    iframe = cp.get_iframe();
     
    if (!ai) {
       
    ai = new $IG.AjaxIndicator(null);
        
    ai.set_imageUrl("ig_res/Default/images/ig_ajaxIndicator.gif");
        
    //ai.set_css("ig_AjaxIndicator");
        
    //ai.set_blockCss("ig_AjaxIndicatorBlock");
        
    //etc. custom settings
        
    ai.set_enabled(true);
        
    ai.set_relativeToControl(true);
        
    ai.setRelativeContainer(iframe);
       }
       ai.show();
       $addHandler(iframe, 'load', function () { ai.hide(); } );
    }
    </script>
    <input type="button" value="LoadUrl" onclick="loadUrl()" />

Children
No Data