[Solved] RadAjaxLoadingPanel show on client side activity

[Abhijit]

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

[Kevin]

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.

[Abhijit]

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

[Kostadin]

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

[Abhijit]

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

[Kostadin]

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