RadListView ClientBinding showing the LoadingPanel

5 posts, 0 answers
  1. Vitalij
    Vitalij avatar
    35 posts
    Member since:
    Dec 2010

    Posted 20 Jun 2012 Link to this post

    Hi

    I have created a image gallery using RadListView ClientSide Binding. I am using the ASMX webservice to populate the data. I assume the call is asynchronious so I need to show some LoadingPanel to user to wait for response. I tried using the RadAjaxLoadingPanel, but didnt work I think because of the client side binding .

    Is there any way to do it?? 


    Thanks

    Vitalij
  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 25 Jun 2012 Link to this post

    Hello Vitalij,

    To achieve the desired functionality you could try using the RadAjaxLoadingPanel and show hide it explicitly. Please check out the following online documentation article which explains that:
    http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html

    I hope this helps.

    Regards,
    Radoslav
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vitalij
    Vitalij avatar
    35 posts
    Member since:
    Dec 2010

    Posted 27 Jun 2012 Link to this post

    Hi

    Thanks for response, but it didnt worked for me. I am missing something.

    Here is some of the code:

    ASPX:

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">       
        </telerik:RadScriptManager>   
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rlvZoznam">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rlvZoznam" LoadingPanelID="RadAjaxLoadingPanel1"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>           
            <ClientEvents OnRequestStart="ResponseStart" OnResponseEnd="ResponseEnd"></ClientEvents>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
    <telerik:RadMultiPage ID="rmpGallery" runat="server" SelectedIndex="0">
                <telerik:RadPageView ID="rpvMain" runat="server">
                    <h1>Galery</h1>
                    <div class="mainContent">
                        <asp:Panel ID="pnlZoznam" runat="server">
                        <telerik:RadListView ID="rlvZoznam" runat="server" ItemPlaceholderID="ProductsHolder"
                            AllowMultiItemSelection="false" PageSize="10" AllowPaging="true" DataKeyNames="JID"
                            EnableEmbeddedSkins="False">
                            <LayoutTemplate>
                                <div style="position: relative;">
                                    <a class="pagePrev" href="javascript:void(0);" title="Prev" style="display: none;">
                                    </a><a class="pageNext" href="javascript:void(0);" title="Next" style="display: none;">
                                    </a>
                                    <div id="pnlAlbumHolder">
                                    </div>
                                </div>
                            </LayoutTemplate>
                            <ClientSettings>
                                <DataBinding ItemPlaceHolderID="pnlAlbumHolder">
                                    <DataService Location="WebGalleryService.asmx" DataPath="GetAlbums" SortParameterType="Linq"
                                        FilterParameterType="Linq" />
                                    <ItemTemplate>
                                        <a class="colItem" id="photoItem" onclick="javascript:OpenPhoto('#= JID #');">
                                            <div class="imgIcon">
                                                <img src='#= AlbumMainPhotoUrl #' Width="190px" alt="" class="imgIcon" />                               
                                            </div>
                                            <div class="colText">
                                                <p>#= Nazov #</p>
                                                <div>Vytvorené: #= format(Vytvorene,"dd.MM.yyyy HH:mm") #</div>
                                            </div>
                                        </a>
                                    </ItemTemplate>
                                </DataBinding>
                                <ClientEvents OnDataBinding="onLVDataBinding" OnDataBound="onLVDataBound" />
                            </ClientSettings>
                        </telerik:RadListView>
                        </asp:Panel>
                    </div>
                </telerik:RadPageView>
    </telerik:RadMultiPage>

    The script:
    var ajaxLoadingPanel = null;
            var updatedControl = null;
     
            function ResponseStart(sender, args) {
                alert("ok");
                ajaxLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
                updatedControl = $find("<%= rlvZoznam.ClientID %>");
                ajaxLoadingPanel.show(updatedControl);
            }
     
            function ResponseEnd(sender, args) {
                if (ajaxLoadingPanel != null) ajaxLoadingPanel.hide(updatedControl);
                //updatedControl = null;
            }
     
    function onLVDataBinding(sender, e) {
                sender.set_selectedIndexes([]);
            }
     
            function onLVDataBound(sender, e) {
                $telerik.$(".pagePrev").css("display", sender.get_currentPageIndex() == 0 ? "none" : "");
                $telerik.$(".pageNext").css("display", sender.get_currentPageIndex() == sender.get_pageCount() - 1 ? "none" : "");
            }

    The Client Side binding is working great but it doesnt show the loading panel. I think I have an issue with RadAjaxManager, but not sure. Can U help me??

    thx

    Vitalij
  5. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 02 Jul 2012 Link to this post

    Hello Vitalij,

    I am sending you a simple example which demonstrates how to achieve the desired functionality. Please check it out and let me know if it helps you.

    Looking forward for your reply.

    All the best,
    Radoslav
    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.
  6. Vitalij
    Vitalij avatar
    35 posts
    Member since:
    Dec 2010

    Posted 09 Jul 2012 Link to this post

    Hi Radoslav

    Thank you for ur reply. I did it similary to ur solution. I think it will work, but I needed on a button click to load buttons as well as ListView, I did it by combining both ur replies. So it is working for me now.

    Thanks again

    Vitalij 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017