18/02/13

Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes

Eg ASP.Net GridView
Home Categories Search Hosting JQueryFAQs Forums Contact

Search

Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes

Author: Vinz Filed Under: ASP.Net | GridView
1

Published Date: Jun 10, 2009 Views: 137781

Abstract: In this article Vinz has explained how to generate a Row in GridView with TextBoxes when clicking a Button that is residing inside a GridView Footer in ASP.Net

Download Sample

ASPSnippets
Me gusta A 1.019 personas les gusta ASPSnippets.

P lug-in social de F acebook

Introduction: I decided to write this article because this has been asked so many times before at the forums (http://forums.asp.net) . Basically, this example shows on how to generate a Row in GridView with TextBoxes when clicking a Button that is residing inside a GridView Footer. To get started, lets grab a GridView control from the Visual Studio Toolbox and put it in the Web Form. The mark up would look something like this: < a s p : g r i d v i e w ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="RowNumber" HeaderText="Row Number" /> <asp:TemplateField HeaderText="Header 1"> <ItemTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Header 2"> <ItemTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Header 3"> <ItemTemplate> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> </ItemTemplate> <FooterStyle HorizontalAlign="Right" /> <FooterTemplate> <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" /> </FooterTemplate> </asp:TemplateField> </Columns> < / a s p : g r i d v i e w >

Seguir a

www.aspsnippets.com/Articles/Adding-Dynamic-Rows-in-ASP.Net-GridView-Control-with-TextBoxes.aspx

1/5

18/02/13

Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes

Since this demo is intended to generate rows of TextBox in GridView, then we set up some Template Fields columns so that GridView will automatically generates TextBoxes when a new row is being added. As you can see I have set up a BoundField Column for displaying the Row Number and set up three TemplateField Columns in the Grid and added each column a TextBox Control. You would also notice that I have added a Button Control under the FooterTemplate at the last column in the GridView. Note: Since we are added a Control in the GridView footer, then be sure to set ShowFooter to TRUE in the GridView. Now lets switch to the Code behind part of the web form. As you may know, the GridView control will not show in the page once there is no data associated on it. So the first thing we need here is to set an initial data in the GridView Control. To do this, we can use a DataTable for binding our GridView. Heres the code block below: p r i v a t e void S e t I n i t i a l R o w ( ) { DataTable d t = new DataTable( ) ; DataRow d r = null; d t . C o l u m n s . A d d ( new DataColumn( "RowNumber", typeof( string) ) ) ; d t . C o l u m n s . A d d ( new DataColumn( "Column1", typeof( string) ) ) ; d t . C o l u m n s . A d d ( new DataColumn( "Column2", typeof( string) ) ) ; d t . C o l u m n s . A d d ( new DataColumn( "Column3", typeof( string) ) ) ; d r=d t . N e w R o w ( ) ; d r [ "RowNumber"] = 1 ; d r [ "Column1"] = string. E m p t y ; d r [ "Column2"] = string. E m p t y ; d r [ "Column3"] = string. E m p t y ; d t . R o w s . A d d ( d r ) ; //dr = dt.NewRow(); //Store the DataTable in ViewState V i e w S t a t e [ "CurrentTable"] = d t ; G r i d v i e w 1 . D a t a S o u r c e=d t ; G r i d v i e w 1 . D a t a B i n d ( ) ; } As you can see, we define four Columns in the DataTable called RowNumber, Column1, Column2 and Column3. The RowNumber column will serve as the key for generating the rows in the GridView. Noticed that for Columns 1, 2 and 3, I assigned an empty value for those columns since the GridView will be generated for the first time. You also noticed that I store the DataTable in ViewState so that we can reference the current data associated within the DataTable when it postbacks. Now lets call the method above in Page_Load event: protected void P a g e _ L o a d ( object s e n d e r , EventArgs e ) { if ( ! P a g e . I s P o s t B a c k ) { S e t I n i t i a l R o w ( ) ; } } Running the codes above will give us this output below:

Now lets create the method for generating the rows when clicking the Button. Here are the code blocks below:

p r i v a t e void A d d N e w R o w T o G r i d ( ) { int r o w I n d e x=0 ; if ( V i e w S t a t e [ "CurrentTable"] ! = null) { DataTable d t C u r r e n t T a b l e=( DataTable) V i e w S t a t e [ "CurrentTable"] ; DataRow d r C u r r e n t R o w = null; if ( d t C u r r e n t T a b l e . R o w s . C o u n t>0 )

www.aspsnippets.com/Articles/Adding-Dynamic-Rows-in-ASP.Net-GridView-Control-with-TextBoxes.aspx

2/5

18/02/13
{

Adding Dynamic Rows in ASP.Net GridView Control with TextBoxes

for ( int i = 1 ;i< =d t C u r r e n t T a b l e . R o w s . C o u n t ;i + + ) { //extract the TextBox values TextBox b o x 1= ( TextBox ) G r i d v i e w 1 . R o w s [ r o w I n d e x ] . C e l l s [ 1 ] . F i n d C o n t r o l ( "TextBox1") ; TextBox b o x 2= ( TextBox ) G r i d v i e w 1 . R o w s [ r o w I n d e x ] . C e l l s [ 2 ] . F i n d C o n t r o l ( "TextBox2") ; TextBox b o x 3= ( TextBox ) G r i d v i e w 1 . R o w s [ r o w I n d e x ] . C e l l s [ 3 ] . F i n d C o n t r o l ( "TextBox3") ; d r C u r r e n t R o w=d t C u r r e n t T a b l e . N e w R o w ( ) ; d r C u r r e n t R o w [ "RowNumber"] = i + 1 ; d t C u r r e n t T a b l e . R o w s [ i-1 ] [ "Column1"] = b o x 1 . T e x t ; d t C u r r e n t T a b l e . R o w s [ i-1 ] [ "Column2"] = b o x 2 . T e x t ; d t C u r r e n t T a b l e . R o w s [ i-1 ] [ "Column3"] = b o x 3 . T e x t ; r o w I n d e x + + ; } d t C u r r e n t T a b l e . R o w s . A d d ( d r C u r r e n t R o w ) ; V i e w S t a t e [ "CurrentTable"] = d t C u r r e n t T a b l e ; G r i d v i e w 1 . D a t a S o u r c e=d t C u r r e n t T a b l e ; G r i d v i e w 1 . D a t a B i n d ( ) ; } } else { R e s p o n s e . W r i t e ( "ViewState is null") ; } //Set Previous Data on Postbacks S e t P r e v i o u s D a t a ( ) ; } As a summary, the code above gets the previous data stored from the ViewState and set the data stored from it into a DataTable so that we can add a new row based from the value entered from the TextBox. You will also noticed that we call the method SetPreviousData() at the bottom part of the codes above. Now where is that method? Below are the code blocks for that method:

p r i v a t e void S e t P r e v i o u s D a t a ( ) { int r o w I n d e x=0 ; if ( V i e w S t a t e [ "CurrentTable"] ! = null) { DataTable d t=( DataTable) V i e w S t a t e [ "CurrentTable"] ; if ( d t . R o w s . C o u n t>0 ) { for ( int i = 0 ;i<d t . R o w s . C o u n t ;i + + ) { TextBox b o x 1= ( TextBox ) G r i d v i e w 1 . R o w s [ r o w I n d e x ] . C e l l s [ 1 ] . F i n d C o n t r o l ( "TextBox1") ; TextBox b o x 2= ( TextBox ) G r i d v i e w 1 . R o w s [ r o w I n d e x ] . C e l l s [ 2 ] . F i n d C o n t r o l ( "TextBox2") ; TextBox b o x 3= ( TextBox ) G r i d v i e w 1 . R o w s [ r o w I n d e x ] . C e l l s [ 3 ] . F i n d C o n t r o l ( "TextBox3") ; b o x 1 . T e x t=d t . R o w s [ i ] [ "Column1"] . T o S t r i n g ( ) ; b o x 2 . T e x t=d t . R o w s [ i ] [ "Column2"] . T o S t r i n g ( ) ; b o x 3 . T e x t=d t . R o w s [ i ] [ "Column3"] . T o S t r i n g ( ) ; r o w I n d e x + + ; } } } } Now, since the methods are all set then we can call this at Button Click event of the Button. protected void B u t t o n A d d _ C l i c k ( object s e n d e r , EventArgs e ) { A d d N e w R o w T o G r i d ( ) ; }

www.aspsnippets.com/Articles/Adding-Dynamic-Rows-in-ASP.Net-GridView-Control-with-TextBoxes.aspx

3/5