Show hierarchical xml data using ASP.NET Grid

Question

I have the following XML data. I need to present them on ASP.NET web page in a hierarchical tabular format.

XML:

<Developers>
  <Region name="UK">
    <Region name="England">
      <Region name="London">
        <Data Date="01-01-2019">
          <Value name="DotNet">100</Value>
        </Data>
        <Data Date="01-01-2020">
          <Value name="DotNet">200</Value>
          <Value name="Java">300</Value>
        </Data>
      </Region>
      <Region name="Other">
        <Data Date="01-01-2019">
          <Value name="DotNet">400</Value>
        </Data>
        <Data Date="01-06-2019">
          <Value name="DotNet">500</Value>
        </Data>
      </Region>
    </Region>
    <Region name="Scotland">
      <Data Date="01-01-2019">
        <Value name="DotNet">600</Value>
      </Data>
    </Region>
  </Region>
  <Region name="France">
    <Data Date="01-06-2020">
      <Value name="DotNet">700</Value>
    </Data>
  </Region>
  <Region name="Germany">
    <Data Date="01-06-2019">
      <Value name="Java">800</Value>
    </Data>
  </Region>
</Developers>

Expected Output:

where (-) is tree view's expand/collapse control.

Is it possible to achieve this using ASP.NET Data Grid? Any code example would be really useful.

How do the numbers in the XML sample relate to the numbers in the expected output? There seems to be data for Germany and 2019 for instance in the sample, but the expected output shows the value 0. — Martin Honnen
– Martin Honnen, Commented Aug 23, 2019 at 11:08
@MartinHonnen - I have updated the XML (sorry it had a previous version). The table only contains data for DotNet developers. Germany does not have DotNet developers (in this example of course) so it has 0. Also, the numbers are sum of values for a given year. Example: UK\England\Other's value for 2019 is 900 which is sum of 400 + 500. — developer
– developer, Commented Aug 23, 2019 at 11:15
See the three links in solution 1 : codeproject.com/Questions/746712/… — jdweng
– jdweng, Commented Aug 23, 2019 at 13:26
thanks for the links, however they are mainly for winform application. I have to implement this in ASP.NET web forms. — developer
– developer, Commented Aug 23, 2019 at 13:52
You'll probably need some third party library for a tree view control similar to that image but do you also need help converting that xml into an usable object? — iamdlm
– iamdlm, Commented Aug 27, 2019 at 20:16

Bibin · Accepted Answer · 2019-09-03 05:41:59Z

In the asp.net grid view to display the xml data.

Default asp web page

<html>
  <head>
    <title>Datagrid With XML </title>
    <link rel="stylesheet" href="css/ASPNetCookbook.css">
  </head>
  <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
    <form id="frmDatagrid" method="post" runat="server">
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td align="center">
            <img src="images/ASPNETCookbookHeading_blue.gif">
          </td>
        </tr>
        <tr>
          <td class="dividerLine">
            <img src="images/spacer.gif" height="6" border="0"></td>
        </tr>
      </table>
      <table width="90%" align="center" border="0">
        <tr>
          <td><img src="images/spacer.gif" height="10" border="0"></td>
        </tr>
        <tr>
          <td align="center" class="PageHeading">
             DataGrid Using Data From XML (VB)</td>
        </tr>
        <tr>
          <td><img src="images/spacer.gif" height="10" border="0"></td>
        </tr>
        <tr>
          <td align="center">
            <asp:DataGrid 
                                id="dgRegion" 
                                runat="server" 
                                BorderColor="000080" 
                                BorderWidth="2px"
                                AutoGenerateColumns="False"
                                width="100%">

                                <HeaderStyle 
                                  HorizontalAlign="Center" 
                                  ForeColor="#FFFFFF" 
                                  BackColor="#000080" 
                                  Font-Bold=true
                                  CssClass="TableHeader" /> 

                                <ItemStyle
                                  BackColor="#FFFFE0" 
                                  cssClass="TableCellNormal" />

                                <AlternatingItemStyle 
                                  BackColor="#FFFFFF" 
                                  cssClass="TableCellAlternating" />


                                <Columns>
                                  <asp:BoundColumn HeaderText="Region" DataField="Region" />
                                  <asp:BoundColumn HeaderText="Data " DataField="Data " 
                                                   ItemStyle-HorizontalAlign="Center" />
                                  <asp:BoundColumn HeaderText="Value " DataField="Value "
                                                   ItemStyle-HorizontalAlign="Center" />
                                </Columns>
                              </asp:DataGrid>
          </td>
        </tr>
      </table>
    </form>
</body>
</html>

In the cs code is given below.

using System;
using System.Configuration;
using System.Data;
using System.Data.OleDb;

namespace ASPNetCookbook.CSExamples
{
  public class CH01DataGridWithXMLCS : System.Web.UI.Page
  {

    private void Page_Load(object sender, System.EventArgs e)
    {
      const String Region_TABLE = "Region";

      DataSet dSet = null;
      String xmlFilename = null;

      if (!Page.IsPostBack)
      {
        try
        {
          // get fully qualified path to the "Region" xml document located

                            xmlFilename = Server.MapPath("xml") + "\\Region.xml";


                            dSet = new DataSet( );
                            dSet.ReadXml(xmlFilename);

                            // bind the dataset to the datagrid
                            dgRegion.DataSource = dSet.Tables[Region_TABLE];
                           dgRegion.DataBind( );
        }  

        finally
        {
          // cleanup
          if (dSet != null)
          {
            dSet.Dispose( );
          }
        }  // finally
      }
    }  // Page_Load
  }  
}

Collectives™ on Stack Overflow

Show hierarchical xml data using ASP.NET Grid

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related