Scribd
Upload
89 views

Technical Blog: Edit and Update Gridview Using Ajax Modalpopupextender

The document is a blog post that describes how to edit and update data in a GridView control using an AJAX ModalPopupExtender. It includes ASPX markup for a GridView bound to sample data with an "Edit" button. Clicking Edit populates a modal popup with the row's data in textboxes. Updating the textboxes and clicking Update modifies the original GridView data source. Code behind handles binding data to the GridViews, showing/hiding the popup, and updating the data source on button clicks.

Uploaded by

mrpraveenm
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
89 views

Technical Blog: Edit and Update Gridview Using Ajax Modalpopupextender

The document is a blog post that describes how to edit and update data in a GridView control using an AJAX ModalPopupExtender. It includes ASPX markup for a GridView bound to sample data with an "Edit" button. Clicking Edit populates a modal popup with the row's data in textboxes. Updating the textboxes and clicking Update modifies the original GridView data source. Code behind handles binding data to the GridViews, showing/hiding the popup, and updating the data source on button clicks.

Uploaded by

mrpraveenm
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

3/7/2014

Technical Blog: EDIT and UPDATE GridView using AJAX MODALPOPUPEXTENDER

Technical Blog
Friday, September 21, 2012

EDIT and UPDATE GridView using AJAX MODALPOPUPEXTENDER


In this article I will explain how to edit and update data in gridview using AJAX ModalPopupExtender. ASPX Code:

