How to implement radAjaxPanel on this simple page

4 posts, 0 answers
  1. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 06 Mar 2012 Link to this post

    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>
        </div>
    </asp:Content>


  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 09 Mar 2012 Link to this post

    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">
        <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
            <telerik:RadGrid ID="RadGrid1" ..........>
            .
            .
            .
            </telerik:RadGrid>
        </table
        </div>

    I hope this helps.

    All the best,
    Maria Ilieva
    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.
  3. Nirav
    Nirav avatar
    48 posts
    Member since:
    Sep 2008

    Posted 12 Mar 2012 Link to this post

    Thanks admin. I tried this but did not work.
    The problem is same. It displays progressbar for grid and work perfect for grid.
    but for any button inside or outside grid, is not firing click event.
    For example, button "btnViewAllSelected" did not fire its click event to process whatever was in its click event.
    There is a button inside grid's ItemTemplage, when I clicked that button, nothing is happening.
    I think I will post sample project to a public site and will share URL here.
    Meanwhile if you have any other suggstion, please do let me know.

    Thanks
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 13 Mar 2012 Link to this post

    Hi,

    It will be best if you could share a sample application which demonstrates the described issue. thus we will be able to debug it locally and do our best to provide proper solution.

    All the best,
    Maria Ilieva
    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