Display RadGrid row details in AjaxToolkit ModalPopupExtender

[Adigard]

Greetings,
I try to make the exemple The telerik team has posted here :
http://www.telerik.com/community/code-library/aspnet-ajax/grid/display-radgrid-row-details-in-ajaxtoolkit-modalpopupextender.aspx


But i don't get anything when i click on an ID ( just a OK button which make a short apparition before vanishing )... My popup does not show itself...

Can anyone help me ?

<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
   <style type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
        .PanelClass
        {
            background: white;
        }
        .DetailsViewHeader
        {
            border-bottom: 1px solid #41a901;
            padding-top: 8px;
            padding-bottom: 8px;
            background: olive;
            font-size: 13px;
            font-weight: normal;
            text-align: left;
            color: white;
        }
    </style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1">
    </ajaxToolkit:ToolkitScriptManager>
    <asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsViewDataSource"
        AutoGenerateRows="False" Width="60%" HeaderText="Contact details">
        <HeaderStyle CssClass="DetailsViewHeader" />
        <Fields>
            <asp:BoundField DataField="Title" HeaderText="Title" />
            <asp:BoundField DataField="BirthDate" HeaderText="BirthDate" DataFormatString="{0:D}" />
            <asp:BoundField DataField="City" HeaderText="City" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
        </Fields>
    </asp:DetailsView>


    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        onajaxrequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DetailsView1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function PopulateDetails(rowid) {
                $get("<%=btnPopUp.ClientID %>").click();
                $find("<%=RadAjaxManager1.ClientID %>").ajaxRequest(rowid);

                return false;
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"
        AutoGenerateColumns="false" onitemcreated="RadGrid1_ItemCreated">
        <MasterTableView DataKeyNames="EmployeeID">
            <Columns>
                <telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="EmployeeID">
                    <ItemTemplate>
                        <asp:LinkButton ID="btnShowDetails" runat="server" CausesValidation="false" Text='<%#Eval("EmployeeID")%>' />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="First name" ReadOnly="True"
                    UniqueName="FirstName" />
                <telerik:GridBoundColumn DataField="LastName" HeaderText="Last name" ReadOnly="True"
                    UniqueName="LastName" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT EmployeeID, LastName, FirstName FROM Employees"></asp:SqlDataSource>
    <asp:SqlDataSource ID="DetailsViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT Title, BirthDate, City, Country FROM Employees WHERE EmployeeID=@EmployeeID"
        runat="server">
        <SelectParameters>
            <asp:Parameter Name="EmployeeID" Type="Int16" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:Panel ID="Panel1" runat="server" CssClass="PanelClass" Style="display: none;">
        <asp:Button ID="btnOK" runat="server" Text="OK" />
    </asp:Panel>
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1"
        OkControlID="btnOK" TargetControlID="btnPopUp" BackgroundCssClass="modalBackground"
        DropShadow="true">
    </ajaxToolkit:ModalPopupExtender>
    <asp:Button ID="btnPopUp" runat="server" Text="Show popup" Style="display: none"/>
</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
           if (e.Item is GridDataItem)
        {
            LinkButton btnDetails = e.Item.FindControl("btnShowDetails") as LinkButton;
            btnDetails.OnClientClick = string.Format("return PopulateDetails('{0}');", (e.Item as GridDataItem).GetDataKeyValue("EmployeeID").ToString());
        }

    }
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        int eventArgument = Convert.ToInt32(e.Argument);
        foreach (GridDataItem gridItem in RadGrid1.MasterTableView.Items)
        {
            if (Convert.ToInt32(gridItem.GetDataKeyValue("EmployeeID")) == eventArgument)
            {
                DetailsViewDataSource.SelectParameters["EmployeeID"].DefaultValue = eventArgument.ToString();
                DetailsView1.DataBind();
                return;
            }
        }
    }
}

[Radoslav]

Hello Adigard,

I am sending you a simple example, based on the mentioned code library. Please check it out and let me know if it helps you. Additionally on the following link I attached a small video which demonstrates that on my end everything works as expected.

Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team