ajaxifying multiple nested controls w/ Splitter

[Albert Shenker]

I have a splitter with several panes. One of the panes contains a tabstrip/multipage with usercontrols being loaded on each pageview. Each usercontrol contains a grid. I would like to ajaxify these usercontrols individually, since there may be complex ajax interactions in each. Normally, i would just add an AjaxManagerProxy Control to the usercontrols to accomplish this. However, here's the problem I am running into.

On the page which contains all of this, I run some javascript code in the Splitter OnClientLoad and OnClientResize events in order to properly size the grids (my splitter panes contain borders and padding and i have found that they do not automatically size correctly in a number of browsers (particularly ie7). Here is my resizing code:

function OnSpliterClientLoaded(sender, args) { 

                SizeGridToFit() 

            } 

    

            function OnSplitterClientResized(sender, Args) { 

                SizeGridToFit();  

            } 

    

            function SizeGridToFit() { 

                

                var tabStrip = $find("<%= MyTabStrip.ClientID %>"); 

    

                switch (tabStrip.get_selectedTab().get_value()) { 

                    case "Travel": 

                        grid = $find("<%= MyUserControl1.MyGrid.ClientID %>"); 

                        break; 
                    case "Other": 

                        grid = $find("<%= MyUserControl2.MyGrid.ClientID %>"); 

                        break;

                } 

    

                if (grid) { 

                    var mpPane = $find("<%= MultiPagePane1.ClientId %>") 

                        

                    grid.get_element().style.height = mpPane.get_height() - 12 + 'px'; 

                        

                    var ieVersion = getInternetExplorerVersion() 

                    if (ieVersion >= 0 && ieVersion < 8.0) { 

                        //necessary to get horizontal scrollbars to work in IE 7. 

                        grid.get_element().style.width = mpPane.get_width() - 12 + 'px'; 

                    } 

                        

                    grid.repaint(); 

                } 

                    

            } 

    

function getInternetExplorerVersion() 

// Returns the version of Internet Explorer or a -1 

// (indicating the use of another browser). 

{ 

    var rv = -1; // Return value assumes failure. 

    if (navigator.appName == 'Microsoft Internet Explorer') { 

        var ua = navigator.userAgent; 

        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 

        if (re.exec(ua) != null) 

            rv = parseFloat(RegExp.$1); 

    } 

    return rv; 

}

if i do normal postbacks, then everything works as expected. However, if I ajaxify the usercontrols using AjaxManagerProxy controls, then after an ajaxupdate, the padding below the grid disappears. What is happening is, the grid is rebound through an ajaxupdate, however the code I have for perfoming the reisizing never gets run. Attached are before and after screen captures of the page. The before shot shows what the page looks like when it is loaded or if the browser is resized. As you can see, the grid is sized properly to show the appropriate padding at the bottom. if I ajaxify the grid and then do something, like sort a column, then the padding below the grid disappears (see the after shot). Again, i have an idea why this is happening.. the grid sizing code never gets run because that code is outside the user controls and occurs as a response to events in the splitter. My question is, is there a way for me to get this to work and still ajaxify the usercontrols (grids) individually.

[Tsvetina]

Hi Albert,

Have you tried calling the SizeGridToFit() method from the OnResponseEnd client event of the respective AJAX control? Or register a client call to the method through the ScriptManager class. This way you may be able to force the grid to size even when the OnSplitterClientLoaded event has not been fired.

Greetings,
Tsvetina
the Telerik team

[Albert Shenker]

Option # 2 wouldn't be great because my grids are in UserControls. They have no knowledge of the "SizeGridToFit" function since that is on the container page. And so I wouldn't want to be calling functions outside the UserControl in response to actions taking place in the grid.

Option #1 may bear more fruit. Can you forward a sample snippet of how I would wire up the client-side event handler. In my case, the ajaxmanager is dynamically loaded in Page_Init in a Page Base Class. I assume there is some way of specifying the client-side event handler through server-side code, but I am unfamiliar with the syntax.

Thanks.

[Tsvetina]

Hi Albert,

You could try using the GetCurrent() method of the RadAjaxManager class to get a reference to the manager and attach the client event inside the Page_Load event of the page:

RadAjaxManager.GetCurrent(Page).ClientEvents.OnResponseEnd = "responseEnd";

Note that you should be careful to not attach this event more than once on the whole page, as it will fire on each reponse end and may lead to undesired behavior at some point.

Regards,
Tsvetina
the Telerik team