Urgent: model popup not working with radgrid and radajax manager

13 posts, 2 answers
  1. ss
    ss avatar
    6 posts
    Member since:
    Jul 2011

    Posted 04 Aug 2011 Link to this post

    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" %>
    <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>
          </sectionGroup>
        </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>

  2. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 05 Aug 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ss
    ss avatar
    6 posts
    Member since:
    Jul 2011

    Posted 05 Aug 2011 Link to this post

    Jayesh,

    Thanks for the quick reply. It solves my half of the problem in which the popup shows up with the values.

    The other half is still missing, where in when i hit the update button in the popup, the post call back should reload the grid as well. Which is still not happening. Am I missing something here?
  5. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 05 Aug 2011 Link to this post


    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



  6. ss
    ss avatar
    6 posts
    Member since:
    Jul 2011

    Posted 05 Aug 2011 Link to this post

    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
  7. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 05 Aug 2011 Link to this post

    Hello,

    i update my previous post please check it.

    let me know
    1. it should display loading panel on grid ?
    2. in DB record are update or not?


    Thanks,
    Jayesh Goyani
  8. ss
    ss avatar
    6 posts
    Member since:
    Jul 2011

    Posted 05 Aug 2011 Link to this post

    Awesome!! It works. Thanks Jayaesh.

    Wish could have come here earlier and not wasted my 1 week on this silly thing :)
  9. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 05 Aug 2011 Link to this post

    Hello ss,

    its my pleasure.
    Enjoy your Weekend.

    let me know if you have any other issue.

    Thanks,
    Jayesh Goyani
  10. ss
    ss avatar
    6 posts
    Member since:
    Jul 2011

    Posted 09 Aug 2011 Link to this post

    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
  11. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 09 Aug 2011 Link to this post

    Hello ss,

    I am not understand your complete requirement(change regarding editpopup and radiobutton.....etc).

    If possible then please provide your code and attach some image with description of your requirement so its helpful to me.

    Thanks,
    Jayesh Goyani
  12. ss
    ss avatar
    6 posts
    Member since:
    Jul 2011

    Posted 09 Aug 2011 Link to this post

    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>
     
     
     
            <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>
            </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.
  13. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 09 Aug 2011 Link to this post

    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
  14. Aravind
    Aravind avatar
    1 posts
    Member since:
    Jul 2015

    Posted 01 Jul 2015 in reply to Jayesh Goyani Link to this post

    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();
                }
            }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017