I have a lot of data to display in a GridView. Because there's so much information per row, I'd like to be able to display additional information when a user clicks on the row, so I thought a PopupExtender from the AJAX Toolkit would be perfect.
Ideally, I want the popup to display whenever any of the controls within the row are selected. I've been able to successfully attach the PopupExtender to a single control within the row, but I can't get the pop-up to attach to the row itself.
I would have thought that setting the PopupExtender's TargetControlId to the Row's ClientID within the RowDataBound event would work, but when I do this I get a runtime error:
TargetControlID of 'popupExtId' is not valid.
A control with ID 'gvList_ctl02' could not be found.
I noticed that the GridViewRow is rendered, the tr element does not include an id, so I also tried extending the GridView control to override the CreateRow method to render the id - using this method I was able to render the row's ID (e.g. gvList_ctl02), but the same runtime error was thrown when I added the PopupExtender back into the code.
I also tried binding the showPopup() javascript command to the row's onclick event to get the popup to display manually; whilst the click event is registered OK and is definitely triggered, the popup is still not shown.
Does anyone have any idea how to / if you can bind a PopupExtender to a GridViewRow?
My row bound code is as follows:
protected void gvList_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Bind the popup extender's target ID to the row ID
// This will cause a runtime error
PopupControlExtender pop = e.Row.FindControl("popupExtId") as PopupControlExtender;
pop.TargetControlID = e.Row.ClientID;
// Also bind the client side click handler to try to get the popup to show
// The alert is triggered and no javascript error is generated, but the popup does not display
e.Row.Attributes.Add("onclick", "alert('Row Clicked'); $find('" + pop.BehaviorID + "').showPopup();");
}
}
Many thanks.
If you're not opposed to using an ajax ModalPopupExtender, I use a little bit of javascript and some sneaky hidden button clicks to fire off my modal popups from within a grid view. I usually make my modal popup extender's target control id my hidden button, then, via javascript, fire my hidden button's click event to show the modal popup.
Here's my modal popup and hidden button markup.
<asp:Button ID="hiddenButton" runat="server" Text="" style="display:none"></asp:Button>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server"
TargetControlID="hiddenButton" PopupControlID="Panel1" CancelControlID="CancelButton"
BackgroundCssClass="modalBackground" Drag="True"/>
Here's my javascript to show my popup.
function showModal(btnID) {
btn = document.getElementById(btnID);
btn.click();
}
In my rowdatabound event, I call the javascript function showModal from button's onclick event.
Button myButton = (Button)e.Row.Cells[9].Controls[1];
matchButton.Attributes.Add("onclick", "showModal('" + hiddenButton.ClientID + "');");
Hope this might help point you in the right direction.
Related
Hi im having a modal popup extender for user confirmation to delete a file in gridview. I have given delete image button on the gridview.on delete image button click in every row of gridview, the control is passed to rowcommand function based on the command name of the image button. Before the control passes to rowcommand, it has to display an alert to delete "Do you want to delete?" if yes it has pass control to delete,if no it should not delete.
Thanks in advance.
this is my gridview_rowcommand function code
if (e.CommandName == "Delete") {
try {
int selectedrow = Convert.ToInt32(e.CommandArgument.ToString());// fetching the row
You are trying to get the server side to display the confirmation dialog. A better approach is to display this before the button posts back.
Here is an example that uses the standard Javascript confirm() dialog.
<asp:Button ID="btnDelete" runat="server" Text="Delete" CommandArgument='<Eval("ID")>' OnClientClick="return confirm('OK to Delete?');" />
In my Web application, I am dynamically adding a Button named as "Click Me !". At Stage 1 , when the Button is clicked, it has to show a alert box . At Stage 2, it has to show a Popup.
I use ModalPopupExtender to achieve popup. The Problem is, the popup is just blinked once, instead of Displaying it constantly. Given below my codes...can any one help me to get rid of this ?
Page_OnLoad():
**************
Button Button1=new Button();
Button1.Text="Click Me !";
Button1.ID="LogBut";
Controls.Add(LogBut);
Stage 1:
JavaScript:
***********
function alert()
{
alert("Stage 1");
}
Code behind:
************
LogBut.Attributes.Add("OnClick", "alert();");
Stage 2:
JavaScript:
***********
var Modalpopup='<%=modalPermission.ClientID %>';
function Popup()
{
$find(Modalpopup).show();
}
Design:
*******
<Ajax:ModalPopupExtender ID="modalPermission" runat="server" TargetControlID="Infield"
PopupControlID="divPermission"></Ajax:ModalPopupExtender>
<asp:HiddenField ID="Infield" runat="server" />
Code Behind:
************
LogBut.Attributes.Add("OnClick", "Popup();");
Note: I am using the hidden field control's Id as ModaPopupExtender's TargetControlId. Am adding this button inside calendar control.
Screenshots of the calendar:
Modal popups do not remember that it's supposed to show after a popup. If you are attaching a popup show to a button, you have to disable the postback to the server. Most likely your problem is the button shows the modal, but also posts back, and on postback, the modal doesn't remember it's supposed to show. You can kill the postback by doing the following; set
UseSubmitBehavior='false'
on the server-side button, and then in the Popup function, do:
function Popup(e) {
// stop button event propagation, which causes postback
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
// show modal
}
And that should prevent a button postback to the server.
EDIT: Your function said Popup, but your javascript is rendering showpopup() as the function call. If that function doesn't exist (and spelled the exact same), it will never stop the postback.
I have a checkbox that when clicked, calls a javascript program that calls grid.PerformCallback(), where grid is the client instance name of my ASPxGridView gridview. This gridview also has a custom callback method which databinds the table. However when i click my checkbox, instead of only performing callback on the gridview, my page does a full postback, which posts the form. How do i make it so that it only updates the gridview?
function toggle()
{
productGrid.PerformCallback();
}//end toggleExch()
<dx:ASPxGridView ClientInstanceName="productGrid" Width="100%" ID="productGrid" runat="server"
DataSourceID="ProductSQL" EnableCallBacks="true" OnCustomCallback="productGrid_OnCustomCallback">
</dx:ASPxGridView>
protected void productGrid_OnCustomCallback(object sender,
DevExpress.Web.ASPxGridView.ASPxGridViewCustomCallbackEventArgs e)
{
System.Diagnostics.Debug.WriteLine("in postback");
productGrid.DataBind();
}//end productGrid_OnCustomCallback()
so basically the debug line is not printed and the page goes into full postback - how do i only postback and databind the grid? (i need to do more server side processing before databinding or directly binding from jquery is out of the question)
found the answer - should use iscallback instead of ispostback
Unfortunately, you did not post the aspx markup of the button. However, if this is the ASPxButton, make certain that its AutoPostback property is false ...
This question already has answers here:
Facebox adding commas to input
(3 answers)
Closed 3 years ago.
I'm using jQuery FaceBox to show a textbox, a dropdownlist and a button. The user can write a text in the textbox, select a value in the ddl abd hit the button. This fires some code in the codebehind. The FaceBox shows fine, and the content in it is also ok. Also, the button event is fired. This is the code for the button event handler:
protected void Button1_Click(object sender, EventArgs e)
{
_favorit = new Favoritter();
ListItem fav = ddl_favoritter.SelectedItem;
_favorit.FavoritterFolderID = int.Parse(fav.Value);
//_favorit.FavoritterFolderID = Convert.ToInt32(ddl_favoritter.SelectedItem);
_favorit.FavoritterNavn = txt_favoritNavn.Text;
_favorit.FavoritterUserID = UserID;
_favorit.FavoritterUrl = HttpContext.Current.Request.Url.ToString();
FavoritterManager.InsertFavoritter(_favorit);
}
A business object is created, and its properties set with the values read from the controls. The object is then inserted into a database, which works just fine. The problem is that the textbox and dropdown values are not set properly. The textbox value is empty, and the ddl selected value is allways 1, even though I write in the textbox, and select another ddlitem before I hit the button. The ddl is loaded like this:
if (!Page.IsPostBack)
{
_favoritter = FavoritterFolderManager.GetFavoritterFolderByUser(UserID);
ddl_favoritter.DataSource = _favoritter;
ddl_favoritter.DataBind();
}
I tried putting this code outside if (!Page.IsPostBack), and also filling it using an objectdatasource, still the same issue. It's like the controls are "reset" as I hit the button, and I don't think it has anything to do with the FaceBox, as all it does is to show the div that contains the controls... Then again, it might... Any ideas?
This is the code in the aspx page:
<div id="showme" style="display:none;">
Add to favourites.<br />
<br />
<p>
Title: <span><asp:TextBox ID="txt_favoritNavn" runat="server"></asp:TextBox></span></p>
<p>
select folder: <span><asp:DropDownList ID="ddl_favoritter" runat="server" DataTextField="FavoritterFolderNavn"
DataValueField="FavoritterFolderID" AppendDataBoundItems="true">
</asp:DropDownList>
</span>
</p>
<br />
<asp:Button ID="Button1" runat="server" Text="Gem" onclick="Button1_Click"/>
</div>
You need to have the code that fills the text box and selects the drop down item inside of the if(!IsPostBack) block, because the page load event fires again before the button event (See the ASP.NET Page Life Cycle for more info on this). Have you tried enabling view state on the control? That may be part of the issue.
Change
$('body').append($.facebox.settings.faceboxHtml)
to
$('form').append($.facebox.settings.faceboxHtml)
The problem is a lot of these controls, not just FaceBox append themselves to the body by default. jQuery UI dialog does this as well.
See this question for a fix: JQuery Facebox Plugin : Get it inside the form tag
When things happen outside the <form> tag, they're disconnected from how ASP.Net works. When you clicked submit, the values from those inputs weren't inside the form, so didn't submit to the server...which is why you aren't seeing the values.
This is the quick answer from that question, credit to Kevin Sheffield:
poking around the facebox.js I came across this line in the function init(settings)...
$('body').append($.facebox.settings.faceboxHtml)
I changed that to ...
$('#aspnetForm').append($.facebox.settings.faceboxHtml)
This is probably a simple question but I am not an ASP.NET developer and I am quite stuck.
I have a simple search routine that returns between zero and several hundred results. Each of these must be added to the page as a button and I want to set the text of the button and the CommandArgument property so that when the button is clicked I can read the CommandArgument back and react accordingly.
However, when I click the button the event does not run at all. How can I get it to run?
The code for building the button list (simplified for readability) is as follows:
foreach (SearchResult sr in searchResults)
{
Button result = new Button();
result.Text = sr.name;
result.CommandArgument = sr.ID.ToString();
AccountSearchResults.Controls.Add(result);
result.Click += new EventHandler(SearchResultClicked);
AccountSearchResults.Controls.Add(new LiteralControl("<br/>"));
}
At the minute to test, I have popped a label on the form to put the CommandArgument in. This code is never executed though.
void SearchResultClicked(object sender, EventArgs e)
{
Label1.Text = ((Button)sender).CommandArgument;
}
You mentioned in another answer that you are adding these when a button is clicked. Looking at your code, I would suggest that you try setting a unique ID for each button added, then ensure that on loading the page that buttons with the same IDs and CommandArgument values are reloaded. When a dynamically loaded button is clicked, it must still exist on the page after postback for the event to fire.
I think the ID is all you need, plus your requirement for the CommandArgument). You could put the ID information in the ViewState if you can't get it repeat without a long search process.
Where are you adding this buttons?
if you are adding them inside another control then the event might be raising in the parent control. This happens on DataRepeaters and DataGrids for example.
I think you need to use the OnCommand event handler, rather than the OnClick i.e. try changing this:
result.Click += new EventHandler(SearchResultClicked);
to this:
result.Command += new EventHandler(SearchResultClicked);
UPDATE
Try changing the type of second argument to your event hander from EventArgs to CommandEventArgs. You might also have to set the CommandName property on your button i.e.
result.CommandName = "foo";