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

How to implement radAjaxPanel on this simple page

3 Answers 222 Views

Ajax

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

Nirav asked on 06 Mar 2012, 03:53 PM

Hi,
I am using Visual Studio 2008 and Telerik Controls Version 2009.3.1103.20.

I am developing ASP.Net Website.

I have so many different WebPages and I want to implement AJAX on my page so that I can display rotating image during postback when system is processing something.

I tried code from Telerik Demo, tried using "telerik:RadAjaxPanel" and also tried to add ajaxsettings using "telerik:RadAjaxManager" but somehow I always ended up having javascript errors on some controls. So finally I thought to post my question here for help.

I am PASTING html for my sample UI. Can you please help me what is the best way to implement this on this page?

In the attached sample HTML, I removed all of my events and other source code and just putting my basic UI design with minimum fields.

My purpose is to know hot to implement AJAX on these pages.
Please provide me working setting for AJAX on these pages as I have already tried so many different options.

I HAVE SAMPLE PROJECT BUT DONT KNOW HOW TO UPLOAD IT HERE. SO I AM PASTING ONE OF MY PAGE CODE HERE. IF THERE IS ANY WAY TO UPLOAD .ZIP FILE WITH NEW THREAD, PLEASE DO LET ME KNOW AND I WILL UPLOAD MY SAMPLE PROJECT.

Can you help me with these items? -->
1. is it possible to display loadingpanel image for whole page and its ok to refresh whole page if we can display loading image during postback
2. in general, for grid, whenever any paging number is clicked, it should display loadingpanel for grid
3. CompletedRequestsDetail.aspx
--> When "btnUpdateGeneratedPONo" or "btnCompleteRequest" is clicked which is inside ItemTemplate, it should display loadingpanel for grid
--> when "btnViewAllSelected" or "btnViewAllSelectedSupplierCopy" is clicked, it should display loadingpanel for whole page

Thanks in advance,
Nirav

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"

CodeFile="CompletedRequestsDetail.aspx.cs" Inherits="CompletedRequestsDetail"

Title="All Completed/Cancelled Requests" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content ID="ContentPlaceHolder2" ContentPlaceHolderID="ContentPlaceHolder1"

runat="server">

<script type="text/javascript" language="javascript">

</script>

<table>

<tr>

<td colspan="100%" valign="top">

<table border="0" cellpadding="0" cellspacing="0">

<tr valign="top">

<td valign="top">

<asp:ImageButton runat="server" ID="imgExportToExcel" ImageUrl="~/Images/Excel-19.png"

CausesValidation="false" OnClick="imgExportToExcel_Click" BorderWidth="0" ToolTip="Click here to export displayed list to Excel" />

<asp:ImageButton runat="server" ID="imgExportToWord" ImageUrl="~/Images/Word-19.png"

CausesValidation="false" OnClick="imgExportToWord_Click" BorderWidth="0" ToolTip="Click here to export displayed list to Word" />

<asp:Button CssClass="ButtonCSS" runat="server" ID="btnViewAllSelected" Text="View All Selected Requests as pdf"

ToolTip="Click here to view all selected requests as pdf" CausesValidation="false"

OnClick="btnViewAllSelected_Click" OnClientClick="javascript:Page_BlockSubmit = false;buttonClicked_WithObj(this);" />

<asp:Button CssClass="ButtonCSS" runat="server" ID="btnViewAllSelectedSupplierCopy"

Text="View All Selected Requests Supplier Copy" ToolTip="Click here to view all selected requests Supplier Copy"

CausesValidation="false" OnClick="btnViewAllSelectedSupplierCopy_Click"

OnClientClick="javascript:Page_BlockSubmit = false;buttonClicked_WithObj(this);" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td colspan="100%">

</td>

</tr>

</table>

<table>

<tr>

<td>

<asp:Panel runat="server" ID="pnlPendingRequests" CssClass="panelStyle">

<table cellspacing="0" cellpadding="0">

<tr>

<td>

<%--<div class="Scrollgrid" style="WIDTH: 1100px; HEIGHT: 600px;">--%>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" AllowSorting="true"

AllowFilteringByColumn="true" AutoGenerateColumns="False" GridLines="Both" OnNeedDataSource="RadGrid1_needdatasource"

OnItemDataBound="RadGrid1_ItemDataBound" OnDetailTableDataBind="RadGrid1_DetailTableDataBind"

AllowMultiRowSelection="true" OnItemCreated="RadGrid1_ItemCreated" OnItemCommand="RadGrid1_ItemCommand"

SelectedItemStyle-CssClass="SelectedItem" Skin="Default">

<PagerStyle Mode="NextPrevNumericAndAdvanced" Position="TopAndBottom" AlwaysVisible="true" />

<ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView ShowHeadersWhenNoRecords="true" AllowFilteringByColumn="true" DataKeyNames="RequestInfoID"

