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

Urgent: model popup not working with radgrid and radajax manager

12 Answers 528 Views

Grid

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

ss asked on 04 Aug 2011, 09:00 PM

Delete.jpg

Edit.jpg

Please ignore my ignorance as I'm new to this technology as well as the controls here.

Following is my scenario and what i'm trying to achieve:

My RadGrid should load, a custom column to represent the edit column. Once you click on it, using ModelPopupExtender I am pulling out the row item data into the form and once i hit the update button, it should update the record in db as well as update the grid using ajax.

Following is the poc i developed to mimic my original code. Everything works fine if i disable the rad ajax feature. But if i enable this, my popup loads, but its always empty.

Not able to figure out the right properties to set for ajaxifying the grid and the popup item. Or what is the real problem behind this.

Please refer to the below code and let me know where and what I'm missing here.

Some info abt the code:

1. The grid loads up directly using the nortwind.mdf file and the datasource mentioned in the aspx page itself.
2. The 2 columns of edit and delete are thr. Delete calls its native delete method available with radgrid.
3. The edit calls a custom edit which is overriden in its .cs class.
4. This internally calls the modelextender popup and shows it with the row level information to be edited.
5. The update button on the popup triggers a grid update event so that the data can be saved and the grid reloads automatically.

Waiting eagerly for the reply.

Thanks.

ASPX File:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid.aspx.cs" Inherits="Grid" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="mpe" %>

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

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<div>

<p>

View Grid</p>

</div>

<div>

<telerik:RadAjaxManager ID="RadManager" runat="server" EnableAJAX="true">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="updateButton">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" DataSourceID="SessionDataSource2"

HorizontalAlign="Center" AllowAutomaticDeletes="True"

OnItemCommand="radGrid_ItemCommand" PageSize="5" AutoGenerateColumns="False"

GridLines="None">

<MasterTableView DataSourceID="SessionDataSource2" DataKeyNames="EmployeeID">

<Columns>

<telerik:GridTemplateColumn HeaderText="Edit" HeaderStyle-Width="50">

<ItemTemplate>

<asp:ImageButton ID="imgbtn" ImageUrl="Edit.jpg" AlternateText="Edit Record"

runat="server" Width="24" Height="24" CommandName="CustomEdit" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridClientDeleteColumn HeaderText="Delete" HeaderStyle-Width="50">

<FilterTemplate>

<asp:ImageButton ID="imgbtnForDelete" ImageUrl="Delete.jpg" runat="server"

Width="24" Height="24" />

</FilterTemplate>

</telerik:GridClientDeleteColumn>

<telerik:GridBoundColumn UniqueName="EmployeeID" HeaderText="Employee ID" DataField="EmployeeID" />

<telerik:GridBoundColumn UniqueName="LastName" HeaderText="Last Name" DataField="LastName" />

<telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" UniqueName="FirstName">

</telerik:GridBoundColumn>

</Columns>

<PagerStyle Mode="NextPrevAndNumeric" />

</MasterTableView>

</telerik:RadGrid>

<div>

<asp:Label ID="lblresult" runat="server" />

</div>

<asp:Button ID="ppButton" runat="server" Style="display: none" />

<mpe:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="ppButton"

PopupControlID="pnlpopup" CancelControlID="cancelButton" BackgroundCssClass="modalBackground" />

<asp:Panel ID="pnlpopup" runat="server" Height="100px" Width="480px" Style="display: none; background: lightGrey;">

<table border = "1" align="center"><tr><td>Text for popup</td><td>EmpID: <asp:Label ID="employeeID" runat="server" /></td></tr>

<tr><td>FName: <asp:TextBox ID="firstName" runat="server" /></td><td>LName: <asp:TextBox ID="lastName" runat="server" /></td></tr>

<tr><td><asp:Button ID="updateButton" runat="server" Text="Update" OnClick="btnUpdate_Click"/></td><td><asp:Button ID="cancelButton" runat="server" Text="Cancel"/></td></tr></table>

