This is intended to be a tutorial of how to use ASP.Net DataGrid for view, edit, insert and delete items from an XML file.
Many people probably would need to keep some small amount of data in XML files rather than in the database. Manipulating this data is very simple and it can be made with a DataGrid, and this is the scope of this article, to show you how.

The result must look like this one:

First of all we need the XML file

< ?xml version="1.0" standalone="yes"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <price>10.90</price>
    <year>1985</year>
    <style>1</style>
  </cd>
  <cd>
    <title>Flick Of The Switch</title>
    <artist>AC DC</artist>
    <country>Australia</country>
    <price>15.90</price>
    <year>1983</year>
    <style>2</style>
  </cd>
  <cd>
    <title>Gold</title>
    <artist>Nirvana</artist>
    <country>USA</country>
    <price>10.90</price>
    <year>1991</year>
    <style>4</style>
  </cd>
  <cd>
    <title>Kings of Metal</title>
    <artist>Manowar</artist>
    <country>USA</country>
    <price>17.90</price>
    <year>1988</year>
    <style>3</style>
  </cd>
  <cd>
    <title>Rocka Rolla</title>
    <artist>Judas Priest</artist>
    <country>England</country>
    <price>16.90</price>
    <year>1974</year>
    <style>3</style>
  </cd>
</catalog>

We saved this file in the application root as source.xml

Then we will create a new webform page named xmlDataGrid.aspx, and add a DataGrid control, a Button and set tht title, exactly like in the above screenshot.
AutoGenerateColumns must set to false and must add the following columns in the DataGrid:
– Title binded to TITLE DataField
– Artist binded to ARTIST DataField
– Country binded to COUNTRY DataField
– Price binded to PRICE DataField
– Year binded to YEAR DataField
– Style binded to STYLE DataField
– Button column for “Edit, Update, Cancel”
– Button column for “Delete”

The code for the aspx page is the following:

<html>
<head>
</head>
<body>
    <form runat="server">
        <p align="center">
            <font face="Tahoma"><strong>DataGrid &amp; XML DataSource Example</strong></font>
           

           

            <asp :Button id="btnAdd" onclick="btnAdd_Click" runat="server" Text="Add new row"></asp>
           

            <asp :DataGrid id="dgCatalog" runat="server" AlternatingItemStyle-BackColor="#EEEEEE" ItemStyle-BackColor="#FFFFCC" HorizontalAlign="Center" Font-Size="10px" Font-Name="Tahoma" CellPadding="3" Font-Names="Tahoma" AutoGenerateColumns="False" OnCancelCommand="dgCatalog_CancelCommand" OnDeleteCommand="dgCatalog_DeleteCommand" OnEditCommand="dgCatalog_EditCommand" OnUpdateCommand="dgCatalog_UpdateCommand" Width="550px">
                <alternatingitemstyle backcolor="#EEEEEE"></alternatingitemstyle>
                <itemstyle backcolor="#FFFFCC"></itemstyle>
                <headerstyle backcolor="Aqua" font-italic="False" font-strikeout="False" font-underline="False" font-overline="False" font-bold="True"></headerstyle>
                <columns>
                    <asp :BoundColumn DataField="TITLE" HeaderText="Title"></asp>
                    <asp :BoundColumn DataField="ARTIST" HeaderText="Artist"></asp>
                    <asp :BoundColumn DataField="COUNTRY" HeaderText="Country"></asp>
                    <asp :BoundColumn DataField="PRICE" HeaderText="Price"></asp>
                    <asp :BoundColumn DataField="YEAR" HeaderText="Year"></asp>
                    <asp :BoundColumn DataField="STYLE" HeaderText="Style"></asp>
                    <asp :EditCommandColumn CancelText="Cancel" UpdateText="Update" EditText="Edit"></asp>
                    <asp :ButtonColumn CommandName="Delete" Text="Delete"></asp>
                </columns>
            </asp>
        </p>
        <p align="center">
            <font face="Tahoma" size="1">©2005 Andrei DANEASA – <a href="http://www.webxpert.ro">http://www.webxpert.ro</a></font>
        </p>
    </form>
</body>
</html>

In order to add some functionality to the DataGrid, first of all we need to load the data to the grid.
In the Page_Load event, we wil fill the dataset with XML data and then bind the DataGrid to this dataset:

//the dataset that will keep the data
System.Data.DataSet myDataSet = new System.Data.DataSet();

void Page_Load(object sender, EventArgs e) {
    FillData();
    if (!Page.IsPostBack) {
        dgCatalog.DataBind();
    }
}

//populate the dataset from XML
void FillData() {
    //read the XML into the DataSet
    myDataSet.ReadXml(Server.MapPath("source.xml"));
    //set the grid’s DataSource to DataSet
    dgCatalog.DataSource = myDataSet;
}

Now the DataGrid will display the data like in the above screenshot. We need to add functionalities for Edit, Delete and Update events.
Before writing these events, we must write the function that will save the dataset back to disk as XML file.

//write XML back to disk
void SaveData() {
    myDataSet.WriteXml(Server.MapPath("source.xml"));
}

The simplest events are Edit and Delete:

