I am having an issue getting the popup to appear at all. Once I can get the popup to show at all, I can troubleshoot from there. Basically, I have a gridview and I want a detailsview to appear in a popup when I select a link. This is all being done using an objectdatasource.
Note:The grid and the detailsview work just fine if I don't try to use a modalpopupextender.
My question is whether anyone can tell me what I am doing wrong in my code, or offer a better solution for implementing the ajax modalpopupextender.
~This is a shortened version of my markup~
<asp:Content ID="Content2" ContentPlaceHolderID="MasterContentPlaceHolder" Runat="Server">
<asp:ScriptManager ID="script1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
DataSourceID="ObjectDataSource1" AllowSorting="True"
CssClass="grid" CaptionAlign="Left" DataKeyNames="APP,ENV" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
>
<Columns>
<asp:TemplateField ShowHeader="False" Visible = "false">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Select" Text="Select" Visible ="false"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="APP" SortExpression="APP">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Visible = "false" Text='<%# Bind("APP") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="Label1" runat="server" CausesValidation ="false" CommandName="Select" Text='<%# Bind("APP") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ENV" HeaderText="ENV"
SortExpression="ENV" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlPopup" runat="server" Width= "700px" style="display:none;">
<asp:UpdatePanel ID="detailspanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
/>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
DataSourceID="ObjectDataSource2" CssClass="detail"
>
<Fields>
<asp:BoundField DataField="APP" HeaderText="APP"
SortExpression="APP" />
<asp:BoundField DataField="ENV" HeaderText="ENV"
SortExpression="ENV" />
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True"
CommandName="Update" Text="Update"></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
CommandName="Cancel" Text="Cancel"></asp:LinkButton>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Select" Text="Edit"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server"
SelectMethod="GetApplication"
TypeName="Applications.BusinessServices.AppService"
DataObjectTypeName="Applications.Entities.Application"
UpdateMethod="Update">
<SelectParameters>
<asp:ControlParameter ControlID="GridView1" Name="APP"
PropertyName="SelectedDataKey[0]" Type="String" DefaultValue="Null" />
<asp:ControlParameter ControlID="GridView1" Name="ENV"
PropertyName="SelectedDataKey[1]" Type="String" DefaultValue=" Null" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
SelectMethod="GetAllApplication"
TypeName="Applications.BusinessServices.AppAvailService" SortParameterName="sortColumn">
</asp:ObjectDataSource>
</asp:Content>
To sum it up, when the linkbutton label1 is clicked, the modalpopup should appear and show the detailsview.
~This is my codebehind~
protected void Page_Load(object sender, EventArgs e)
{
if (GridView1.SelectedIndex == -1)
{
GridView1.EnablePersistedSelection = true;
}
}
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
this.DetailsView1.Visible = true;
this.DetailsView1.DataBind();
this.detailspanel.Update();
this.mdlPopup.Show();
}
}
I have confirmed via debugging that that mdlPopup.Show() does execute when the link is clicked, and visual studio does not register any errors. It is simply that nothing happens.
Also, Btnshowpopup is just a fake button. The popup should still show if I call mdlpopup.show(); from codebehind. Even if set the panel and btnshowpopupp to visible and then click the button, nothing still happens.
Any help would be appreciated. Thanks.
I've resolved my issue. I figured that I would share it for anyone that has a similar issue.
I've seen 12 examples on various sites that show this not to be an issue, but I took the modalpopupextender outside of the updatepanel and the issue was resolved. So at least for me, the modalpopupextender has to be outside of the updatepanel in order for it to fire.
Related
I have a ajaxtoolkit combobox inside a gridview and it works perfectly, but the problem is when I click the dropdown button the list overlaps the page so I want to limit the number to be displayed to 10 items per scroll. Next problem is when I try to add an update panel to the page, It destroys the rendering of the combobox. How can I solve this? Thanks in advance
here is my code for the combobox inside the gridview
<asp:GridView CssClass="pad" ID="dgvOrder" runat="server" BorderStyle="Double" AutoGenerateColumns="False" OnRowDataBound="dgvOrder_RowDataBound" OnRowDeleting="dgvOrder_RowDeleting" HorizontalAlign="Center" >
<Columns>
<asp:TemplateField HeaderText="No." AccessibleHeaderText="No.">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="Description" AccessibleHeaderText="Description">
<ItemTemplate >
<ajaxToolkit:ComboBox ID="ddlItems" AutoPostBack="True" AppendDataBoundItems="True" onmouseover="this.size=4;" onmouseout="this.size=1;" DataTextField="item_desc" DataValueField="item_id" runat="server" AutoCompleteMode="Suggest" ItemInsertLocation="Prepend" OnSelectedIndexChanged="ddlItems_SelectedIndexChanged" DropDownStyle="DropDown" BorderStyle="Double" ></ajaxToolkit:ComboBox> <br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Please pick an item" ControlToValidate="ddlItems"></asp:RequiredFieldValidator>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField AccessibleHeaderText="Inventory Code" HeaderText="Inventory Code">
<ItemTemplate>
<asp:Label ID="lblInvCode" runat="server" Text=""></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField AccessibleHeaderText="Qty" HeaderText="Qty">
<ItemTemplate>
<asp:TextBox ID="txtQty" runat="server" OnTextChanged="txtQty_TextChanged" AutoPostBack="True" onkeyup ="ValidateText(this);"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator23" runat="server" ErrorMessage="Please input qty" ControlToValidate="txtQty"></asp:RequiredFieldValidator>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField AccessibleHeaderText="UOM" HeaderText="UOM">
<ItemTemplate>
<asp:Label ID="lblUOM" runat="server" Text=""></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField AccessibleHeaderText="SOQ" HeaderText="SOQ">
<ItemTemplate>
<asp:Label ID="lblSOQ" runat="server" Text=""></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField AccessibleHeaderText="Reason" HeaderText="Reason">
<ItemTemplate>
<asp:TextBox ID="txtReason" runat="server" Enabled="False"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
</Columns>
</asp:GridView>
and here is my code for the updatepanel
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
<Triggers>
(whole page inside)
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="txtIdNo" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
Long Item Lists / Multiple Input Controls
All of the items in a ComboBox's list will be rendered to the web page it exists in. The AutoCompleteExtender, on the other hand, retrieves items from its ServiceMethod after the page is rendered. When your ComboBox contains a rather long list of items, or when you have a relatively large number of ComboBoxes on the same page (or within the same UpdatePanel), load times could be slowed down significantly. When ComboBoxes perform slowly because of the amount of markup they must render to the browser, an AutoCompleteExtender can be used instead to increase performance.
<ajaxToolkit:ComboBox ID="ComboBox1" runat="server"
DropDownStyle="DropDown"
AutoCompleteMode="None"
CaseSensitive="false"
RenderMode="Inline"
ItemInsertLocation="Append"
ListItemHoverCssClass="ComboBoxListItemHover"
<asp:ListItem>...</asp:ListIem>
...
For more information your can look it in this link.
Problem:
FileUpload's File name not accessible inGridView
Explanation:
I have FileUpload in GridView, On GridView RowUpdate, i select a file in FileUpload, but when I couldn't get file Name in GridView's Rowupdate.
<asp:TemplateField HeaderText="Select Report">
<EditItemTemplate>
<asp:FileUpload ID="fuMaintenanceScanedReport" runat="server" Width="248px" Font-Size="Smaller" EnableViewState="true"/>
</EditItemTemplate>
<ItemTemplate>
<asp:FileUpload ID="fuMaintenanceScanedReport" runat="server" Width="248px" Font-Size="Smaller" />
</ItemTemplate>
<ItemStyle Width="250px" />
</asp:TemplateField>
Here is my Code behind code
protected void GvSchedule_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
string fileUpload = ((FileUpload)GvSchedule.Rows[e.RowIndex].Cells[3].FindControl("fuMaintenanceScanedReport")).FileName;
}
I was using Update Panel, and due to that it was not posting back FileUpload server control, that is why not getting files.
I simply remove the Update panel
Put it in updatepanel inside gridview and add trigers for that.
<asp:TemplateField HeaderText="UploadImage">
<ItemTemplate>
<asp:Image ImageUrl="~/images/1.jpg" runat="server" ID="image" /> // shown only when not in edit mode
</ItemTemplate>
<EditItemTemplate>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" /> // shown only in edit mode
<asp:Button ID="GridUploadButton" runat="server" Text="Upload" OnClick="GridUploadButton_Click" />
</ContentTemplate>
<Triggers> <asp:PostBackTrigger ControlID="GridUploadButton" />
</Triggers>
</EditItemTemplate>
</asp:TemplateField>
I have a nested gridview of images that are associated with the parent grid's row on a one to many relationship. This structure is contained in a user control. The images are uploaded with a fileupload control and are stored in a folder on the server. When the image grid's row is deleted, I delete the image from the server in the OnRowDeleting event. What's weird is that when you delete a row, a postback occurs and the OnRowDeleting event fires, the record is deleted from the database, but the row does not go away from the UI until you then delete it a second time. What's even weirder is that when I comment out the code in the OnRowDeleting event, the row deletes immediately. What's going on here?
<%# Control Language="C#" AutoEventWireup="true" CodeFile="OrderItemView.ascx.cs" Inherits="Controls_OrderItemView" EnableTheming="true" EnableViewState="true"%>
<asp:GridView ID="OrderItemList" runat="server" AutoGenerateColumns="False"
DataKeyNames="Id,ConcurrencyId" DataSourceID="OrderItemDataSource"
SkinID="Blue" OnRowDataBound="OrderItemList_RowDataBound"
EnableModelValidation="True" Width="100%"
OnRowUpdating="OrderItemList_RowUpdating"
OnRowUpdated="OrderItemList_RowUpdated" AllowSorting="True" >
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="ImageButtonConfirmDelete" runat="server"
CausesValidation="False" CommandName="Delete" ImageUrl="../Images/Grid_ActionDelete.gif"
OnClientClick='return confirm("Are you sure you want to delete this Order Item? This cannot be undone.");'/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Item Name" SortExpression="OrderItemName">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("OrderItemName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Images">
<ItemTemplate>
<a href="" data-id='<%# Eval("id","imageHeader_{0}") %>' class="expandImages">
<asp:Label ID="Label3" runat="server"
Text='<%# string.Format("{0} Image{1}", Helpers.GetImageCount(new Guid(Eval("Id").ToString())), Helpers.GetImageCount(new Guid(Eval("Id").ToString())) != 1 ? "s" : "") %>'>
</asp:Label>
</a>
<div id='<%# Eval("id","images_{0}") %>' class="imageDisplay">
<asp:GridView ID="gvImages" runat="server" SkinID="Blue"
DataKeyNames="Id" EnableModelValidation="True"
DataSourceID="ImageDataSource" AutoGenerateColumns="False"
ShowHeader="False" onrowdeleting="gvImages_RowDeleting">
<Columns>
<asp:TemplateField ShowHeader="false">
<ItemTemplate>
<asp:ImageButton ID="ImageButtonConfirmDeleteImage" runat="server"
CausesValidation="False" CommandName="Delete" ImageUrl="../Images/Grid_ActionDelete.gif"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="false">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FileName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<a href="" data-id='<%# Eval("id","image_{0}") %>' onclick='showImage("<%# Eval("ImageUrl") %>"); return false;'>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("FileName") %>' ToolTip="Click to Preview Image"></asp:Label>
</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<div style="color: Blue; font-style: italic;">No Images</div>
</EmptyDataTemplate>
</asp:GridView>
<asp:FileUpload ID="FileUpload1" runat="server"/>
<asp:Button ID="btnUploadImage" runat="server" Text="Upload" CommandArgument='<%# Eval("Id") %>'
CommandName="orderItemId" oncommand="btnUploadImage_Command"/>
<asp:ObjectDataSource ID="ImageDataSource" runat="server"
DataObjectTypeName="OrderSite.Entities.OrderItemImage"
DeleteMethod="Delete" InsertMethod="Save"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetList"
TypeName="OrderSite.Bll.OrderItemImageManager" UpdateMethod="Save"
SelectCountMethod="SelectCountForGetList">
<SelectParameters>
<asp:Parameter DbType="Guid" Name="orderItemId"/>
</SelectParameters>
</asp:ObjectDataSource>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<div style="padding: 3px 0 3px 3px 3px;">No Order Items Exist</div>
</EmptyDataTemplate>
</asp:GridView>
<asp:ObjectDataSource ID="OrderItemDataSource" runat="server"
DataObjectTypeName="OrderSite.Entities.OrderItem"
DeleteMethod="Delete" InsertMethod="Save"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetList"
TypeName="OrderSite.Bll.OrderItemManager" UpdateMethod="Save"
OnInserting="OrderItemDataSource_OnInserting"
SortParameterName="sortExpression" SelectCountMethod="SelectCountForGetList">
<SelectParameters>
<asp:Parameter DbType="Guid" Name="orderFormId" />
<asp:Parameter Name="sortExpression" Type="String" />
</SelectParameters>
</asp:ObjectDataSource>
I commented out any containing updatepanels in the parent page as they can always be the culprit, but there was no effect.
Here is the OnRowDeleting event:
protected void gvImages_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
// Also delete the file from the images folder
OrderItemImage myImage = OrderItemImageManager.GetItem((Guid)e.Keys["Id"]);
if (myImage != null)
{
string path = string.Format("../Images/OrderItemImages/{0}", myImage.OrderItemId.ToString());
if (File.Exists(Server.MapPath(string.Format("{0}/{1}", path, myImage.FileName))))
{
File.Delete(Server.MapPath(string.Format("{0}/{1}", path, myImage.FileName)));
// if there are no images left in folder, then delete it (only deletes empty directory)
if (Directory.GetFiles(Server.MapPath(path), "*.*", SearchOption.TopDirectoryOnly).Length == 0)
Directory.Delete(Server.MapPath(path));
}
OrderItemList.DataBind();
}
}
I've done this before and have had no issues, so any help would be greatly appreciated!
I ended up wrapping the nested GridView ("gvImages"), the FileUpload, and Button in a user control, and now it works great. I didn't change any of the code, just wrapped it all in the user control, so go figure.
I have a Gridview with the following markup:
<asp:GridView ID="gdvResxKeyValue" runat="server" Width="100%" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I need to have a handler for the Image click event. Is there any easier way to do so?
You can use an Image Button instead of Image. Try this code.
<asp:GridView ID="gdvResxKeyValue" runat="server" Width="100%" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" OnClick="YourEventName" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You just need to specify your server side event name here.
Use an asp button and set its style to be display:none
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" onclick="ClickImage(this)" />
.......
<asp:Button ID="hiddenButton" runat="server" OnClick="hiddenButton_Click" style="display:none"></asp:Button>
<script type="text/javascript">
function ClickImage(imageControl)
{
document.getElementById('<%=hiddenButton.ClientID%>').click();
}
</script>
This will raise the server side event of the button and you can do your work there.
Try this:
jquery Solution
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" onclick="this.next().click()"/>
<asp:LinkButton Text="text" runat="server" OnClick="call_method"/>
I have a gridview that receives a data source with 8621 entries with the page size set to 20. The first page is displayed exactly as it should be. I click the link to display page 2, and it also displays as it should. Anything after that however is still page 2. So if I click the link to go to page 3, the paging control updates saying I am on page 3, but the data displayed is the data on page 2. I know the gridview is getting all 8621 entries because if I change the page size to 200 it displays those 200. Why would the gridview work correctly for some pages but not others? Anyways, enough with my rambling, here is the code itself:
<ajax:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<cb:SortedGridView ID="SearchUsersGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="Email"
DefaultSortDirection="Ascending" DefaultSortExpression="Email"
AllowPaging="true" PageSize="20" AllowSorting="true" Width="100%" SkinID="PagedList">
<Columns>
<asp:TemplateField HeaderText="In List">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:CheckBox ID="IsInEmailList2" runat="server" checked='<%#IsInEmailList(Container.DataItem)%>' OnCheckedChanged="IsInEmailList_CheckedChanged" AutoPostBack="true" ></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email" SortExpression="Email">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
<ItemTemplate>
<asp:HyperLink ID="NameLink2" runat="server" Text='<%# Eval("Email") %>' NavigateUrl='<%#GetEditUserUrl(Container.DataItem)%>'></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name" SortExpression="LastName">
<HeaderStyle horizontalalign="Left" />
<ItemStyle horizontalalign="Left" />
<ItemTemplate>
<asp:Label ID="FullNameLabel2" runat="server" Text='<%#GetFullName(Container.DataItem)%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<div align="center">
<asp:Label runat="server" ID="noUsersFound" enableViewState="false" Text="No matching users found."/>
</div>
</EmptyDataTemplate>
</cb:SortedGridView>
</ajax:UpdatePanel>
and some relevant code behind:
SearchUsersGrid.Visible = true;
SearchUsersGrid.DataSourceID = "SearchUsersDs";
SearchUsersGrid.DataBind();
and the data source itself
<asp:ObjectDataSource ID="SearchUsersDs" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="FindUsersByName" TypeName="Builder.Users.UserDataSource"
SelectCountMethod="CountUsersByName" EnablePaging="True" SortParameterName="sortExpression" DataObjectTypeName="Builder.Users.User" DeleteMethod="Delete">
<SelectParameters>
<asp:ControlParameter ControlID="SearchText" Name="searchPattern" PropertyName="Text" Type="String" />
<asp:ControlParameter ControlID="SearchByDropDown" Name="searchField" PropertyName="SelectedValue" Type="Object" />
</SelectParameters>
</asp:ObjectDataSource>
There is no PageIndexChanged event. Any ideas?
Remove the AJAX update panel and check if it works as expected.. Another problem might be that if you bind the Grid in page_load make sure it is not posted back everytime.. put it in
if(!IsPostBack)
{
SearchUsersGrid.Visible = true;
SearchUsersGrid.DataSourceID = "SearchUsersDs";
SearchUsersGrid.DataBind();
}
I think the issue had to do with our production server. for some reason the code works great on our production box (even with the same data).