Followers (4)

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .modalBackground { background-color: Gray; filter: alpha(opacity=50); opacity: 0.7; } .pnlBackGround { position: fixed; top: 10%; left: 10px; width: 300px; height: 125px; text-align: center; background-color: White; border: solid 3px black; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="lblTitle" runat="server" Text="BINDING DEPARTMENT DETAILS FOR EDIT AND UPDATE OPERATIO NS USING MODALPOPUPEXTENDER CONTROL OF AJAX CONTROL TOOLKIT" ForeColor="Red"></asp:Label> <br /> <br /> <asp:ScriptManager ID="Sc1" runat="server"> </asp:ScriptManager> <asp:GridView ID="gvDeptDtls" runat="server" AutoGenerateColumns="false" DataKeyNames="DeptCode" OnRowCommand="gvDeptDtls_OnRowCommand" BackColor="#FFFFCC" ForeColor="Black"> <HeaderStyle BackColor="Chocolate" Font-Bold="true" /> <Columns> <asp:ButtonField HeaderText="Edit" CommandName="EditRow" Text="Edit" ItemStyle-ForeColor="Blue" /> <asp:TemplateField HeaderText="Department Code"> <ItemTemplate> <asp:Label ID="lblDeptCode" runat="server" Text='<%# Bind("DeptCode")%>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Department Name"> <ItemTemplate> <asp:Label ID="lblDeptName" runat="server" Text='<%# Bind("DeptName")%>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Department Description"> <ItemTemplate> <asp:Label ID="lblDeptDescp" runat="server" Text='<%# Bind("DeptDescp")%>'></asp:Label> </ItemTemplate> </asp:TemplateField>

Follow this blog

Followers

Blog Archive
2012 (38) August (3) September (20) How to install ASP.net AJAX Control ToolKit WPF Application to convert text to speech PASSING TABLE VALUED PARAMETER TO STORED PROCEDURE... ENCRPT AND DECRYPT STORED PROCEDURES IN SQLSERVER ... Sample Code to insert form data into Excel using C... Example of ModalpopupExtender Ajax Control Developing Widgets with ASP.NET EDIT and UPDATE GridView using AJAX MODALPOPUPEXTE... Animation Extender Example - Ajax Control ToolKit Ajax Control ToolKit AlwaysVisibleControlExtender Example AJAX Control ... CalendarExtenderAJAX Control

http://sailajareddy-technical.blogspot.in/2012/09/edit-and-update-gridview-using-ajax.html

1/4

3/7/2014

Technical Blog: EDIT and UPDATE GridView using AJAX MODALPOPUPEXTENDER


</Columns> </asp:GridView> <asp:Button ID="btnShowPopUp" runat="server" Style="display: none" /> <br /> <br /> <asp:Panel ID="Pn1" runat="server"> <asp:GridView ID="gvUpdate" runat="server" AutoGenerateColumns="false" BackColor="#FFFFCC" ForeColor="Black" DataKeyNames="DeptCode"> <HeaderStyle BackColor="Chocolate" Font-Bold="true" /> <Columns> <asp:TemplateField HeaderText="Department Code" Visible="false"> <ItemTemplate> <asp:Label ID="lblDeptCode" runat="server" Text='<%# Bind("DeptCode") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Department Name" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle"> <ItemTemplate> <asp:TextBox ID="txtDeptName" runat="server" Text='<%# Bind("DeptName") %>' Width="80px"></asp:Text Box> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Department Description" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle"> <ItemTemplate> <asp:TextBox ID="txtDeptDescp" runat="server" Text='<%# Bind("DeptDescp") %>' Width="100px"></asp:Te xtBox> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <br /> <br /> <asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="Mdp1" runat="server" TargetControlID="btnShowPopUp" PopupControlID="Pn1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground"> </ajaxToolkit:ModalPopupExtender> </div> </form> </body> </html> ConfirmButtonExtenderAJAX Control ColorPickerExtenderAJAX Control CollapsiblePanelExtender AJAX Control AutoCompleteExtender AJAX Control PasswordStrength Example - AJAX Control DropShadowExtender Ajax Control HoverMenuExtender Example Ajax Control Accordion Control Example AJAX Control October (8) November (7) 2013 (9)

Labels
AJAX Control ToolKit (21) ASP.NET TOPICS (10) C# (Asp.Net) (8) SQL SERVER 2008 TOPICS (7)

Total Pageviews

20,335

About Me
Sailaja View my complete profile

Code Behind:

u s i n gS y s t e m ; u s i n gS y s t e m . C o l l e c t i o n s . G e n e r i c ; u s i n gS y s t e m . L i n q ; u s i n gS y s t e m . W e b ; u s i n gS y s t e m . W e b . U I ; u s i n gS y s t e m . W e b . U I . W e b C o n t r o l s ; u s i n gS y s t e m . D a t a ; p u b l i cp a r t i a lc l a s sF o r u m _ T o p i c s _ M o d a l P o p u p _ e d i t u p d a t e _ g r i d d t l s:S y s t e m . W e b . U I . P a g e { p r o t e c t e dv o i dP a g e _ L o a d ( o b j e c ts e n d e r ,E v e n t A r g se ) { i f( ! I s P o s t B a c k ) { B i n d G r i d ( ) ; } } p r o t e c t e dD a t a T a b l eC r e a t e D a t a T a b l e ( ) { D a t a T a b l eD t=n e wD a t a T a b l e ( ) ; D t . C o l u m n s . A d d ( " D e p t C o d e " ,t y p e o f ( I n t 1 6 ) ) ; D t . C o l u m n s . A d d ( " D e p t N a m e " ,t y p e o f ( S t r i n g ) ) ; D t . C o l u m n s . A d d ( " D e p t D e s c p " ,t y p e o f ( s t r i n g ) ) ; r e t u r nD t ; } p r o t e c t e dv o i dB i n d G r i d ( ) { / * J U S TC R E A T ET W OR O W S * / D a t a T a b l ed t D e p t=C r e a t e D a t a T a b l e ( ) ;

http://sailajareddy-technical.blogspot.in/2012/09/edit-and-update-gridview-using-ajax.html

2/4

3/7/2014

Technical Blog: EDIT and UPDATE GridView using AJAX MODALPOPUPEXTENDER


D a t a R o wd r=d t D e p t . N e w R o w ( ) ; d r [ " D e p t C o d e " ]=1 ; d r [ " D e p t N a m e " ]=" S c i e n c e " ; d r [ " D e p t D e s c p " ]=" S c i e n c eD e p t " ; d t D e p t . R o w s . A d d ( d r ) ; D a t a R o wd r 1=d t D e p t . N e w R o w ( ) ; d r 1 [ " D e p t C o d e " ]=2 ; d r 1 [ " D e p t N a m e " ]=" M a t h s " ; d r 1 [ " D e p t D e s c p " ]=" M a t h e m a t i c sD e p t " ; d t D e p t . R o w s . A d d ( d r 1 ) ; g v D e p t D t l s . D a t a S o u r c e=d t D e p t ; g v D e p t D t l s . D a t a B i n d ( ) ; } p r o t e c t e dv o i db t n U p d a t e _ C l i c k ( o b j e c ts e n d e r ,E v e n t A r g se ) { / * F E T C HU P D A T E DV A L U E SO FT H A TP A R T I C U L A RR O WO NG R I D * / s t r i n gD e p t N a m e ,D e p t D e s c p ; i n tD e p t _ C o d e=0 ; D e p t _ C o d e=I n t 3 2 . P a r s e ( V i e w S t a t e [ " D e p t C o d e " ] . T o S t r i n g ( ) ) ; D e p t _ C o d e=I n t 3 2 . P a r s e ( ( ( L a b e l ) g v U p d a t e . R o w s [ 0 ] . F i n d C o n t r o l ( " l b l D e p t C o d e " ) ) . T e x t ) ; D e p t N a m e=( ( T e x t B o x ) g v U p d a t e . R o w s [ 0 ] . F i n d C o n t r o l ( " t x t D e p t N a m e " ) ) . T e x t ; D e p t D e s c p=( ( T e x t B o x ) g v U p d a t e . R o w s [ 0 ] . F i n d C o n t r o l ( " t x t D e p t D e s c p " ) ) . T e x t ; / * M O D I F YO R I G I N A LG R I DV A L U E S * / D a t a T a b l eD t U p d a t e G V=C r e a t e D a t a T a b l e ( ) ; f o r( i n ti=0 ;i<g v D e p t D t l s . R o w s . C o u n t ;i + + ) { D a t a R o wd r=D t U p d a t e G V . N e w R o w ( ) ; i f( I n t 3 2 . P a r s e ( ( ( L a b e l ) g v D e p t D t l s . R o w s [ i ] . F i n d C o n t r o l ( " l b l D e p t C o d e " ) ) . T e x t )= =D e p t _ C o d e ) { d r [ " D e p t C o d e " ]=D e p t _ C o d e ; d r [ " D e p t N a m e " ]=D e p t N a m e ; d r [ " D e p t D e s c p " ]=D e p t D e s c p ; } e l s e { d r [ " D e p t C o d e " ]=( ( L a b e l ) g v D e p t D t l s . R o w s [ i ] . F i n d C o n t r o l ( " l b l D e p t C o d e " ) ) . T e x t ; d r [ " D e p t N a m e " ]=( ( L a b e l ) g v D e p t D t l s . R o w s [ i ] . F i n d C o n t r o l ( " l b l D e p t N a m e " ) ) . T e x t ; d r [ " D e p t D e s c p " ]=( ( L a b e l ) g v D e p t D t l s . R o w s [ i ] . F i n d C o n t r o l ( " l b l D e p t D e s c p " ) ) . T e x t ; } D t U p d a t e G V . R o w s . A d d ( d r ) ; } g v D e p t D t l s . D a t a S o u r c e=n u l l ; g v D e p t D t l s . D a t a B i n d ( ) ; g v D e p t D t l s . D a t a S o u r c e=D t U p d a t e G V ; g v D e p t D t l s . D a t a B i n d ( ) ; } p r o t e c t e dv o i ds h o w M o d a l P o p U p ( i n tG r i d R o w N o ) { / * B I N DG R I DI NT H EP O PU P* / D a t a T a b l eD t U p d a t e=C r e a t e D a t a T a b l e ( ) ; D a t a R o wd r=D t U p d a t e . N e w R o w ( ) ; d r [ " D e p t C o d e " ]=( ( L a b e l ) g v D e p t D t l s . R o w s [ G r i d R o w N o ] . F i n d C o n t r o l ( " l b l D e p t C o d e " ) ) . T e x t ; d r [ " D e p t N a m e " ]=( ( L a b e l ) g v D e p t D t l s . R o w s [ G r i d R o w N o ] . F i n d C o n t r o l ( " l b l D e p t N a m e " ) ) . T e x t ; d r [ " D e p t D e s c p " ]=( ( L a b e l ) g v D e p t D t l s . R o w s [ G r i d R o w N o ] . F i n d C o n t r o l ( " l b l D e p t D e s c p " ) ) . T e x t ; D t U p d a t e . R o w s . A d d ( d r ) ; g v U p d a t e . D a t a S o u r c e=D t U p d a t e ; g v U p d a t e . D a t a B i n d ( ) ; / * W I L LS H O WT H EM O D A L P O P U P * / M d p 1 . S h o w ( ) ; } p r o t e c t e dv o i dg v D e p t D t l s _ O n R o w C o m m a n d ( o b j e c ts e n d e r ,G r i d V i e w C o m m a n d E v e n t A r g se ) { / * W R I T EC O D EH E R ET OO P E NM O D A L P O PU PO NC L I C KO FE D I TL I N KB U T T O NI NT H EG R I D * / i f( e . C o m m a n d N a m e= =" E d i t R o w " ) { i n tr o w I n d e x=C o n v e r t . T o I n t 3 2 ( e . C o m m a n d A r g u m e n t ) ;

http://sailajareddy-technical.blogspot.in/2012/09/edit-and-update-gridview-using-ajax.html

3/4

3/7/2014

Technical Blog: EDIT and UPDATE GridView using AJAX MODALPOPUPEXTENDER


i n tD e p t C o d e=C o n v e r t . T o I n t 3 2 ( g v D e p t D t l s . D a t a K e y s [ r o w I n d e x ] . V a l u e ) ; V i e w S t a t e [ " D e p t C o d e " ]=D e p t C o d e ; s h o w M o d a l P o p U p ( r o w I n d e x ) ; } } }

Posted by Sailaja at 11:36 AM Labels: AJAX Control ToolKit

No comments: Post a Comment


Enter your comment...

Comment as:

Google Account

Publish

Preview

Newer Post
Subscribe to: Post Comments (Atom)

Home

Older Post

Watermark template. Powered by Blogger.

http://sailajareddy-technical.blogspot.in/2012/09/edit-and-update-gridview-using-ajax.html

4/4

You might also like