Adding rows to a DataGrid in a web form

C

Clayton Hamilton

I have a DataGrid on a webform bound to a Datasource and can
successfully use <ItemTemplate> to create edit/update/cancel
functionality for user maintenance of data. I use separate logic to
delete a row. Everything works just fine.

BUT

I would like to add a button to (for example) the DataGrid header, which
when pressed will add a new row to the datagrid. This should then allow
the user to enter information into text boxes (in some columns) or
select from a dropdownlist (in other columns).

Once the user clicks "Add" for the newly created row, the data will then
be written back to the backend.

How can I add rows to the DataGrid based upon this button click event?
What parameters are passed to the handling routine? It seems that adding
new rows to a DataGrid is quite difficult. I would have expected an
.AddRow() method to exist but it does not seem to...

Many thanks for any ideas/sample code.

Regards,
Clayton
 
I

Ignacio Machin

Hi Clayton,

How can I add rows to the DataGrid based upon this button click event?
What parameters are passed to the handling routine? It seems that adding
new rows to a DataGrid is quite difficult. I would have expected an
AddRow() method to exist but it does not seem to...

It does not exist cause the DataGrid is only mean as a way to display data,
not to keep it, therefore if you want to add a row you have to add a row to
the datasource.
I will show you a complete example of one of my projects, I'm not binding
again a dataset but again a strong typed collection but you can change that
and have the same functionality but in the code you will find classes that
you don't know.


aspx code:
this is how I declare the grid in the page:
I use TemplateColumns cause I feel more free using them, or maybe is cause I
have always use them :)
GetDataGridSource() is a method that return the datasource , I do it so
cause the source can change depending of other controls in the page.

I declare the columns as you can see the way I want it to look, the first
column contain the ID of the record I'm showing therefore its Visible
property is false

If you see the second column it define two sections ItemTemplate and
EditItemTemplate the latter is only used when that row is the one being
edited. In that row I'm using a DropDownList that is also databounded.

Finally the third column is where the buttons are located, here I have two
Edit/Delete that do that the name imply.
I also have a Add button, but it's located outside the grid and is not
shown in here, if you still have problem post back and I will post that part
too.

<asp:datagrid id=recordgrid runat="server" ShowHeader="false"
autoGenerateColumns="False" DataSource="<%# GetDataGridSource()%>"
OnEditCommand="RecordEditCommand" OnDeleteCommand="RecordDeleteCommand">

<columns>
<asp:templatecolumn Visible="False">
<itemtemplate>
<asp:Label Visible="False" id="recordID" Runat="server"
Text='<%# ((CtpRecord)Container.DataItem).ID.ToString()%>'>
</asp:Label>
</itemtemplate>
</asp:templatecolumn>


<asp:templatecolumn ItemStyle-VerticalAlign="Top"
ItemStyle-Width="140" ItemStyle-HorizontalAlign="left"
ItemStyle-Cssclass="textBold">
<itemtemplate>
<asp:Label CssClass="text" Runat="server" Text='<%#
((CtpLocationDetail)Container.DataItem).RoadNumber%>' ID="Label3">
</asp:Label>
</itemtemplate>
<EditItemTemplate>
<asp:DropDownList OnSelectedIndexChanged="UpdateLocationMinor"
AutoPostBack="True" ID="locationdrp" Runat="server" DataSource="<%#
CtpLocation.Locations%>" DataTextField="LocationUID" DataValueField="ID">
</asp:DropDownList>
</EditItemTemplate>
</asp:templatecolumn>


<asp:templatecolumn ItemStyle-VerticalAlign="Top"
ItemStyle-Width="80" ItemStyle-HorizontalAlign="right"
ItemStyle-Cssclass="textBold">
<itemtemplate>
<asp:imagebutton ToolTip="Edit Action" runat="server"
CommandName="Edit" Visible="<%# CanEditAction(
(CtpAction)Container.DataItem )%>" ImageUrl="images/ico_edit.gif"
ID="Imagebutton5" />
<asp:imagebutton ToolTip="Delete Action" runat="server"
CommandName="Delete" Visible="<%# CanDelAction(
(CtpAction)Container.DataItem )%>" ImageUrl="images/ico_delete.gif"
ID="Imagebutton3" /><br>
</itemtemplate>
</asp:templatecolumn>



