RadGrid inside RadWindow having issues in grid sorting - asp.net

In my aspx page I have a RadPageView which contains RadWindow and the RadGrid is inside the RadWindow. (ie. RadMultiPage -> RadPageView -> RadWindow -> RadGrid).
<telerik:RadWindow EnableShadow="true" ShowContentDuringLoad="false" runat="server"
ReloadOnShow="true" Title="Standard Text: Add Observation." OpenerElementID="lnkObservationsText"
Behaviors="None" VisibleStatusbar="false" EnableViewState="true" ID="rdWndObservationText"
Skin="Web20" Modal="true" Width="600">
<ContentTemplate>
<div class="RadModalMainDiv">
<div>
<p>
Help text to go here....</p>
</div>
<div class="divStandardTextButtonList">
<asp:Button ID="btnObservationsTextSelect" runat="server" Text="Select" CssClass="btnStandardText"
OnClientClick="return ObservationStandardText_Confirm()" />
<asp:Button ID="btnObservationsTextCancel" runat="server" Text="Cancel" CssClass="btnStandardText" />
</div>
<asp:Panel ID="pnl1" runat="server">
<div>
<telerik:RadGrid ID="radGdObservationsText" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" GridLines="None" PageSize="10" Width="100%">
<MasterTableView CommandItemDisplay="None" Name="ParentGrid">
<Columns>
<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn">
</telerik:GridClientSelectColumn>
<telerik:GridBoundColumn DataField="description" HeaderText="Observation Description"
Visible="true">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<PagerStyle Mode="NextPrevAndNumeric" />
<ClientSettings>
<Selecting AllowRowSelect="True" />
<ClientEvents OnRowSelected="SetObservationStandardText" />
</ClientSettings>
</telerik:RadGrid>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</telerik:RadWindow>
When I try to sort the grid clicking on the header, the page refreshes and the RadWindow disappears. Sorting happens coz when i reopens the RadGrid the rows appea sorted. I need the RadGrid to be sroted and remain in the same state.
Thanks for all helps in prior.

You have to reopen the RadWindow manually in order for this to work. I can suggest that you try an easier approach. Remove the OpenerElementID and modify the button that open the RadWindow and the other one that closes it as shown below:
Click handler for the button that open/close the window:
void lnkObservationsText_Click(object sender, EventArgs e)
{
rdWndObservationText.VisibleOnPageLoad = !rdWndObservationText.VisibleOnPageLoad;
}
Click handler code for the close button that resides in the RadWindow itself
void btnObservationsTextCancel_Click(object sender, EventArgs e)
{
rdWndObservationText.VisibleOnPageLoad = false;
}
In this case you won't need to use ReloadOnShow.
Hope this helps. Good luck :)

Related

Download Excel On Link Button click in Telerik RadGrid

I have a Telerik RadGrid inside an Update Panel. One of the columns in the RadGrid has link buttons. I would like to export an excel file when the button is clicked.
I have written the code and when I click on the linkButton, the page refreshes and the download does not happen. I have tried using anchor tag instead of the link button but it didnt work.
My ASP.net code is here
<telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadGrid ID="GridViewAllRequests" runat="server" CssClass="ms-listviewtable" border="0" BorderStyle="None" HeaderStyle-BorderStyle="None" CellPadding="4" GridLines="None" Width="100%"
AutoGenerateColumns="False" AllowFilteringByColumn="True" MasterTableView-ShowFooter="false" ShowStatusBar="false"
AllowPaging="True" PageSize="25" AllowSorting="true" MasterTableView-AllowMultiColumnSorting="true" EnableLinqExpressions="false"
ShowHeaderWhenEmpty="true" ShowFooter="false" DataSourceID="LinqDsGridViewAllRequests" OnItemCreated="RadGrid_ItemCreated" On>
<GroupingSettings CaseSensitive="false"></GroupingSettings>
<MasterTableView DataSourceID="LinqDsGridViewAllRequests" DataKeyNames="RequestName" AutoGenerateColumns="false" PagerStyle-ShowPagerText="false" PagerStyle-Mode="NextPrevAndNumeric" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="Blue" ShowFooter="false">
<Columns>
<telerik:GridTemplateColumn DataField="RequestName" HeaderText="Request Name" UniqueName="RequestName" HeaderStyle-CssClass="ms-vh2"
SortExpression="RequestName">
<ItemTemplate>
<asp:LinkButton ID="lblRequestName" ForeColor="Blue" CommandArgument='<%# Eval("RequestName") %>' CommandName="onclick" OnCommand="RequestNameLinkButton_Click" runat ="server" Text='<%# Eval("RequestName") %>'></asp:LinkButton>
</ItemTemplate>
<HeaderStyle CssClass="ms-vh2" />
<ItemStyle CssClass="talCell4Grid" HorizontalAlign="Left" VerticalAlign="Top" />
</telerik:GridTemplateColumn>
In the code, lblRequestName is the LinkButton that I want to use for downloading excel.
try to use if (!IsPostBack) wrap all code in Page_Load function, it can prevent page reload when you click the button.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//some code about page load
}
}

