RadListView ClientBinding showing the LoadingPanel

[Vladimir]

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

[Radoslav]

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

[Vladimir]

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

[Radoslav]

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

[Vladimir]

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