SLQ01M/Tu46PdPquXI/AAAAAAAAA0o/HkCBbKtq4Bg/s1600/NormalTooltip.gif' alt='Asp Datagrid Column Template' title='Asp Datagrid Column Template' />Adding Dynamic Rows in ASP. Net Grid. View Control with Text. Boxes. Introduction I decided to write this article because this has been asked so many times before at the forums http forums. Basically, this example shows on how to generate a Row in Grid. View with Text. Boxes when clicking a Button that is residing inside a Grid. View Footer. To get started, lets grab a Grid. View control from the Visual Studio Toolbox and put it in the Web Form. ASP. NET Quick Guide Free ASP. NET Tutorials, Reference Manual, and Quick Guide for Beginners. Learn ASP. NET starting from Environment Setup, Basic Controls. The mark up would look something like this lt asp gridview. IDGridview. 1runatserverShow. FootertrueAuto. Generate. Columnsfalse        lt Columns        lt asp Bound. KB/aspnet/create_template_columns/DynamicColumnsWithTemplate.jpg' alt='Asp Datagrid Column Template' title='Asp Datagrid Column Template' />Field. Data. FieldRow. NumberHeader. TextRow Number        lt asp Template. Field. Header. TextHeader 1            lt Item. Template                lt asp Text. I was recently working on a requirement to perform Update and Delete operations on a WPF DataGrid control similar to what developers do in a ASP. NET Grid control. Example Custom UI Style Tiles with Drag and Drop SharePoint 2013. The content you requested has already been retired. It is available to download on this page. I have a ButtonColumn in a DataGrid ltaspButtonColumn HeaderTextEdit ButtonTypePushButton TextEdit How do I set its CSS class The only way I can. In the previous article we have seen how to add a Checkbox Column In DataGrid and how to achieve multi select delete operation. In this article we will see how we can. Home of the Microsoft ASP. NET development community. Download Visual Studio, post to the forums, read ASP. NET blogs and learn about ASP. NET. The DataGrid control provides a flexible way to display a collection of data in rows and columns. The DataGrid includes builtin column types and a template column. Link for csharp, asp. Link for text. Box. IDText. Box. Text. Box            lt Item. Template        lt asp Template. Field        lt asp Template. Field. Header. TextHeader 2            lt Item. Template                lt asp Text. Pl6XnhkcWVc/TRCzeapqx2I/AAAAAAAABn8/mDBciX7DlyI/s1600/ToHeaderRecords8.JPG' alt='Asp Datagrid Column Template' title='Asp Datagrid Column Template' />Box. IDText. Box. Text. Box            lt Item. Template        lt asp Template. Field        lt asp Template. Field. Header. TextHeader 3            lt Item. Template                 lt asp Text. EditColumns.png' alt='Asp Datagrid Column Template' title='Asp Datagrid Column Template' />Box. IDText. Box. Text. Box            lt Item. Template            lt Footer. Style. Horizontal. AlignRight            lt Footer. Template             lt asp Button. IDButton. AddrunatserverTextAdd New Row            lt Footer. Template        lt asp Template. Field        lt Columns lt asp gridview Since this demo is intended to generate rows of Text. Box in Grid. View, then we set up some Template Fields columns so that Grid. View will automatically generates Text. Boxes when a new row is being added. As you can see I have set up a Bound. Field Column for displaying the Row Number and set up three Template. Field Columns in the Grid and added each column a Text. Box Control. You would also notice that I have added a Button Control under the Footer. Template at the last column in the Grid. View. Note Since we are added a Control in the Grid. View footer, then be sure to set Show. Footer to TRUE in the Grid. View. Now lets switch to the Code behind part of the web form. As you may know, the Grid. View 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 Grid. View Control. To do this, we can use a Data. Table for binding our Grid. View. Heres the code block below    privatevoid Set. Initial. Row            Data. Table dt new. Data. Table        Data. Row dr null        dt. Columns. Addnew. Data. ColumnRow. Number, typeofstring        dt. Columns. Addnew. Data. ColumnColumn. Columns. Addnew. Data. ColumnColumn. Columns. Addnew. Data. ColumnColumn. New. Row        drRow. Number 1        drColumn. Empty        drColumn. Empty        drColumn. Empty        dt. Rows. Adddr        dr dt. New. Row        Store the Data. Table in View. State        View. StateCurrent. Table dt        Gridview. Data. Source dt        Gridview. Data. Bind    As you can see, we define four Columns in the Data. Table called Row. Number, Column. 1, Column. Column. 3. The Row. Number column will serve as the key for generating the rows in the Grid. View. Noticed that for Columns 1, 2 and 3, I assigned an empty value for those columns since the Grid. View will be generated for the first time. You also noticed that I store the Data. Table in View. State so that we can reference the current data associated within the Data. Table when it postbacks. Now lets call the method above in PageLoad event    protectedvoid PageLoadobject sender, Event. Args e            if Page. Is. Post. Back                    Set. Initial. Row              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. Add. New. Row. To. Grid            int row. Index 0        if View. StateCurrent. Table null                    Data. Table dt. Current. Table Data. TableView. StateCurrent. Table            Data. Row dr. Current. Row null            if dt. Current. Table. Rows. Count 0                            for int i 1 i lt dt. Current. Table. Rows. Count i                                    extract the Text. Box values                    Text. Box box. 1 Text. BoxGridview. Rowsrow. Index. Cells1. Find. ControlText. Box. 1                    Text. Box box. 2 Text. BoxGridview. Rowsrow. Index. Cells2. Find. ControlText. Box. 2                    Text. Box box. 3 Text. BoxGridview. Rowsrow. Index. Cells3. Find. ControlText. Box. 3                    dr. Current. Row dt. Current. Table. New. Row                    dr. Current. RowRow. Number i 1                    dt. Current. Table. Rowsi 1Column. Text                    dt. Current. Table. Rowsi 1Column. Text                    dt. Current. Table. Rowsi 1Column. Text                    row. Index                                dt. Current. Table. Rows. Adddr. Current. Row                View. StateCurrent. Table dt. Current. Table                Gridview. Data. Source dt. Current. Table                Gridview. Data. Bind                            else                    Response. WriteView. State is null                Set Previous Data on Postbacks        Set. Previous. Data    As a summary, the code above gets the previous data stored from the View. State and set the data stored from it into a Data. Table so that we can add a new row based from the value entered from the Text. Box. You will also noticed that we call the method Set. Previous. Data at the bottom part of the codes above. Now where is that method  Below are the code blocks for that method    privatevoid Set. Previous. Data            int row. Index 0        if View. StateCurrent. Table null                    Data. Table dt Data. TableView. StateCurrent. Table            if dt. Rows. Count 0                            for int i 0 i lt dt. Rows. Count i                                    Text. Box box. 1 Text. BoxGridview. Rowsrow. Index. Cells1. Find. ControlText. Box. 1                    Text. Box box. 2 Text. Find. ControlText. Box. Text dt. RowsiColumn. To. String                    box. Text dt. RowsiColumn. To. String                    box. Text dt. RowsiColumn. To. String                    row. Index                                        Now, since the methods are all set then we can call this at Button Click event of the Button. Button. AddClickobject sender, Event. Args e          Add. New. Row. To. Grid  As you can see the code above is very straight forward and self explanatory. Running the code above will give us this output below Thats it Hope you will find this example useful Download the sample source code using the link below. AddingDynamicRowsinGrid. ViewwithText. Boxes. Select all Check. Box in Data. Grid and delete rows in Silverlight 3. Introduction. In the previous article we have seen how to add a Checkbox Column In Data. Grid and how to achieve multi select delete operation. In this article we will see how we can select all rows of Data. Grid and delete all selected. Creating Silverlight Project. Fire up Visual Studio 2. Silverlight 3 Project. Name it as Select. All. Rows. Data. Grid. First we will design our application to have a Data. Grid to display data and a Button to Delete Selected Rows. As you see we have customized the Columns in the Data. Grid. Now we will add a Check. Box Control in the Header of first column. I tried many ways to put a Check. Box over there, but the effective way is to create a style and assign the style to Header. Style of that Column. Here is the Style in XAML. User. Control. Resources lt Style x KeyData. Grid. Column. Header. Style Target. Typedata. Primitives Data. Grid. Column. Header          lt Setter PropertyForeground ValueFF0. Setter PropertyHorizontal. Content. Alignment ValueLeft          lt Setter PropertyVertical. Content. Alignment ValueCenter          lt Setter PropertyIs. Tab. Stop ValueFalse          lt Setter PropertySeparator. Brush ValueFFC9. CACA          lt Setter PropertyPadding Value4          lt Setter PropertyTemplate          lt Setter. Value          lt Control. Template Target. Typedata. Primitives Data. Grid. Column. Header          lt Grid x NameRoot                   lt Grid. Column. Definitions                   lt Column. Definition                   lt Column. Definition WidthAuto                   lt Grid. Column. Definitions                   lt Visual. State. Manager. Visual. State. Groups                   lt Visual. State. Group x NameCommon. States                   lt Visual. State x NameNormal                   lt Visual. State x NameMouse. Over          lt Storyboard          lt Color. Animation Duration0 Storyboard. Target. NameBackground. Rectangle Storyboard. Target. PropertyFill. Color ToFF4. 48. DCA          lt Color. Animation Duration0 Storyboard. Target. NameBackground. Gradient Storyboard. Target. PropertyFill. Gradient. Stops3. Color To7. FFFFFFF          lt Color. Animation Duration0 Storyboard. Target. NameBackground. Gradient Storyboard. Target. PropertyFill. Gradient. Stops2. Color ToCCFFFFFF          lt Color. Animation Duration0 Storyboard. Target. NameBackground. Gradient Storyboard. Target. PropertyFill. Gradient. Stops1. Color ToF2. FFFFFF          lt Storyboard          lt Visual. State          lt Visual. State x NamePressed          lt Storyboard          lt Color. Animation Duration0 Storyboard. Target. NameBackground. Rectangle Storyboard. Target. PropertyFill. Color ToFF4. 48. DCA          lt Color. Civilization Game Civ 5 Full Screen. Animation Duration0 Storyboard. Target. NameBackground. Gradient Storyboard. Target. PropertyFill. Gradient. Stops0. Color ToD8. FFFFFF          lt Color. Animation Duration0 Storyboard. Target. NameBackground. Gradient Storyboard. Target. PropertyFill. Gradient. Stops1. Color ToC6. FFFFFF          lt Color. Animation Duration0 Storyboard. Target. NameBackground. Gradient Storyboard. Target. PropertyFill. Gradient. Stops2. Color To8. CFFFFFF          lt Color. Animation Duration0 Storyboard. Target. NameBackground. Gradient Storyboard. Target. PropertyFill. Gradient. Stops3. Color To3. FFFFFFF          lt Storyboard          lt Visual. State          lt Visual. State. Group          lt Visual. State. Group x NameSort. States          lt Visual. State x NameUnsorted          lt Visual. State x NameSort. Ascending          lt Visual. State x NameSort. Descending          lt Visual. State. Group          lt Visual. State. Manager. Visual. State. Groups          lt Rectangle x NameBackground. Rectangle FillFF1. F3. B5. 3 StretchFill Grid. Column. Span2          lt Rectangle x NameBackground. Gradient StretchFill Grid. Column. Span2          lt Rectangle. Fill          lt Linear. Gradient. Brush End. Point. 7,1 Start. Point. 7,0          lt Gradient. Stop ColorFCFFFFFF Offset0. Gradient. Stop ColorF7. FFFFFF Offset0. Gradient. Stop ColorE5. FFFFFF Offset0. Gradient. Stop ColorD1. FFFFFF Offset1          lt Linear. Gradient. Brush          lt Rectangle. Fill          lt Rectangle          lt Rectangle x NameVertical. Separator FillTemplate. Binding Separator. Brush Vertical. AlignmentStretch Width1 VisibilityTemplate. Binding Separator. Visibility Grid. Column1          lt Check. Box x Namechk. Select. All ClickchkClick Margin2,0,0,0 ContentSelect d Layout. OverridesWidth. Height Vertical. AlignmentCenter. Horizontal. AlignmentLeft          lt Grid          lt Control. Template          lt Setter. Value          lt Setter lt Style lt User. Control. Resources Now assign the Style to your Header. Style of the Column. Data. Grid x Namedg. Person Margin8 Grid. Column1 Is. Read. OnlyTrue                    Loading. Rowdg. PersonLoading. Row Grid. Row1 Auto. Generate. ColumnsFalse            lt data Data. Grid. Columns                lt data Data. Grid. Template. Column Width8. Header. StyleStatic. Resource. Data. Grid. Column. Header. Style                    lt data Data. Grid. Template. Column. Cell. Template                        lt Data. Template                            lt Check. Box x Namechk. Person Clickchk. PersonClick                                      Vertical. AlignmentCenter Is. Checkedfalse. Horizontal. AlignmentCenter Horizontal. Content. AlignmentCenter                        lt Data. Template                    lt data Data. Grid. Template. Column. Cell. Template                lt data Data. Grid. Template. Column                lt data Data. Grid. Text. Column HeaderName BindingBinding Name Min. Width1. 20 WidthSize. To. Cells Can. User. ReorderTrue Can. User. SortTrue                lt data Data. Grid. Text. Column HeaderAge BindingBinding Age Min. Width7. 5 WidthSize. To. Cells Can. User. ReorderTrue Can. User. SortTrue                lt data Data. Grid. Text. Column HeaderCountry BindingBinding Country Min. Width1. 20 WidthSize. To. Cells Can. User. ReorderTrue Can. User. SortTrue                lt data Data. Grid. Text. Column HeaderGender BindingBinding Gender Min. Width1. 20 WidthSize. To. Cells Can. User. ReorderTrue Can. User. SortTrue                lt data Data. Grid. Text. Column HeaderEmail Id BindingBinding Email. Id Min. Width1. WidthSize. To. Cells Can. User. ReorderTrue Can. User. SortTrue                lt data Data. Grid. Text. Column HeaderJoined On BindingBinding Joined. On Min. Width1. WidthSize. To. Cells Can. User. ReorderTrue Can. User. SortTrue            lt data Data.