Refresh only content using UpdatePanel control

Is it possible to use UpdatePanel control with navigating through the left panel (menu)?
In Main.master there are left menu
<dx:ASPxNavBar ID="ASPxNavBar1" runat="server" AutoCollapse="True" EnableAnimation="True" Width="100%">
<dx:NavBarGroup Text="Group">
<Items>
<dx:NavBarItem NavigateUrl="Content/Content1.aspx" Text="Content1"></dx:NavBarItem>
<dx:NavBarItem NavigateUrl="Content/Content2.aspx" Text="Data Subject"></dx:NavBarItem>
</Items>
</dx:NavBarGroup>
</dx:ASPxNavBar>
and I'm trying to use refresh only content using UpdatePanel control
<div class="contentPane">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" updatemode="conditional">
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
but it doesn't work; header and menu still reloading when navigating through the menu.
Content1.aspx and Content2.aspx files have just an usual content inside of <asp:content> tag
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" KeyFieldName="PK" Width="750px">
<Columns>
<dx:GridViewCommandColumn ShowNewButtonInHeader="True" VisibleIndex="0" ShowDeleteButton="True" ShowEditButton="True">
</dx:GridViewCommandColumn>
<dx:GridViewDataTextColumn FieldName="PK" ReadOnly="True" Visible="false" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Name" VisibleIndex="2">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
</asp:Content>
I wonder why you are using an UpdatePanel is that a requeriment?
I would use an ASPxCallbackPanel which is a great replacement for the UpdatePanel and you can use it since you are using DevExpress controls
<script type="text/javascript">
var postponedCallbackRequired = false;
function OnListBoxIndexChanged(s, e) {
if(CallbackPanel.InCallback())
postponedCallbackRequired = true;
else
CallbackPanel.PerformCallback();
}
function OnEndCallback(s, e) {
if(postponedCallbackRequired) {
CallbackPanel.PerformCallback();
postponedCallbackRequired = false;
}
}
</script>
<dx:ASPxListBox runat="server" Height="221px" Width="100%" TextField="Name" DataSourceID="EmployeesDataSource1"
ValueField="EmployeeID" ID="ASPxListBox1" ClientInstanceName="ListBox" BackColor="Transparent">
<Border BorderWidth="0px"></Border>
<ItemStyle>
<Border BorderWidth="0px"></Border>
</ItemStyle>
<ClientSideEvents SelectedIndexChanged="OnListBoxIndexChanged" />
</dx:ASPxListBox>
<dx:ASPxCallbackPanel runat="server" ID="ASPxCallbackPanel1" Height="250px" ClientInstanceName="CallbackPanel" RenderMode="Table">
<ClientSideEvents EndCallback="OnEndCallback"></ClientSideEvents>
<PanelCollection>
<dx:PanelContent ID="PanelContent3" runat="server">
</dx:PanelContent>
</PanelCollection>
</dx:ASPxCallbackPanel>
You can see a complete sample code here

ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox

