This is a migrated thread and some comments may be shown as answers.

RadListView ClientBinding showing the LoadingPanel

4 Answers 77 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Vladimir
Top achievements
Rank 1
Vladimir asked on 20 Jun 2012, 05:59 AM
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

4 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 25 Jun 2012, 06:36 AM
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.
0
Vladimir
Top achievements
Rank 1
answered on 27 Jun 2012, 02:05 PM
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
0
Radoslav
Telerik team
answered on 02 Jul 2012, 10:21 AM
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.
0
Vladimir
Top achievements
Rank 1
answered on 09 Jul 2012, 06:41 AM
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 
Tags
ListView
Asked by
Vladimir
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Vladimir
Top achievements
Rank 1
Share this question
or