Converting hierarchical data into an HTML unordered list Programmatically using C#

Question

I've data which looks something like this.

| id  | name                 | depth | itemId |
+-----+----------------------+-------+-------+
|   0 |  ELECTRONICS         |     0 |  NULL |
|   1 | TELEVISIONS          |     1 |  NULL |
| 400 | Tube                 |     2 |  NULL |
| 432 | LCD                  |     3 |  1653 |
| 422 | Plasma               |     3 |  1633 |
| 416 | Portable electronics |     3 |  1595 |
| 401 | MP3 Player           |     3 |  1249 |
| 191 | Flash                |     2 |  NULL |
| 555 | CD Players           |     3 |  2198 |
| 407 | 2 Way Radio          |     3 |  1284 |
| 388 | I've a problem with  |     3 |  1181 |
| 302 | What is your bill pa |     3 |   543 |
| 203 | Where can I find my  |     3 |   299 |
| 201 | I would like to make |     3 |   288 |
| 200 | Do you have any job  |     3 |   284 |
| 192 | About Us             |     3 |  NULL |
| 199 | What can you tell me |     4 |   280 |
| 198 | Do you help pr       |     4 |   276 |
| 197 | would someone help co|     4 |   272 |
| 196 | can you help ch      |     4 |   268 |
| 195 | What awards has Veri |     4 |   264 |
| 194 | What's the latest ne |     4 |   260 |
| 193 | Can you tell me more |     4 |   256 |
| 180 | Site Help            |     2 |  NULL |
| 421 | Where are the        |     3 |  1629 |
| 311 | How can I access My  |     3 |   557 |
| 280 | Why isn't the page a |     3 |   512 |

To convert the above data into unordered list based on depth, I'm using the following code

int lastDepth = -1;
int numUL = 0;

StringBuilder output = new StringBuilder();


foreach (DataRow row in ds.Tables[0].Rows)
{

    int currentDepth = Convert.ToInt32(row["Depth"]);

    if (lastDepth < currentDepth)
    {
        if (currentDepth == 0)
        {
            output.Append("<ul class=\"simpleTree\">");
            output.AppendFormat("<li class=\"root\"><span><a href=\"#\" title=\"root\">root</a></span><ul><li class=\"open\" ><span><a href=\"#\" title={1}>{0}</a></span>", row["name"],row["id"]);
        }
        else
        {
            output.Append("<ul>");
            if(currentDepth==1)
            output.AppendFormat("<li><span>{0}</span>", row["name"]);
            else
                output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>", row["name"], row["id"]);
        }
        numUL++;
    }
    else if (lastDepth > currentDepth)
    {
        output.Append("</li></ul></li>");
        if(currentDepth==1)
        output.AppendFormat("<li><span>{0}</span>", row["name"]);
        else
            output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>", row["name"], row["id"]);
        numUL--;
    }
    else if (lastDepth > -1)
    {
        output.Append("</li>");
        output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>", row["name"],row["id"]);
    }


    lastDepth = currentDepth;
}

for (int i = 1; i <= numUL+1; i++)
{
    output.Append("</li></ul>");
}

myliteral.text=output.ToString();

But the resulting unordered list doesnt seem to be forming properly(using which i am constructing a tree).For example "Site Help" with id '180' is supposed to appear as a direct child of "Televisions" with id '1',is appearing as a direct child of 'Flash' with id '191' using my code.so in addition to considering depth,I've decided to consider itemid as well in order to get the treeview properly.Those rows of the table with itemId not equal to null are not supposed to have a child node(i.e.,they are the leaf nodes in the tree) and all the other nodes can have child nodes.

Please could someone help me in constructing a proper unordered list based on my depth,itemid columns?

Update:

The 'itemid' column refers to the id of an item which is present in another table.This column just helps in identifying if an item has any sub items(i.e., 'name' in my data in this case has any other unordered lists under it).

Answer 1

It looks like the initial code wasn't taking account of the number of levels back up you needed to go from the "Can you tell me more" node to the "Site Help" node.

int lastDepth = -1;
        int numUL = 0;

        StringBuilder output = new StringBuilder();

        foreach (DataRow row in ds.Tables[0].Rows)
        {

            int currentDepth = Convert.ToInt32(row["Depth"]);

            if (lastDepth < currentDepth)
            {
                if (currentDepth == 0)
                {
                    output.Append("<ul class=\"simpleTree\">");
                    output.AppendFormat("<li class=\"root\"><span><a href=\"#\" title=\"root\">root</a></span><ul><li class=\"open\" ><span><a href=\"#\" title={1}>{0}</a></span>", row["name"], row["id"]);
                }
                else
                {
                    output.Append("<ul>");
                    if (currentDepth == 1)
                        output.AppendFormat("<li><span>{0}</span>", row["name"]);
                    else
                        output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>", row["name"], row["id"]);
                }
                numUL++;
            }
            else if (lastDepth > currentDepth)
            {
                //output.Append("</li></ul></li>");
                output.Append("</li>");
                for (int i = lastDepth; i > currentDepth; i--)
                {
                    output.Append("</ul></li>");
                }

                if (currentDepth == 1)
                    output.AppendFormat("<li><span>{0}</span>", row["name"]);
                else
                    output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>", row["name"], row["id"]);
                numUL--;
            }
            else if (lastDepth > -1)
            {
                output.Append("</li>");
                output.AppendFormat("<li><span class=\"text\"><a href=\"#\" title={1}>{0}</a></span>", row["name"], row["id"]);
            }


            lastDepth = currentDepth;
        }

        for (int i = 1; i <= numUL + 1; i++)
        {
            output.Append("</li></ul>");
        }

        myliteral.Text = output.ToString();

Stuart.