ModalPopup for button inside radajaxpanel

4 posts, 0 answers
  1. Kanchana
    Kanchana avatar
    6 posts
    Member since:
    Nov 2011

    Posted 09 Nov 2011 Link to this post

    Hi,

    I am new to using Ajax and need some help in the following scenario. I have a 'Add' button and a grid with 'Edit' button column inside a radajaxpanel.I need a modal pop to open when the Add or Edit buttons are clicked to add/update records to the grid. Can someone please help with an example? The Master page has the following code. I suppose another Script Manager is not required on my page then.

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Outer.master.cs" Inherits="WebApp.Outer" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <script src="Scripts/jquery.1.5.2.min.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <div id="divHeader">
            <h1>
                PROJECT TITLE</h1>
        </div>
        <div id="divCommonInfo">
            <span>
                <div id="divLoginStatus">
                    <asp:LoginStatus ID="LoginStatus1" runat="server" />
                </div>
            </span>
        </div>
        <div id="content_wrapper">
            <!--Start Content Wrapper-->
            <div id="divMenu">
                <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SiteMapDataSource1" OnPreRender="RadMenu1_PreRender">
                </telerik:RadMenu>
            </div>
            <div id="divBreadCrumb">
                <asp:SiteMapPath ID="SiteMapPath1" runat="server">
                </asp:SiteMapPath>
            </div>
            <br />
            <div id="content">
                <div>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
            <div id="footer">
                <small>Copyright ©</small>
            </div>
        </div>
        <!--End Content Wrapper-->
        </form>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    </body>
    </html>
    The code for the page is below. I need the section to have a modal popup open when the 'Add Customer' button or the 'Edit' column button is clicked.

    <%@ Page Title="" Language="C#" MasterPageFile="~/Outer.Master" AutoEventWireup="true"
        CodeBehind="Customers.aspx.cs" Inherits="WebApp.Maintenance.Customers" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <title>Customers</title>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <telerik:RadAjaxLoadingPanel ID="loadingPanel1" runat="server" />
        <telerik:RadAjaxPanel ID="pnlMain" runat="server" EnableAJAX="true" LoadingPanelID="loadingPanel1">
            <div id="divMessage" style="height: 20px; width: 100%; font-weight: bold">
                <asp:Label ID="lblMessage" runat="server" EnableViewState="false"></asp:Label>
            </div>
            <h2>
                Customers</h2>
            <telerik:RadButton ID="btnAddCustomer" runat="server" Text="Add Customer">
            </telerik:RadButton>
            <telerik:RadGrid ID="rgCustomers" runat="server" DataSourceID="dsCustomers" AutoGenerateColumns="False"
                CellSpacing="0" GridLines="None" OnDeleteCommand="rgCustomers_OnDeleteCommand"
                OnEditCommand="rgCustomers_OnEditCommand" OnItemDataBound="rgCustomers_ItemDataBound">
                <MasterTableView DataKeyNames="CustomerID" DataSourceID="dsCustomers" CommandItemDisplay="Top">
                    <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/Images/Edit.gif" CommandName="Edit"
                            ShowFilterIcon="false" UniqueName="Edit" HeaderStyle-Width="30" />
                        <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" UniqueName="Delete"
                            ShowFilterIcon="false" ImageUrl="~/Images/Delete.gif" Text="Delete" ConfirmText="Are you sure you want to delete this customer?"
                            HeaderStyle-Width="30" />
                        <telerik:GridBoundColumn DataField="CustomerID" DataType="System.Int32" FilterControlAltText="Filter CustomerID column"
                            HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID"
                            Visible="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CompanyName" FilterControlAltText="Filter CompanyName column"
                            HeaderText="Company Name" SortExpression="CompanyName" UniqueName="CompanyName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CompanyReference" FilterControlAltText="Filter CompanyReference column"
                            HeaderText="Company Reference" SortExpression="CompanyReference" UniqueName="CompanyReference">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Contact" UniqueName="Contact" SortExpression="Contact"
                            FilterControlAltText="Filter Contact column">
                            <ItemTemplate>
                                <%# Eval("ContactFirstName") %>
                                <%# Eval("ContactLastName") %></ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="Email" FilterControlAltText="Filter Email column"
                            HeaderText="Email" SortExpression="Email" UniqueName="Email">
                        </telerik:GridBoundColumn>
                        <telerik:GridCheckBoxColumn DataField="IsActive" HeaderText="Is Active" SortExpression="IsActive"
                            UniqueName="IsActive" ShowFilterIcon="false">
                        </telerik:GridCheckBoxColumn>
                    </Columns>
                </MasterTableView>
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>
                <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
                </HeaderContextMenu>
            </telerik:RadGrid>
            <asp:SqlDataSource ID="dsCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:RoomBookerConnectionString %>"
                SelectCommand="SELECT Customer.* FROM Customer ORDER BY CompanyName"></asp:SqlDataSource>
        </telerik:RadAjaxPanel>
      
        <!-- Add /  Edit Pop-up -->
      
    </asp:Content>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Nov 2011 Link to this post

    Hello Kanchana,

    You can take look into the following demo.
    Grid / PopUp Edit Form

    Thanks,
    Princy.
  3. Kanchana
    Kanchana avatar
    6 posts
    Member since:
    Nov 2011

    Posted 10 Nov 2011 Link to this post

    Thanks for replying Princy. But I will be using the add customer functionality from another page as well where an 'Add Customer' button should display the same pop-up that I will be using in this page. (There will be no Customer list grid in the other screen). So I thought that if I can write code using a Modal Popup Extender instead of the 'Edit Form Settings' functionality of the grid, I can reuse the same code. 
    I have found many examples of Using the pop-up with an Update panel but none with a RadAjaxPanel. Any help would be appreciated.Thank you.
  4. Tsvetina
    Admin
    Tsvetina avatar
    2468 posts

    Posted 14 Nov 2011 Link to this post

    Hi Kanchana,

    You can see how you can use an external control as a popup edit form in this demo (using RadWindow). It also shows how you could use RadAjax in this scenario:
    Grid / Window Editing

    As for using RadAjaxPanel and UpdatePanel, it is almost identical, so try simply replacing one control with the other and let us know if you notice any issues.

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