</asp:Panel>

</div>

<asp:SqlDataSource ID="SessionDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

ProviderName="System.Data.SqlClient" DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = ?"

InsertCommand="INSERT INTO [Employees] ([EmployeeID], [LastName], [FirstName]) VALUES (?, ?, ?)"

OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName] FROM [Employees]"

UpdateCommand="UPDATE [Employees] SET [LastName] = ?, [FirstName] = ? WHERE [EmployeeID] = ? ">

<UpdateParameters>

<asp:Parameter Name="lastName" Type="String" />

<asp:Parameter Name="firstName" Type="String" />

<asp:Parameter Name="employeeID" Type="Int32" />

</UpdateParameters>

<DeleteParameters>

<asp:Parameter Name="original_EmployeeID" Type="Int32" />

</DeleteParameters>

<InsertParameters>

<asp:Parameter Name="EmployeeID" Type="Int32" />

<asp:Parameter Name="LastName" Type="String" />

<asp:Parameter Name="FirstName" Type="String" />

</InsertParameters>

</asp:SqlDataSource>

</form>

</body>

</html>

C# Code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Drawing;

using Telerik.Web.UI;

public partial class Grid : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void radGrid_ItemCommand(object source, GridCommandEventArgs e)

{

if (e.CommandName == "CustomEdit")

{

GridDataItem item = RadGrid1.MasterTableView.Items[e.Item.ItemIndex];

employeeID.Text = item.GetDataKeyValue("EmployeeID").ToString();

firstName.Text = (string)item["FirstName"].Text;

lastName.Text = (string)item["LastName"].Text;

this.ModalPopupExtender1.Show();

}

protected void btnUpdate_Click(object sender, EventArgs e)

{

GridEditableItem editedItem = null;

foreach (GridEditFormItem dataItem in RadGrid1.MasterTableView.GetItems(GridItemType.EditFormItem))

{

if (employeeID.Text.Equals(dataItem.GetDataKeyValue("EmployeeID").ToString()))

{

editedItem = dataItem;

editedItem.UpdateValues(firstName.Text);

editedItem.UpdateValues(lastName.Text);

editedItem.FireCommandEvent("Update", null);

editedItem.Edit = false;

break;

}

RadGrid1.MasterTableView.ClearEditItems();

this.ModalPopupExtender1.Hide();

lblresult.Text = "Emp Id: " +employeeID.Text + " Updated Successfully";

lblresult.ForeColor = Color.Green;

RadGrid1.Rebind();

}

Web.Config:

<?xml version="1.0"?>

<!--

Note: As an alternative to hand editing this file you can use the

web admin tool to configure settings for your application. Use

the Website->Asp.Net Configuration option in Visual Studio.

A full list of settings and comments can be found in

machine.config.comments usually located in

\Windows\Microsoft.Net\Framework\v2.x\Config

-->

<configuration>

<configSections>

<sectionGroup name="system.web.extensions" type=

"System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

>

<sectionGroup name="scripting" type=

"System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

>

<section name="scriptResourceHandler" type=

"System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

requirePermission="false" allowDefinition="MachineToApplication" />

<sectionGroup name="webServices" type=

"System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

>

<section name="jsonSerialization" type=

"System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

requirePermission="false" allowDefinition="Everywhere" />

<section name="profileService" type=

"System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

requirePermission="false" allowDefinition="MachineToApplication" />

<section name="authenticationService" type=

"System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

requirePermission="false" allowDefinition="MachineToApplication" />

<section name="roleService" type=

"System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

requirePermission="false" allowDefinition="MachineToApplication" />

</sectionGroup>

</configSections>

<appSettings />

<connectionStrings>

<add name="NorthwindConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|Northwind.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>

</connectionStrings>

<system.web>

<!--

Set compilation debug="true" to insert debugging

symbols into the compiled page. Because this

affects performance, set this value to true only

during development.

-->

<compilation debug="true">

<assemblies>

<add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />

<add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

<add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />

<add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />

</assemblies>

</compilation>

<!--

The <authentication> section enables configuration

of the security authentication mode used by

ASP.NET to identify an incoming user.

-->

<authentication mode="Windows" />

<!--

The <customErrors> section enables configuration

of what to do if/when an unhandled error occurs

during the execution of a request. Specifically,

it enables developers to configure html error pages

to be displayed in place of a error stack trace.

-->

<pages>

<controls>

<add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" />

<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

<add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

</controls>

</pages>

<httpHandlers>

<remove verb="*" path="*.asmx" />

<add verb="*" path="*.asmx" validate="false" type=

"System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

/>

<add verb="*" path="*_AppService.axd" validate="false" type=

"System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

/>

<add verb="GET,HEAD" path="ScriptResource.axd" type=

"System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

validate="false" />

<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />

</httpHandlers>

<httpModules>

<add name="ScriptModule" type=

"System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

/>

</httpModules>

</system.web>

<system.codedom>

<compilers>

<compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">

<providerOption name="CompilerVersion" value="v3.5" />

<providerOption name="WarnAsError" value="false" />

</compiler>

<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" type="Microsoft.VisualBasic.VBCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">

<providerOption name="CompilerVersion" value="v3.5" />

<providerOption name="OptionInfer" value="true" />

<providerOption name="WarnAsError" value="false" />

</compiler>

</compilers>

</system.codedom>

<!--

The system.webServer section is required for running ASP.NET AJAX under Internet

Information Services 7.0. It is not necessary for previous version of IIS.

-->

<system.webServer>

<validation validateIntegratedModeConfiguration="false" />

<modules>

<remove name="ScriptModule" />

<add name="ScriptModule" preCondition="managedHandler" type=

"System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

/>

</modules>

<handlers>

<remove name="WebServiceHandlerFactory-Integrated" />

<remove name="ScriptHandlerFactory" />

<remove name="ScriptHandlerFactoryAppServices" />

<remove name="ScriptResource" />

<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type=

"System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

/>

<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type=

"System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

/>

<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type=

"System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

/>

<add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />

</handlers>

</system.webServer>

<runtime>

<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">

<dependentAssembly>

<assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35" />

<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0" />

</dependentAssembly>

<dependentAssembly>

<assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35" />

<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0" />

</dependentAssembly>

</assemblyBinding>

</runtime>

</configuration>

12 Answers, 1 is accepted

Accepted

answered on 05 Aug 2011, 06:47 AM

Hello ss,

Add new panel (pnlpopupMain) as shown in below.

<asp:Panel ID="pnlpopupMain" runat="server">

<asp:Button ID="ppButton" runat="server" Style="display: none" />

<mpe:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="ppButton"

PopupControlID="pnlpopup" CancelControlID="cancelButton" BackgroundCssClass="modalBackground" />

<asp:Panel ID="pnlpopup" runat="server" Height="100px" Width="480px" Style="display: none; background: lightGrey;">

<table border = "1" align="center"><tr><td>Text for popup</td><td>EmpID: <asp:Label ID="employeeID" runat="server" /></td></tr>

<tr><td>FName: <asp:TextBox ID="firstName" runat="server" /></td><td>LName: <asp:TextBox ID="lastName" runat="server" /></td></tr>

<tr><td><asp:Button ID="updateButton" runat="server" Text="Update" OnClick="btnUpdate_Click"/></td><td><asp:Button ID="cancelButton" runat="server" Text="Cancel"/></td></tr></table>

</asp:Panel>

</asp:Panel>

Change your Ajax manager code

<telerik:RadAjaxManager ID="RadManager" runat="server" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="updateButton">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlpopupMain" />

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

let me know if any concern.

Thanks,
Jayesh Goyani

Accepted

answered on 05 Aug 2011, 07:09 AM



Hello,





..............
update below code
.........................
<telerik:AjaxSetting AjaxControlID="updateButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"  LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="pnlPopupMain" />


                    </UpdatedControls>
                </telerik:AjaxSetting>
.................
add this after completing radajaxmanager tag
...................
 
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>



let me know 

1. it should display loading panel on grid ?

2. in DB record are update or not?







Thanks,

Jayesh Goyani

answered on 05 Aug 2011, 07:15 AM

Editing my post for the latest snippet.

Here is my radAjaxManager snippet.




<telerik:RadAjaxManager ID="RadManager" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="updateButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="lblresult"/>
                        <telerik:AjaxUpdatedControl ControlID="pnlpopupMain" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlpopupMain"/>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />





I think it works here. let me quickly verify it on my original code and come back to you in case of issues.



Thanks a lot for your help Jayesh.



Thanks,

Shobhit

answered on 09 Aug 2011, 01:48 PM

Hello Jayesh,

I'm not sure if I understood the ajax declaration properly here as I can't get it to working.

Here is the thing:

Adding more complexity to the above example, I have added a search form in another popup which is triggered from the same Grid out of which the edit popup was triggered. By using a row level Id and a button just below the grid. On selection of that grid (radio button column) I am able to open this search popup. Once searched it again brings up a grid just below the search form in the same popup.

For such situation what all controls i should use to allow it to be working?

Could you please give me out the ajax syntax with a brief explanation of what & why you did of what you did?

Thanks,
Shobhit

answered on 09 Aug 2011, 02:50 PM

sure, here is just a sample code to help u understand my functionality.

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<div>

<p>

View Grid</p>

</div>

<div>

<telerik:RadAjaxManager ID="RadManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="updateButton">

<UpdatedControls>

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

<telerik:AjaxUpdatedControl ControlID="lblresult"/>

<telerik:AjaxUpdatedControl ControlID="pnlpopupMain" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlpopupMain"/>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" DataSourceID="SessionDataSource2"

HorizontalAlign="Center" AllowAutomaticDeletes="True" OnItemCommand="radGrid_ItemCommand"

PageSize="5" AutoGenerateColumns="False" GridLines="None">

<telerik:GridTemplateColumn HeaderText="Edit" HeaderStyle-Width="50">

<ItemTemplate>

<asp:ImageButton ID="imgbtn" ImageUrl="Images/Edit.jpg" AlternateText="Edit Record"

runat="server" Width="24" Height="24" CommandName="CustomEdit" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Select Employee" HeaderStyle-Width="80">

<ItemTemplate>

<input name="rdEmp" type="radio" value='<%# Eval("Emp_Id") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

</telerik:RadGrid>

<div>

<asp:Label ID="lblresult" runat="server" />

</div>

<div style="width: 91%; vertical-align: middle; text-align: center; float: left;">

<telerik:RadButton ID="btnAssign2" runat="server" Text="Assign" OnClick="btnAssign2_Click" Visible="false" />

</div>

<asp:Panel ID="pnlpopupMain" runat="server">

<asp:Button ID="ppButton" runat="server" Style="display: none" />

<mpe:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="ppButton"

PopupControlID="pnlpopup" CancelControlID="cancelButton" BackgroundCssClass="modalBackground" />

<asp:Panel ID="pnlpopup" runat="server" Height="100px" Width="480px" Style="display: none;

background: lightGrey;">

......

</asp:Panel>

<asp:Panel ID="pnlpopup2" runat="server">

<asp:Button ID="btnPopUp2" runat="server" Style="display: none" />

<mpe:ModalPopupExtender ID="ModalPopup2" runat="server" TargetControlID="btnPopUp2"

PopupControlID="pnl2" CancelControlID="btnCancelAssign" BackgroundCssClass="modalBackground">

</mpe:ModalPopupExtender>

<asp:Panel ID="pnl2" runat="server" BackColor="White" Height="78%" Width="65%"

Style="display: none">

<table>

<tr class="tblDecView">

<td align="left" class="tblDecViewTitle">

First Name:

</td>

</tr></table><asp:ImageButton ID="btnSearch2" runat="server" OnClick="btnSearch2_Click"

ImageUrl="Images/btnsearch.gif" />

<asp:ImageButton ID="btnReset2" runat="server" OnClick="btnReser2_Click"

ImageUrl="Images/btn_clear.gif" />

<div style="width: 91%; vertical-align: middle; float: left; padding: 0 0 10px 17px;">

<telerik:RadGrid ID="grd2" runat="server" AutoGenerateColumns="False"

AllowPaging="True" OnPageIndexChanged="grd2_PageIndexChanging" PageSize="5"

CellSpacing="0" OnItemCommand="radGrid_ItemCommand" AllowMultiRowSelection="true">

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />

<PagerStyle Mode="NextPrevAndNumeric" ShowPagerText="False" />

<MasterTableView TableLayout="Fixed" DataKeyNames="EmpAcc_Id" GridLines="Horizontal">

<Columns>

<telerik:GridBoundColumn DataField="Empy Account Name" HeaderText="Empy Account Name" />

......

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="true"/>

</ClientSettings>

</telerik:RadGrid>

</div>

<div style="width: 91%; vertical-align: middle; text-align: center; float: left;">

<telerik:RadButton ID="btnAssign" runat="server" Text="Assign"

OnClick="btnAssign_Click" />

<telerik:RadButton ID="btnCancelAssign" runat="server" Text="Cancel" />

</div>

</asp:Panel>

</div>

In the above code:
1. The edit button for "RadGrid1" opens up the popup "ModalPopupExtender1"
2. By selection the radio option "rdEmp" in "RadGrid1" and clicking on "btnAssign2" a new popup form opens "ModalPopup2"
3. This new popoup has the search form and a new grid built into it as shown above. And then i do some interactivity on "grd2" and then it closes "ModalPopup2" popup closes on "btnAssign" button click.

answered on 09 Aug 2011, 06:37 PM

Hello,

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

<telerik:AjaxUpdatedControl ControlID="pnlpopupMain" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnAssign2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlpopup2" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnSearch2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlpopup2" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnReset2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlpopup2" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnAssign">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlpopup2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

</telerik:RadAjaxLoadingPanel>

RadGrid1_ItemCommand()

{

if(e.commandName == "CustomEdit")

{

ModalPopupExtender1.Show();

}

btnAssign2_Click()

{

ModalPopup2.Show();

}

btnSearch2_Click()

{

ModalPopup2.Show();

}

btnReset2_Click()

{

ModalPopup2.Show();

}

btnAssign_Click()

{

ModalPopup2.Hide();

}

let me know if any concern.

Thanks,
Jayesh Goyani

answered on 02 Jul 2015, 04:31 AM

Hi jayesh ,

my modal popup not working in telerik rad grid

<telerik:RadGrid ID="grid_employee" AllowMultiRowSelection="True" runat="server"
        AllowFilteringByColumn="true" GridLines="None" CellSpacing="1" CssClass="RadGrid_WebBlue"
        Width="100%" Skin="Office2010Silver" AllowPaging="true" PageSize="50" >
        <ClientSettings EnableRowHoverStyle="true">
            <Selecting AllowRowSelect="false" />
        </ClientSettings>
        <GroupingSettings CaseSensitive="false" />
        <MasterTableView AutoGenerateColumns="false" DataKeyNames="employee_id" Summary="RadGrid table">
            <Columns>

<telerik:GridTemplateColumn HeaderText="Action" ItemStyle-HorizontalAlign="Center"
                    HeaderStyle-Width="10%" AllowFiltering="false" HeaderStyle-HorizontalAlign="Center"
                    ItemStyle-Width="10%">
                    <ItemTemplate>
                        <asp:ImageButton ID="imgview" runat="server" ImageUrl="../images/view.png" CssClass="gridicons"
                            ToolTip="View" CommandName="imgview" />
                        <asp:ImageButton ID="imgedit" runat="server" ImageUrl="../images/edit.png" CssClass="gridicons"
                            ToolTip="Edit" />
                        <asp:ImageButton ID="imgdelete" runat="server" ImageUrl="../images/delete.png" CssClass="gridicons"
                            ToolTip="Delete" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>

/Columns>
        </MasterTableView>
        <PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" />
    </telerik:RadGrid>

<asp:Button ID="Button1" runat="server" Text="Button" Style="display: none;" />
    <cc1:ModalPopupExtender ID="popup_viewemployee" runat="server" CancelControlID="btnback"
        TargetControlID="Button5" PopupControlID="pnlemployeeview" PopupDragHandleControlID="PopupHeader"
        Drag="true" BackgroundCssClass="bgdim">
    </cc1:ModalPopupExtender>
    <asp:Panel ID="pnlemployeeview" Width="60%" Style="display: none; background-color: ButtonFace;"
        runat="server">
        <div style="width: 100%; border: solid 1px #92c7d6;">
            <div style="width: 100%;" class="body">
                <table>
                    <tr>
                        <td>
                            <asp:Label ID="Label2" runat="server" CssClass="labelpopup" Text="View Employee"></asp:Label>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <table cellpadding="3" cellspacing="3" width="100%">
                    <tr>
                        <td width="15%">
                            <asp:Label ID="Label3" runat="server" Text="First Name"></asp:Label>
                        </td>
                        <td width="35%">
                            <asp:Label ID="lbl_firstname" runat="server" CssClass="label"></asp:Label>
                        </td>
                        <td width="10%">
                            <asp:Label ID="Label4" runat="server" Text="Last Name"></asp:Label>
                        </td>
                        <td width="35%">
                            <asp:Label ID="lbl_lastname" runat="server" CssClass="label"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td width="15%">
                            <asp:Label ID="Label5" runat="server" Text="Employee Code"></asp:Label>
                        </td>
                        <td width="35%">
                            <asp:Label ID="lbl_employeecode" runat="server" CssClass="label"></asp:Label>
                        </td>
                        <td width="10%">
                            <asp:Label ID="Label6" runat="server" Text="Password"></asp:Label>
                        </td>
                        <td width="35%">
                            <asp:Label ID="lbl_password" runat="server" CssClass="label"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label7" runat="server" Text="Contact No"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="lbl_contactno" runat="server" CssClass="label"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="Label8" runat="server" Text="Emai ID"></asp:Label>
                        </td>
                        <td colspan="3">
                            <asp:Label ID="lbl_emailid" runat="server" CssClass="label"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label9" runat="server" Text="Address"></asp:Label>
                        </td>
                        <td colspan="3">
                            <asp:TextBox ID="lbl_address" runat="server" CssClass="textbox" TextMode="MultiLine"
                                Rows="3" Width="95%" Enabled="false"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label10" runat="server" Text="Remarks"></asp:Label>
                        </td>
                        <td colspan="3">
                            <asp:TextBox ID="TextBox8" runat="server" CssClass="textbox" MaxLength="254"
                                TextMode="MultiLine" Rows="3" Width="95%" Enabled="false"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </div>
            <br />
            <div style="width: 95%;">
                <table width="100%" cellpadding="5" cellspacing="5">
                    <tr>
                        <td align="center">
                            <asp:LinkButton ID="LinkButton2" runat="server" CssClass="button" Text="Back"></asp:LinkButton>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </asp:Panel>

protected void grid_employee_ItemCommand(object source, GridCommandEventArgs e)
        {
            if (e.CommandName == "imgview")
            {
                GridDataItem item = grid_employee.MasterTableView.Items[e.Item.ItemIndex];
                this.popup_viewemployee.Show();
            }
        }