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

ModalPopup for button inside radajaxpanel

3 Answers 238 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>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

ModalPopup for button inside radajaxpanel

3 Answers, 1 is accepted