Well basically that is the aspx code, now the cs code, I have to define a
Delete and a Edit function. Let's start by the Delete as it;s the easiest:
I use the ID keeped on the hidden column I found that element in the
collection and delete it then rebind the grid and voila the row is deleted.
protected void LocationDeleteCommand(object sender, DataGridCommandEventArgs
e)

{

int locationID = Convert.ToInt32(
((Label)e.Item.FindControl("LocationID")).Text);

CtpLocationDetail l = record.Locations.Find( locationID);

record.Locations.Remove( l); //remove from the datasource

locationgrid.DataBind(); //rebind it


}


The edit is almost as easy:
protected void LocationEditCommand(object sender, DataGridCommandEventArgs
e)

{

locationgrid.EditItemIndex = e.Item.ItemIndex;

locationgrid.DataBind();

}



Finally the Add():
It's as simple as adding a new record to the collection, set the
EditItemIndex to the correct record and rebind it. I usually insert the new
record at the start of the list.
here is the method: ( I'm using an ImageButton for the Add and that's why
the handler signature is different )
protected void AddLocation(object sender, System.Web.UI.ImageClickEventArgs
e)
{

CtpLocationDetail newloc = new CtpLocationDetail();
locationsCloned.Insert( 0, newloc);
this.locationgrid.EditItemIndex = 0;
LocationPanel.DataBind();

}

I did not show you here the "save" operation where you get all the data you
entered and save it back to the datasource, if you need that too just let
me know

Hope this help,
 
J

Jeffrey Tan[MSFT]

Hi Clayton,

You should add a new row to the dataset that bind to the datagrid.
Then when you click the button, you post back the command to the server
side and trigger the
dataset to add new row.
At last, you can bind the dataset to the datagrid again.

Hope this helps,
Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.

--------------------
| From: Clayton Hamilton <[email protected]>
| X-Newsreader: AspNNTP 1.50 (ActionJackson.com)
| Subject: Adding rows to a DataGrid in a web form
| Mime-Version: 1.0
| Content-Type: text/plain; charset="us-ascii"
| Content-Transfer-Encoding: 7bit
| Message-ID: <[email protected]>
| Newsgroups: microsoft.public.dotnet.languages.csharp
| Date: Mon, 29 Sep 2003 07:15:26 -0700
| NNTP-Posting-Host: actionjackson133.dsl.frii.net 216.17.147.133
| Lines: 1
| Path: cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!TK2MSFTNGP11.phx.gbl
| Xref: cpmsftngxa06.phx.gbl microsoft.public.dotnet.languages.csharp:187988
| X-Tomcat-NG: microsoft.public.dotnet.languages.csharp
|
| I have a DataGrid on a webform bound to a Datasource and can
| successfully use <ItemTemplate> to create edit/update/cancel
| functionality for user maintenance of data. I use separate logic to
| delete a row. Everything works just fine.
|
| BUT
|
| I would like to add a button to (for example) the DataGrid header, which
| when pressed will add a new row to the datagrid. This should then allow
| the user to enter information into text boxes (in some columns) or
| select from a dropdownlist (in other columns).
|
| Once the user clicks "Add" for the newly created row, the data will then
| be written back to the backend.
|
| How can I add rows to the DataGrid based upon this button click event?
| What parameters are passed to the handling routine? It seems that adding
| new rows to a DataGrid is quite difficult. I would have expected an
| .AddRow() method to exist but it does not seem to...
|
| Many thanks for any ideas/sample code.
|
| Regards,
| Clayton
|
|
| Don't just participate in USENET...get rewarded for it!
|
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top