Loading Panel and Grid

10 posts, 0 answers
  1. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 02 May 2013 Link to this post

    Hi there

    I have a large data grid that I need to have a loading panel for. I have got it working by combining code from a few posts. I have two problems though.

    1. If I don't set a height on my Grid, the initial loading panel is about about 5pixels high. The problem is that the data records are not all the same height, so it generates the height on load. Is there a way around this?

    2. It shows the loading wheel on the initial page load, but not when I browse to other pages in my grid?

    ASPX
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function pageLoad(sender, eventArgs) {
                    if (!eventArgs.get_isPartialLoad()) {
                        $find("<%= uxAjaxManager.ClientID %>").ajaxRequest("InitialPageLoad");
                    }
                }
            </script>
        </telerik:RadCodeBlock>
    <div>
        <telerik:RadAjaxManager ID="uxAjaxManager" runat="server" OnAjaxRequest="uxAjaxManager_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="uxAjaxManager">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="uxTitleGrid" LoadingPanelID="uxTitleGridLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div class="input_slide">       
            <telerik:RadGrid ID="uxTitleGrid" runat="server"
                 AutoGenerateColumns="false" AllowPaging="true" PageSize="20" Width="100%"
                 EnableLinqExpressions="false" AllowSorting="true" AllowFilteringByColumn="true"
                 OnNeedDataSource="uxTitleGrid_NeedDataSource"
                 OnItemDataBound="FormatTitleColumns">
                <GroupingSettings CaseSensitive="false" />
                <MasterTableView>
                    <Columns>
                        .
                        .
                        .
                    </Columns>  
                    <NoRecordsTemplate>
                        No Titles listed for your company.
                    </NoRecordsTemplate>                                             
                </MasterTableView>         
            </telerik:RadGrid>          
            <telerik:RadAjaxLoadingPanel ID="uxTitleGridLoadingPanel" runat="server" />
       </div>   
    </div>
    and here is the code behind
    protected void uxAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        if (e.Argument == "InitialPageLoad")
        {
            Session["TitlesCanLoad"] = "Yes";
            uxTitleGrid.Rebind();
        }
    }
     
    protected void uxTitleGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        if (Session["TitlesCanLoad"].ToString() == "Yes")
        {
            User currentUser = new User(HttpContext.Current.User.Identity.Name.ToString());
            uxTitleGrid.DataSource = RPGService.GetTitles(currentUser.CompanyName, currentUser.UserTypeID);
        }
    }
    Thanks.
  2. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 03 May 2013 Link to this post

    Just an update, I thought the Loading Panel should show by default when using filters/grid paging?

    I have added the following code, but it still doesn't show the loading panel when a filter is applied or the grid is paged?

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
     
            function ShowLoadingPanel(sender, args) {
                currentLoadingPanel = $find("<%= uxTitleGridLoadingPanel.ClientID %>");
                currentUpdatedControl = "<%= uxTitleGrid.ClientID %>";
                
                //show the loading panel over the updated control
                currentLoadingPanel.show(currentUpdatedControl);
            }
            function HideLoadingPanel() {
                //hide the loading panel and clean up the global variables
                if (currentLoadingPanel != null)
                    currentLoadingPanel.hide(currentUpdatedControl);
                currentUpdatedControl = null;
                currentLoadingPanel = null;
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadAjaxManager ID="uxAjaxManager" runat="server" OnAjaxRequest="uxAjaxManager_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="uxAjaxManager">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="uxTitleGrid" LoadingPanelID="uxTitleGridLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="ShowLoadingPanel" OnResponseEnd="HideLoadingPanel" />
    </telerik:RadAjaxManager>
    I guess I am not understanding how the requests work?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 06 May 2013 Link to this post

    Hello,

    Try setting the RadGrid as the AJAX initiator and see if that fixes the problem.  I don't think you would need to manually show/hide the indicator in this scenario.  Let me know how it goes!
    <telerik:RadAjaxManager ID="uxAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="uxTitleGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="uxTitleGrid" LoadingPanelID="uxTitleGridLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
  5. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 10 May 2013 Link to this post

    Hello

    As you can see from my OP, that is the way I had it. It doesn't seem to be firing the loading panel.

    I added some code to show the loading panel on the initial load of the page, that worked, but none of the other events fired the loading panel?

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 14 May 2013 Link to this post

    Hello Jako,

    In order for the loading panel to be visible the Skin property has to be set. The default value of the property is empty string which translates to no skin. Try modifying your markup for the loading panel like the snippet below:
    <telerik:RadAjaxLoadingPanel ID="uxTitleGridLoadingPanel" runat="server" Skin="Default">
            </telerik:RadAjaxLoadingPanel>

    As i understand you would like to show the loading panel over the grid on paging, filtering, etc. In order do this you need to set the RadGrid as the initiator of a request and as updated control in RadAjaxManager. This is suggested by Mathew in a previous post.

    I am attaching a sample project illustrating the described approach.

    Greetings,
    Victor Tachev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 17 May 2013 Link to this post

    Hi Victor

    This is working as expected. The problem I have is that its a large dataset that is pulling through and on the initial load of the page, there is no ajax call and therefore no LoadingPanel that shows data is being pulled from the server.

    But once the page has loaded, the LoadingPanel works great on grid paging/filtering etc.

    I just need the initial load of the page to also show the LoadingPanel.

    Is this possible?
  8. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 17 May 2013 Link to this post

    Yes it is possible.  Please see this article for more info: http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html

    The focus on the following example is the pageLoad function, which initiates an AJAX request from the client. To be more functional, we have added an update of an ASP:Panel to this example. Thus, we need an AjaxSetting, where RadAjaxManager updates the panel (shows an initially invisible inner panel actually).

    JavaScript
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad(sender, eventArgs) {
                if (!eventArgs.get_isPartialLoad()) {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");
                }
            }     
        </script>
    </telerik:RadCodeBlock>

    ASPX
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:Panel ID="Panel1" runat="server">
        <asp:Panel ID="Panel2" Visible="false" runat="server">
            My content:
        </asp:Panel>
    </asp:Panel>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
        Width="75px" Transparency="50">
        <img alt="Loading..." src="~/loading.gif" style="border: 0;" />
    </telerik:RadAjaxLoadingPanel>

    C#
    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {   
        if (e.Argument == "InitialPageLoad")   
        {       
            //simulate longer page load       
            System.Threading.Thread.Sleep(2000);       
            Panel2.Visible = true;   
        }
    }
  9. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 21 May 2013 Link to this post

    Hi there, I have tried implementing that solution, but I have to set the ControlID to the AjaxManager which makes it load on the intial page, but then the rest of the Loading Panels for paging/filtering doesn't work any more?

    Its exactly what I had in the OP, it can get either one to work, but can't seem to implement both at the same time?
  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 22 May 2013 Link to this post

    Hi Jako,

    I have tried the approach described by Matthew in the previous post and it is working as expected on my end.

    I am attaching a sample project that is showing the AjaxLoadingPanel on initial page load. I have also added additional controls that are Ajax-ified - Button and an empty Panel below the RadGrid. The loading panel is displayed over the RadGrid on initial page load and over the Panel after the button is clicked. Give the approach a try and see if it is working for you.

    I hope this is helpful.

    Regards,
    Victor Tachev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 22 May 2013 Link to this post

    Hi Victor

    Wow, only thing I needed was another AjaxSetting!!!

    One for the grid and one for the AjaxManager.

    Totally missed it, thanks a lot!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017