I need to show an AjaxControlToolkit ModalPopupExtender control, when user checks/unchecks a CheckBox control that is inside a GridView as a TemplateField.
-- Updated on 24/05/2013
See final solution here...
We finally solved the problem. So I decided to post here the complete solution and the final code.
The GridView
<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
<asp:BoundField DataField="ID"/>
<asp:BoundField DataField="COLUMN_A" SortExpression="COLUMN_A" HeaderText="COLUMN_A" />
<asp:BoundField DataField="COLUMN_B" SortExpression="COLUMN_B" HeaderText="COLUMN_B" />
<!-- TemplateField with the CheckBox and the ModalPopupExtender controls -->
<asp:TemplateField HeaderText="Check" SortExpression="CHECK_COLUMN">
<ItemStyle HorizontalAlign="Center"/>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server"/>
<!-- Modal Popup block -->
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" DropShadow="True" TargetControlID="CheckBox1" PopupControlID="panModalPopup" CancelControlID="CancelButton"/>
<asp:Panel ID="panModalPopup" runat="server" style="display:none; text-align:left; width:400px; background-color:White; border-width:2px; border-color:#40A040; border-style:solid; padding:10px;">
Are you sure?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="ConfirmButton" runat="server" Text="Confirm" OnClick="ConfirmButton_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>'/>
<asp:Button ID="CancelButton" runat="server" Text="Cancel"/>
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
The code behind
protected void gvDocs_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType.Equals(DataControlRowType.DataRow))
{
// Setting the CheckBox check reading the state from DB
CheckBox CheckBox1 = (CheckBox)e.Row.FindControl("CheckBox1");
CheckBox1.Checked = DataBinder.Eval(e.Row.DataItem, "CHECK_COLUMN").ToString() == "Y"; // Or any other value that works like true/false
}
}
protected void ConfirmButton_Click(object sender, EventArgs e)
{
string id = ((Button)sender).CommandArgument; // Get the ID column value
// Update the CHECK_COLUMN value on the DB or do whatever you want with the ID...
BindData(); // Method that do the GridView DataBind after the changes applied to the DB
}
Some things to know
1) The ModalPopupExtender1 control is inside the GridView TemplateField because it needs to have access to the CheckBox1 and its click event. It's probably not the best solution ever, but it works and so it would not affect to much on performance if your GridView is not too complicated and if it is paged.
2) In order to catch the ConfirmButton Click event, you have to remove the OKControlID property from the ModalPopupExtender control settings.
-- END
-- Updated on 22/05/2013
Then I need the ID of the corresponding row to make an UPDATE on the DB.
-- END
This is the GridView
<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
<asp:BoundField DataField="ID_DOCUMENTO" Visible="False"/>
<asp:BoundField DataField="NUM_PROT" SortExpression="NUM_PROT" HeaderText="N. Prot." />
<asp:BoundField DataField="DATE_PROT" SortExpression="DATE_PROT" HeaderText="Data Prot." />
... some other BoundFields ...
<asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
<ItemStyle HorizontalAlign="Center"/>
<ItemTemplate>
<asp:CheckBox ID="chkArchiviare" runat="server" AutoPostBack="True" OnCheckedChanged="chkArchiviare_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
And this is the ModalPopup block
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="panModalPopup" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />
<asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
Are you sure?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="btnConferma" runat="server" Text="Conferma" OnClick="btnConferma_Click"/>
<asp:Button ID="btnAnnulla" runat="server" Text="Annulla" OnClick="btnAnnulla_Click" />
</div>
</asp:Panel>
Now, I want to show the ModalPopup each time a checkbox is checked/unchecked and that popup have to show a confirmation message with 2 buttons: Confirm and Cancel.
Confirm have to do an update on the DB and then postback.
Cancel have only to hide the popup without postback.
I know that ModalPopupExtender listens to OnClick events. So, do I necessary need a Button, LinkButton, ImageButton, etc. or can I do what I want?
You are right, it listens to onclick events, but client-side ones, so, the target control of the extender can be anything you can click on, even a div or a label.
try to show/hide ModalPopupExtender1 from chkArchiviare_CheckedChanged event like this.
ModalPopupExtender1.show();
and
ModalPopupExtender1.hide();
take one Hidden button and make it as TargetControlID like this.
<asp:HiddenField ID="btnHiddenDtl1" runat="Server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="btnHiddenDtl1" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />
you need not to call cancel button click event to hide ModalPopupExtender1.
You no need to include ModalPopup Extender inside your GridView. You can bind check box control in template field in GridView and use OnCheckedChanged property in it...So template would be like below
<asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
<ItemStyle HorizontalAlign="Center"/>
<ItemTemplate>
<asp:CheckBox ID="chkArchiviare" runat="server"
OnCheckedChanged="chkArchiviare_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
After this you have to call show function on chkArchiviare_CheckedChanged event...like this
ModalPopupExtender1.Show();
Here ModalPopupExtender1 is ID of you ModalPopupExtender control.
One more thing you have to remember use one button on .aspx page. And pass this button ID into ModalPopupExtender TargetControlID... Like this
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True"
TargetControlID="btnShowModalPopup" PopupControlID="panModalPopup"
OkControlID="btnConferma" CancelControlID="btnAnnulla" />
<asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px;
background-color:White; border-width:2px; border-color:Black; border-
style:solid; padding:20px;"> Are you sure?<br /><br />
<div style="text-align:right;">
<asp:Button ID="btnConferma" runat="server" Text="Conferma"
OnClick="btnConferma_Click"/>
<asp:Button ID="btnAnnulla" runat="server" Text="Annulla"
OnClick="btnAnnulla_Click" />
</div>
</asp:Panel>
Here Why Iam using this button?....There is no use of this button because we are using show() in codebehind...but if we are not pass button Id to ModapPopupExtender TargetControlId property. It will give you an error.
So using ModalPopupExtender in this way...you can use it with LinkButton, Label, Button. For more details with example, you can check the below link....
How to Use ModalPopup Extender into GridView
I hope this article will clear your all doubts....Enjoy and share this with others...Thanks!