Name="ApprovalsMaster">

<DetailTables>

<telerik:GridTableView DataKeyNames="RequestInfoID" Width="80%" Name="ApprovalsDetail"

AllowPaging="false" runat="server" AllowSorting="false">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="RequestInfoID" MasterKeyField="RequestInfoID" />

</ParentTableRelation>

<HeaderStyle CssClass="InnerHeaderStyle" />

<Columns>

<telerik:GridBoundColumn DataField="ApproverEmailAddress" HeaderText="ApproverEmailAddress"

SortExpression="ApproverEmailAddress">

</telerik:GridBoundColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridTemplateColumn HeaderStyle-Width="10px" AllowFiltering="false" UniqueName="selectrow">

<HeaderTemplate>

<input id="chkSelectAll" type="checkbox" onclick="return CheckAllCheckboxes(this,'chkSelectRow');" />

</HeaderTemplate>

<ItemTemplate>

<asp:CheckBox runat="server" ID="chkSelectRow" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridNumericColumn DataField="RequestInfoID" HeaderText="Request No." SortExpression="RequestInfoID"

DataType="System.Int64" FilterControlWidth="40px">

</telerik:GridNumericColumn>

<telerik:GridTemplateColumn HeaderText="Total Amount" SortExpression="TotalAmount"

DataType="System.Decimal" DataField="TotalAmount" HeaderStyle-HorizontalAlign="Right"

ItemStyle-HorizontalAlign="Right">

<ItemTemplate>

<asp:Label runat="server" ID="lblTotalAmount" Text='<%# Eval("CurrencySymbol").ToString() + Eval("TotalAmount","{0:#,##0.00}").ToString() %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Update Generated PO No./Invoice No." UniqueName="updategeneratedpono"

AllowFiltering="false" SortExpression="generatedpono">

<ItemTemplate>

<asp:TextBox Width="150px" runat="server" MaxLength="150" ValidationGroup="vgGeneratedPONo"

ID="txtGeneratedPONo" ToolTip="Enter Generated PO No."></asp:TextBox>

<asp:Button runat="server" ID="btnUpdateGeneratedPONo" Text="Update" CssClass="ButtonCSS"

ValidationGroup="vgGeneratedPONo" ToolTip="Click here to update information for Generated PO No./Invoice No."

OnClick="btnUpdateGeneratedPONo_Click" OnClientClick="javascript:return confirm('Are you sure you want to update this Generated PO No./Invoice No.? ');"

CommandArgument='<%# Eval ( "RequestInfoID").ToString() %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Complete Request" UniqueName="completerequest"

SortExpression="CompletedStatus" DataField="CompletedStatus">

<ItemTemplate>

<asp:Label ID="lblCompletedStatus" runat="server" Text='<%# Eval ( "CompletedStatus").ToString()%>'></asp:Label>

<asp:Button runat="server" ID="btnCompleteRequest" Text="Complete" CssClass="ButtonCSS"

ToolTip="Click here to complete Request" CausesValidation="False" OnClick="btnCompleteRequest_Click"

OnClientClick=

"javascript:var agree= confirm('Are you sure you want to complete this Request? '); if(agree){ Page_BlockSubmit = false;buttonClicked_WithObj(this); return true; };else {return false;};"

CommandArgument='<%# Eval ( "RequestInfoID").ToString() %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings>

<PopUpSettings ScrollBars="None" />

</EditFormSettings>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle />

</ExpandCollapseColumn>

<RowIndicatorColumn Visible="False">

<HeaderStyle />

</RowIndicatorColumn>

</MasterTableView>

</telerik:RadGrid>

<br />

<%--</div>--%>

</td>

</tr>

</table>

<table width="100%">

<tr>

<td>

<hr class="hrClass" />

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

<div class="WaitDisplay" id="divWait" style="display: none; width: auto;">

<img alt="" src="Images/spinner2.gif" />

<div id="divWaitMessage">

Processing...

</div>

</asp:Content>

3 Answers, 1 is accepted

answered on 09 Mar 2012, 10:36 AM

Hi,

In order to achieve the required functionality you could wrap the whole page in a simple div and add RadAjaxManager settings in which the "btnViewAllSelected" and "btnViewAllSelectedSupplierCopy" update this div and additional place a setting in which the RadGrid control updates itself.

For example:

<telerik:RadAjaxManager ID="RadAjaxManager1" ClientEvents-OnRequestStart="mngRequestStarted" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnViewAllSelected">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="MainDiv" LoadingPanelID="radAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnViewAllSelectedSupplierCopy">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="MainDiv" LoadingPanelID="radAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="radAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel1" Skin="Default" runat="server"></telerik:RadAjaxLoadingPanel>

<div id="MainDiv" runat="server">