ModalPopupExtender Example for Editing Rows in a GridView (Master/Detail Scenario)
The web application I am currently working on is a data-centric, internal facing application targeted at the knowledge workers within our enterprise. A majority of the pages are our core 'search' pages that contain a GridView and a number of input elements for entering search criteria. Each row in our GridViews contain a hyperlink to a supporting 'details' page that has additional information for the selected row - usually contained in a DetailsView. Our standard for implementing this has been to render the values for the GridViews primary key column as a hyperlink that takes the user to the details page passing the PK through the query string. This all works fine and our users seem to be OK with this type of naviagation. But when I was recently doing some work with the ModalPopupExtender, I was curious if we could improve this flow by keeping the user on the main search page by moving the DetailsView to the ModalPopupExtender. See the screen shot below or the live demo for an example.Live Demo | Download Code
I did a few google searches, and sure enough there were some people doing this (here and here). I took a similiar approach to the second article, but with a few minor tweaks. I uploaded a live demo of these pages so you can check out the behavior (I kept the styling to a minimum as usual). The code for this example is straight-forward except for the following 3 items:
1. The ModalPopupExtender requires the TargetControlID property to be set. Because of this I created a hidden button so this error doesn't occur. For this example, we don't need to set a control to trigger the popup because we are always explicitly calling Show() on the popup when the Details button is clicked).
2. The DetailsView for the selected row is contained in an updatepanel with the UpdateMode set to Conditional. This is done because we want to make sure that the control is only updated from the Details button click handler and not when the Customers GridView is sorted or paged through
3. We are explicitly calling Show on the ModalPopup to display the DetailsView from the 'Details' button click event. This is the only action that triggers the ModalPopup from being made visible
Also, I didn't actually implement an update because I don'y want my northwind database getting messed up. Hopefully this will get you enough of a start that implementing the update will not be a huge problem.
Here is the markup for the page, Enjoy!
<%@ Page Language="C#" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="head" runat="server"> <title>Master Details Example</title> <script runat="server"> /// <summary> /// /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void BtnViewDetails_Click(object sender, EventArgs e) { // get the gridviewrow from the sender so we can get the datakey we need Button btnDetails = sender as Button; GridViewRow row = (GridViewRow)btnDetails.NamingContainer; // extract the customerid from the row whose details button originated the postback. // grab the customerid and feed it to the customer details datasource // finally, rebind the detailview this.sqldsCustomerDetails.SelectParameters.Clear(); this.sqldsCustomerDetails.SelectParameters.Add("customerid", Convert.ToString(this.gvCustomers.DataKeys[row.RowIndex].Value)); this.dvCustomerDetail.DataSource = this.sqldsCustomerDetails; this.dvCustomerDetail.DataBind(); // update the contents in the detail panel this.updPnlCustomerDetail.Update(); // show the modal popup this.mdlPopup.Show(); } </script> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } </style> </head> <body> <form id="form" runat="server"> <asp:ScriptManager ID="scriptManager" runat="server" /> <div> <asp:SqlDataSource ID="sqldsCustomers" runat="server" SelectCommand="select customerid, companyname, contactname, contacttitle from dbo.customers" SelectCommandType="Text" ConnectionString="todo" /> <asp:SqlDataSource ID="sqldsCustomerDetails" runat="server" SelectCommand="select * from dbo.customers where customerid=@customerid" SelectCommandType="Text" CancelSelectOnNullParameter="true" ConnectionString="todo"/> <p style="background-color:AliceBlue; width:95%"> Example of using a ModalPopupExtender to edit the indivdual rows of a GridView.<br /> To test out the functionality, click the Details button of any of the rows and watch what happens.<br /> </p> <br /> <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" /> <asp:GridView ID="gvCustomers" runat="server" DataKeyNames="customerid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true" PageSize="10" DataSourceID="sqldsCustomers" Width="95%"> <AlternatingRowStyle BackColor="aliceBlue" /> <HeaderStyle HorizontalAlign="Left" /> <Columns> <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px"> <ItemTemplate> <asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="customerid" HeaderText="ID" SortExpression="customerid" ReadOnly="true" /> <asp:BoundField DataField="companyname" HeaderText="Company" SortExpression="companyname" ReadOnly="true" /> <asp:BoundField DataField="contactname" HeaderText="Name" SortExpression="contactname" ReadOnly="true" /> <asp:BoundField DataField="contacttitle" HeaderText="Title" SortExpression="contacttitle" ReadOnly="true" /> </Columns> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> <asp:Button id="btnShowPopup" runat="server" style="display:none" /> <ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" 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> <asp:Label ID="lblCustomerDetail" runat="server" Text="Customer Detail" BackColor="lightblue" Width="95%" /> <asp:DetailsView ID="dvCustomerDetail" runat="server" DefaultMode="Edit" Width="95%" BackColor="white" /> </ContentTemplate> </asp:UpdatePanel> <div align="right" style="width:95%"> <asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="alert('Sorry, but I didnt implement save because I dont want my northwind database getting messed up.'); return false;" Width="50px" /> <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" /> </div> </asp:Panel> </div> </form> </body> </html>
Posts
1 comments:
GridView rows customizing
Post a Comment