DataBind GridView OnKeyUp/Down

I have a gridview that will display customer information. I want it to update the results as the user types first and/or last name into the textboxes. Basically, to databind the gridview to it's datasource with the updated characters from the textboxes as the user types.
CODE EDITED:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Process.aspx.cs" Inherits="Reservations.WebForm3" %>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>Processing...</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="firstname" runat ="server" class="inputLarge" ontextchanged="firstname_TextChanged" />
<asp:TextBox ID="lastname" runat="server" class="inputLarge" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="457px">
<Columns>
<asp:TemplateField>
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="CustID" HeaderText="Cust ID">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="FirstName" HeaderText="First Name">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="City" HeaderText="City">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
</Columns>
</asp:GridView>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts></Scripts>
</asp:ScriptManager>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="firstname" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
protected void firstname_TextChanged(object sender, EventArgs e)
{
InventoryAppSoapClient inst = new InventoryAppSoapClient();
DataSet ds = inst.getCustomer(firstname.Text, "none");
GridView1.DataSource = ds;
GridView1.DataBind();
}
Everything works except the TextChanged event only first the first time. If I go back and change the text and tab off, nothing happens.
Have you tried adding an event handler for the OnTextChanged event of your text box.
Inside you could force the databind like so
Private void firstName_OnTextChanged(object sender, EventArgs e)
{
//Your datasource and parameters are already defined on the front end so there is no
//setup required
existing.DataBind();
}
Same goes for your text box lastName
Private void lastName_OnTextChanged(object sender, EventArgs e)
{
//Your datasource and parameters are already defined on the front end so there is no
//setup required
existing.DataBind();
}
And don't forget to add the methods to the OnTextChange attribute for each textbox in the front end. Like so.
<asp:TextBox ID="firstname" OnTextChanged="firstName_OnTextChanged" runat ="server" class="inputLarge"/>
<asp:TextBox ID="lastname" OnTextChanged="lastName_OnTextChanged" runat="server" class="inputLarge" />
Also, if you embed this code in an update Panel and use the AJAX control toolkit (free) the grid will update seamlessly. Otherwise it won't be pretty if you use classic asp techniques. The page will keep posting back every time you press a key. It will get annoying.

