RadAjaxLoadingPanel show on client side activity

6 posts, 0 answers
  1. Abhijit
    Abhijit avatar
    10 posts
    Member since:
    Jun 2011

    Posted 21 Jan 2013 Link to this post

    Hi,

    I am trying to show RadAjaxLoadingPanel on a client side event of checkbox control, What i am trying to achieve is that when i tick the checkbox value to true, using Ecmascript i update the value on a sharepoint server, since this is an async process i need to show the loading panel. I have already tried the below mentioned code but it is not working for some reason. Can you please point me in the right direction
    <telerik:RadGrid ID="RadGrid" ...
      <Columns>
          <telerik:GridTemplateColumn HeaderText="ClickMe" UniqueName="ClickMe" ShowFilterIcon="false"
                                                        AllowFiltering="false" ItemStyle-HorizontalAlign="Center">
                                                        <HeaderStyle HorizontalAlign="Center" Font-Bold="true" />
                                                        <ItemTemplate>
                                                            <asp:CheckBox ID="chkClickMe" runat="server" Checked='<%# Eval("ClickMe") %>'
                                                                Visible='<%# Eval("ClickMe") %>' OnClick='<%# Eval("ID", "ClickMe(this,{0});") %>'
                                                                EnableViewState="true" />
                                                        </ItemTemplate>
                                                    </telerik:GridTemplateColumn>
    </Columns>
    </telerik:RadGrid>


    <script type="text/javascript">
     
     
            var currentLoadingPanel = null;
            var currentControl = null;
     
            function ShowLoading() {
                currentLoadingPanel = $find('<%= loadingPanel.ClientID %>');
                currentControl = $find("<%= RadGrid.ClientID %>");
                currentLoadingPanel.show(currentControl);
            }
     
            function HideLoading() {
                if (currentLoadingPanel != null) {
                    currentLoadingPanel.hide(currentUpdatedControl);
                }
                currentUpdatedControl = null;
                currentLoadingPanel = null;
            }
     
    var sender_id;
            function ClickMe(sender, id) {
                ShowLoading();
    }
    </script>

    Thanks and Regards,
    Abhijit Narvekar
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 21 Jan 2013 Link to this post

    Hello Abhijit,

    The one problem I notice is your OnClick binding. It should like so:

    onclick='<%Eval("ClientID", "ClickMe(this, '{0}')") %>'

    You need to encapsulate the ID in quotes when passing it to you function. Also, I changed ID to ClientID, since this control is inside of a TemplateColumn.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Abhijit
    Abhijit avatar
    10 posts
    Member since:
    Jun 2011

    Posted 22 Jan 2013 Link to this post

    Hi Kevin,

    It didnt work for me, unfortunately i got a parser error stating

    Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

    Parser Error Message: The server tag is not well formed.

    Source Error:

    Line 2076:                                                    <HeaderStyle HorizontalAlign="Center" Font-Bold="true" />
    Line 2077:                                                    <ItemTemplate>
    Line 2078:                                                        <asp:CheckBox ID="chkClickMe" runat="server" Checked='<%# Eval("IsUserMonitoring") %>'
    Line 2079:                                                            Enabled='<%# Eval("ClickMe") %>' OnClick='<%# Eval("ClientID", "ClickMe(this,'{0}');") %>'
    Line 2080:                                                            EnableViewState="true" />

    Just wanted to let you know that this grid is binded by List object at the background, the ID property was the primary key for the rows of data, Also The entire logic works as i want it to, only thing that doesnt work is that the loading panel which i want to display to the user.

    Thank you for helping me in this issue

    Thanks and Regards,
    Abhijit Narvekar
  5. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 24 Jan 2013 Link to this post

    Hi Abhijit,

    I suggest you to show the panel in OnRequestStart, and hide it in OnResponseEnd calling the Hide client-side method. Additionally you could check out the following live example where is demonstrated how explicitly show/hide LoadingPanel.

    All the best,
    Kostadin
    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. Abhijit
    Abhijit avatar
    10 posts
    Member since:
    Jun 2011

    Posted 24 Jan 2013 Link to this post

    Hi Kostadin,

    Thank you for assisting me..

    If i am not wrong OnRequestStart and OnRequestEnd will only fire where there is an Ajax request, unfortunately i want loading panel to be shown for a javascript activity so there isn't any Ajax activity.

    Thanks and Regards,
    Abhijit Narvekar
  7. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 29 Jan 2013 Link to this post

    Hello Abhijit,

    I prepared a small sample where I show/hide the loading panel by clicking on buttons. Give it a try and let me know about the result.

    Greetings,
    Kostadin
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017