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

ModalPopup for button inside radajaxpanel

3 Answers 310 Views

Ajax

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

Kanchana asked on 09 Nov 2011, 08:34 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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">

<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 id="footer">

</div>

</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>

</asp:Content>

3 Answers, 1 is accepted

answered on 10 Nov 2011, 12:07 PM

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.

answered on 14 Nov 2011, 10:08 AM

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