PopUpExtender on ImageButton inside GridView problem

I have GridView on my asp.net page, one column in that grid is ImageButton (TemplateField with ID="imbReserve"). On click on that button I want to show PopUp, but when I put TargetControlId="imbReserve" I get error message " A control with ID 'imbReserve' could not be found". How to achieve this, on click on button inside Grid show PopUp ?
Have a look at these 2 articles, that just helped me out with this problem
Article 1: A More Traditional approach
The Following is paraphrased from the above article
The Page Code:
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false"
Width="95%">
<Columns>
<asp:TemplateField >
<ItemTemplate>
<asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="customerid" HeaderText="ID" />
<asp:BoundField DataField="companyname" HeaderText="Company" />
<asp:BoundField DataField="contactname" HeaderText="Name" />
<asp:BoundField DataField="contacttitle" HeaderText="Title" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<ajaxToolKit:ModalPopupExtender
ID="mdlPopup" runat="server" TargetControlID="pnlPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none">
<asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
[Your Content Here]
</ContentTemplate>
</asp:UpdatePanel>
<div align="right" style="width:95%">
<asp:Button
ID="btnSave" runat="server" Text="Save" />
<asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
</div>
</asp:Panel>
Note that the GridView is wrapped in an update panel also that the Target Control ID for the Modal Extender is the same as the Pop Up Control ID. This is because the ModalPopUp Extender needs a target control ID and I think this solution is a better plan than using a hidden button.
Now For the Code Behind:
protected void BtnViewDetails_Click(object sender, EventArgs e)
{
// Do Anything you need to the contents of the update panel
// update the contents in the detail panel
this.updPnlCustomerDetail.Update();
// show the modal popup
this.mdlPopup.Show();
}
Article 2:Uses Clientside Javascript
The Following is paraphrased from the above article
The client side Javascript
<script type="text/javascript">
// keeps track of the delete button for the row
// that is going to be removed
var _source;
// keep track of the popup div
var _popup;
function showConfirm(source){
this._source = source;
this._popup = $find('mdlPopup');
// find the confirm ModalPopup and show it
this._popup.show();
}
function okClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// use the cached button as the postback source
__doPostBack(this._source.name, '');
}
function cancelClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// clear the event source
this._source = null;
this._popup = null;
}
Page Code:
<asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Item" HeaderText="Description" />
<asp:BoundField DataField="IsCompleted" HeaderText="Complete?" />
<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" >
<ItemTemplate>
<asp:Button ID="btnDelete" runat="server"
OnClientClick="showConfirm(this); return false;"
OnClick="BtnDelete_Click" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<ajaxToolKit:ModalPopupExtender BehaviorID="mdlPopup" runat="server"
TargetControlID="div" PopupControlID="div"
OkControlID="btnOk" OnOkScript="okClick();"
CancelControlID="btnNo" OnCancelScript="cancelClick();"
BackgroundCssClass="modalBackground" />
<div id="div" runat="server" align="center" class="confirm" style="display:none">
<img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this item?
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
</div>
Again note that the Target Control ID for the Modal Pop Up Extender is the same as the Pop Up Control ID. Also note the OnClientClick attribute on the button in the template field, make sure your include "return false;".
All that is needed in the code behind it the onClick (or onCommand) event handler to do what you need to do.
I've tried both of these approaches successfully.
Hope one of these two works for you.
The problem is related to the fact that the real ID is getting changed when the page get rendered to the client.
Open your page source in the browser and look at the ID that is generated from asp.net. Then use that ID inside the TargetControlID property
This kind of problem is present with all the templated controls in ASP.NET
A cleaner way will be to bind the TargetControlID property of the ModalPopupExtendr on Page Load where you can use the ClientID property dinamically generated
modalPopupExtender.TargetControlID = myTemplateControl.ClientID;

Resources