[Solved] Delay loading of grids in different tabs

[Steve LaForge]

I have an application that opens to a screen with a radtabstrip.  The tabstrip has 3 tabs.  The first is loaded when the page is loaded.  The second and third tabs have grids displayed in their associated pageviews.  What I would like to do is to make the grids not visible when the page loads, but have them load and display when the user clicks on the tab.  The idea is to save the resources of loading the grids until the user actually wants to see them.

I tried setting Visible = false on both grids, then I have this for my AjaxManager (I'm actually using a AjaxManagerProxy because I have a RadAjaxManager on my master page):

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="gridCMs">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gridCMs" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="gridInOpEquip">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gridInOpEquip" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="tabMain">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gridCMs" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="gridInOpEquip" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

where tabMain is my tabstrip and gridCMs is the grid that should appear on the second tab while gridInOpEquip would show on the third tab.  Then I added this code to handle the tab_click:

Protected Sub tabMain_TabClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTabStripEventArgs) Handles tabMain.TabClick
        Select Case e.Tab.Value
            Case "OpenCMs"
                If gridCMs.Visible = False Then
                    gridCMs.Visible = True
                    gridCMs.DataBind()
                End If
            Case "InOpEquip"
                If gridInOpEquip.Visible = False Then
                    gridInOpEquip.Visible = True
                    gridInOpEquip.DataBind()
                End If
        End Select
    End Sub

Yes, I did try just making it visible without the call to DataBind.  When I have this code enabled, the code executes but the tab is no longer selected, so I can't even see the selected pageview.  If I comment out this code, and change the grids from Visible=false to Visible=true, it works just fine...except that I don't have the delayed loading of the grids.

I look forward to any tips that you can provide.  Many thanks!


x

[Princy]

Hi,

Have you used AdvancedDataBinding to bind the grids.If so you need to call RadGrid1.Rebind() instead of DataBind.

Thanks,

Princy

[Steve LaForge]

I was already using advanced data binding.  I added <telerik:AjaxUpdatedControl ControlID="tabMain" /> to my RadAjaxManagerProxy:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="gridCMs">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gridCMs" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="gridInOpEquip">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gridInOpEquip" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="tabMain">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gridCMs" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="gridInOpEquip" />
                    <telerik:AjaxUpdatedControl ControlID="tabMain" />
                    <telerik:AjaxUpdatedControl ControlID="mpgMain" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

After that, the selected tab is now highlighted, it executes the code for the TabClick server event and the NeedDataSource event handler executes.  But the correct page view does not display.  I tried adding <telerik:AjaxUpdatedControl ControlID="mpgMain" /> to the AjaxManagerProxy for the tab control, but now I get a Javascript error "Microsoft JSCript runtime error: 'undefined' is null or not an object." in MicrosoftAjax.js.

Thanks!

[Pavlina]

Hi Steve,

Please review the below articles for further information about loading user controls with ajax and RadAjax with UserControls:

http://demos.telerik.com/aspnet-ajax/Ajax/Examples/Common/LoadingUserControls/DefaultCS.aspx
http://www.telerik.com/help/aspnet-ajax/ajxloadusercontrols.html
http://www.telerik.com/help/aspnet-ajax/ajxusercontrols.html
http://www.telerik.com/help/aspnet-ajax/ajax-manager-proxy.html

Check it out and let me know if any questions arise.

Regards,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.