//event occurs when Edit link is clicked
void dgCatalog_EditCommand(object sender, DataGridCommandEventArgs e) {
    //turn the selected Item in Edit mode
    dgCatalog.EditItemIndex = e.Item.ItemIndex;
    dgCatalog.DataBind();
}

//event occurs when Delete link is clicked
void dgCatalog_DeleteCommand(object sender, DataGridCommandEventArgs e) {
    //delete from DataSet
    myDataSet.Tables[0].Rows[e.Item.ItemIndex].Delete();
    //Write the changes to disk
    SaveData();
    //rebind the data
    dgCatalog.DataBind();
    dgCatalog.EditItemIndex = -1;
    dgCatalog.DataBind();
}

A little complicated is Cancel event. Because we have a button that adds a new row to the dataset and change the text for Update link to “Insert”, we must assure that on Cancel event the text for the link is set back to “Update”.

//event occurs when Cancel link is clicked
void dgCatalog_CancelCommand(object sender, DataGridCommandEventArgs e) {
    //put the link title back to "Update"
    EditCommandColumn ecc = (EditCommandColumn) dgCatalog.Columns[6];
    ecc.UpdateText = "Update";

    //reset the selection
    dgCatalog.EditItemIndex = -1;
    dgCatalog.DataBind();
}

The “Add new row” button adds non-default functionality to the DataGrid control. A simple DataGrid does not have an event for Add or Insert. We used a trick to do this by adding a blank row to the dataset and then turn that row into edit mode and change the text for Update link to “Insert”.

//event occurs when "Add new row" button is pressed
void btnAdd_Click(object sender, EventArgs e) {
    //add an extra row to the dataSet
    InsertEmpty();
    //the new row is the last one in the dataset
    dgCatalog.EditItemIndex = myDataSet.Tables[0].Rows.Count-1;

    //change the update button title to "Insert"
    EditCommandColumn ecc = (EditCommandColumn) dgCatalog.Columns[6];
    ecc.UpdateText = "Insert";

    //rebind
    dgCatalog.DataBind();
}

//procedure that add an empty row to the DataSet
private void InsertEmpty() {
    //insert a new row at the end of the dataSet
    myDataSet.Tables[0].Rows.InsertAt(myDataSet.Tables[0].NewRow(), myDataSet.Tables[0].Rows.Count);
}

We missed one single event: Update. Here’s the code (it’s a little complicated due to the duble functionality: Update and Insert:

//event occurs when Update or Insert link is clicked
void dgCatalog_UpdateCommand(object sender, DataGridCommandEventArgs e) {
    System.Data.DataRow dr;
    //we must use the catch to identify a wrong index
    try {
        //if this event is called from Update
        dr = myDataSet.Tables[0].Rows[e.Item.ItemIndex];
    }
    catch {
        //if the event is called from Insert
        myDataSet.Tables[0].Rows.InsertAt( myDataSet.Tables[0].NewRow(), myDataSet.Tables[0].Rows.Count);
        dr = myDataSet.Tables[0].Rows[e.Item.ItemIndex];
    }

    //pupulate the dataRow cells with the supplied values
    dr[0] = ((TextBox) (e.Item.Cells[0].Controls[0])).Text;
    dr[1] = ((TextBox) (e.Item.Cells[1].Controls[0])).Text;
    dr[2] = ((TextBox) (e.Item.Cells[2].Controls[0])).Text;
    dr[3] = ((TextBox) (e.Item.Cells[3].Controls[0])).Text;
    dr[4] = ((TextBox) (e.Item.Cells[4].Controls[0])).Text;
    dr[5] = ((TextBox) (e.Item.Cells[5].Controls[0])).Text;
    //save dataset
    SaveData();

    //put the link title back to "Update"
    EditCommandColumn ecc = (EditCommandColumn) dgCatalog.Columns[6];
    ecc.UpdateText = "Update";

    //rebind
    dgCatalog.DataBind();
    dgCatalog.EditItemIndex = -1;
    dgCatalog.DataBind();
}

You can download the sources here
* All this article was written using only Freeware applications: ASP.NET Web Matrix for writing and testing the page, Notepad++ for writing the XML file, Gimp for screenshots.


5 Responses to “ASP.Net DataGrid and XML as dataSource”
  1. PatrickNo Gravatar says:

    Hi,

    i get the following error

    BC30108: ‘TextBox’ is a type and cannot be used as an expression.

    I have VB

    Line 115:
    Line 116: ‘pupulate the dataRow cells with the supplied values
    Line 117: dr(0) = ((TextBox)(e.Item.Cells(0).Controls(0))).Text
    Line 118: dr(1) = ((TextBox)(e.Item.Cells(1).Controls(0))).Text
    Line 119: dr(2) = ((TextBox)(e.Item.Cells(2).Controls(0))).Text

  2. NonametouseNo Gravatar says:
  3. Maria LozanoNo Gravatar says:

    Hi, Thank a lot for this article.
    I need a first column that has cdata.
    Can you help me, please.

  4. AnilNo Gravatar says:

    Thank you!!!!!!!!!!!!!

  5. RossNo Gravatar says:

    Too bad _sorting_ doesn’t work with xml as a datasource…

Leave a Reply