C# html table sort

Question

I have a website developed using ASP.Net and C# that takes input from Active Directory and prints the data in an HTML table in the site. The code looks like this:

void SetupResults(SearchDataItems items)
    {

       HtmlTable t = new HtmlTable();
        HtmlTableRow r = new HtmlTableRow();
        HtmlTableCell c = new HtmlTableCell();




        c.VAlign = "center";
        c.Align = "middle";
        c.Width = "200px";
        c.InnerHtml = "User";
        r.Cells.Add(c);

        c = new HtmlTableCell();
        c.VAlign = "center";
        c.Align = "middle";
        c.Width = "180px";
        c.InnerHtml = "UserId";
        r.Cells.Add(c);

        c = new HtmlTableCell();
        c.VAlign = "center";
        c.Align = "middle";
        c.Width = "800px";
        c.InnerHtml = "Location";
        r.Cells.Add(c);

        c = new HtmlTableCell();
        c.VAlign = "center";
        c.Align = "middle";
        c.Width = "280px";
        c.InnerHtml = "Date Created";
        r.Cells.Add(c);

        c = new HtmlTableCell();
        r.Cells.Add(c);

        r.Style.Add("background-color", "SteelBlue");
        r.Style.Add("color", "white");
        r.Style.Add("font-size", "medium");

        tblItems.Rows.Add(r);





        for (int i = 0; i < items.ListItem.Count; i++)
        {

            r = new HtmlTableRow();

            if (i % 2 == 1)
                r.BgColor = "#A9D0F5";

            c = new HtmlTableCell();

            LinkButton lnk = null;

            c.VAlign = "Top";
            c.Align = "Left";
            c.Width = "200px";
            c.InnerHtml = items.ListItem[i].Name;
            r.Cells.Add(c);

            c = new HtmlTableCell();
            c.VAlign = "Top";
            c.Align = "Left";
            c.Width = "180px";
            c.InnerHtml = items.ListItem[i].UserID;
            r.Cells.Add(c);

            c = new HtmlTableCell();
            c.VAlign = "Top";
            c.Align = "Left";
            c.Width = "800px";
            c.InnerHtml = StripOUGarbage(items.ListItem[i].OU);
            r.Cells.Add(c);

            c = new HtmlTableCell();
            c.VAlign = "Top";
            c.Align = "Left";
            c.Width = "280px";
            c.InnerHtml = items.ListItem[i].AccountCreateDate.ToString();
            r.Cells.Add(c);

            c = new HtmlTableCell();
            c.VAlign = "Top";
            c.Align = "Left";
            lnk = new LinkButton();
            lnk.Text = "Edit";
            lnk.ToolTip = "Edit " + items.ListItem[i].Name;
            lnk.ID = i.ToString() + "_" + items.ListItem[i].Name;
            lnk.Click += lnk_Click;
            lnk.OnClientClick = "ShowProgress();";
            c.Controls.Add(lnk);
            r.Cells.Add(c);


            tblItems.Rows.Add(r);
        }

        //if (items.ListItem.Count > 0)
        //{
        //    divTable.Controls.Add(t);
        //}

    }

It runs and returns the info fine, but the sorting is off. It mostly returns by User create date (although there appear to be some inconsistencies there too). I would prefer to have it return alphabetically by user name, is there a way to auto sort these columns, or be able to have a user sort them by clicking the column headers would be nice too.

Any input would be appreciated. Thanks

Answer 1

To sort by name at the server level (effectively your default sort), just add this line before your for loop building the table.

var sortedItems = items.ListItem.OrderBy(m => m.Name).ToList();

Then you update all your values to use sortedItems (including the condition of your for loop). For example:

c.InnerHtml = sortedItems[i].Name;

As for sorting your table at the client level, I'd recommend opening a new question on that once you've checked out a few options and start going down a specific path. With Angular, JQuery plugins and more, there are too many other options to even mention.

UPDATE TO SHOW SAMPLE CODE

You would do the updates within your loop. Here's your code with the changes.

        var sortedItems = sortedItems.OrderBy(m => m.Name).ToList();
        for (int i = 0; i < sortedItems.Count; i++)
        {

            r = new HtmlTableRow();

            if (i % 2 == 1)
                r.BgColor = "#A9D0F5";

            c = new HtmlTableCell();

            LinkButton lnk = null;

            c.VAlign = "Top";
            c.Align = "Left";
            c.Width = "200px";
            c.InnerHtml = sortedItems[i].Name;
            r.Cells.Add(c);

            c = new HtmlTableCell();
            c.VAlign = "Top";
            c.Align = "Left";
            c.Width = "180px";
            c.InnerHtml = sortedItems[i].UserID;
            r.Cells.Add(c);

            c = new HtmlTableCell();
            c.VAlign = "Top";
            c.Align = "Left";
            c.Width = "800px";
            c.InnerHtml = StripOUGarbage(sortedItems[i].OU);
            r.Cells.Add(c);

            c = new HtmlTableCell();
            c.VAlign = "Top";
            c.Align = "Left";
            c.Width = "280px";
            c.InnerHtml = sortedItems[i].AccountCreateDate.ToString();
            r.Cells.Add(c);

            c = new HtmlTableCell();
            c.VAlign = "Top";
            c.Align = "Left";
            lnk = new LinkButton();
            lnk.Text = "Edit";
            lnk.ToolTip = "Edit " + sortedItems[i].Name;
            lnk.ID = i.ToString() + "_" + sortedItems[i].Name;
            lnk.Click += lnk_Click;
            lnk.OnClientClick = "ShowProgress();";
            c.Controls.Add(lnk);
            r.Cells.Add(c);


            tblItems.Rows.Add(r);
        }