Show and hide jQuery DataTables columns dynamically for dynamically created GridView tables using an OnDataBound event that removes empty columns

Question

I understand there's a lot to this question but I think it's all necessary for what I'm trying to accomplish.

Showing/Hiding columns dynamically using jQuery DataTables is rather simple using the API: See: example However, I see no examples for showing and hiding columns dynamically for dynamically created GridView tables/columns where an OnDataBound event is used to hide unused columns. For example, I can't hard code HTML (used for toggling columns on/off) with a group of column names if I don't know what columns will be displayed (when some columns are hidden because no data exists). So, I'm assuming I'm going to need to dynamically create the HTML with a placeholder? Would this process take place in the OnDataBound event?

My WebForms application has many tables with many columns and even if I knew what columns were going to have values beforehand, it would be painful creating HTML for every single table and column manually.

Here's an example of my OnDataBound event that hides unused columns:

protected void tblAccount_DataBound(object sender, EventArgs e)
    {
        try
        {
            Boolean hasData = false;
            for (int col = 0; col < tblAccount.HeaderRow.Cells.Count; col++)
            {
                if (tblAccount.Columns[col] is HyperLinkField || tblAccount.Columns[col] is TemplateField)
                {
                    continue;
                }

                for (int row = 0; row < tblAccount.Rows.Count; row++)
                {
                    if (!String.IsNullOrEmpty(tblAccount.Rows[row].Cells[col].Text) && !String.IsNullOrEmpty(HttpUtility.HtmlDecode(tblAccount.Rows[row].Cells[col].Text).Trim()))
                    {
                        hasData = true;
                        break;
                    }
                }

                if (!hasData)
                {
                    tblAccount.HeaderRow.Cells[col].Visible = false;
                    for (int hiddenrows = 0; hiddenrows < tblAccount.Rows.Count; hiddenrows++)
                    {
                        tblAccount.Rows[hiddenrows].Cells[col].Visible = false;
                    }
                }

                hasData = false;
            }
        }
        catch (Exception ex)
        {

        }
    }

And the script:

$(document).ready(function () {
    var Table1 = $("[id*=tblAccount]").prepend($("<thead></thead>").append($("[id*=tblAccount]").find("tr:first"))).DataTable({
                    "paging": true,  
                });

                $('a.toggle-vis').on('click', function (e) {
                    e.preventDefault();

                    // Get the column API object
                    var column = Table1.column($(this).attr('data-column'));

                    // Toggle the visibility
                    column.visible(!column.visible());
                });
})

The HTML for toggling the columns would look something like this but again this would need to be generated dynamically:

Toggle column: <a class="toggle-vis" data-column="0">Account Number</a> - <a class="toggle-vis" data-column="1">Account Status</a> - <a class="toggle-vis" data-column="2">Account Name</a> - <a class="toggle-vis" data-column="3">And so on</a> - <a class="toggle-vis" data-column="4">and so on</a>

Answer 1

If you want to toggle visibility with javascript you should probably not do any hiding OnDataBound. Instead, OnDataBound you could be adding a toggle link to the page (via adding it to a repeater, or literal, or whatever) for each column, and then also if the column is empty and needs to be hidden, maybe add a class or property of some kind to it. Then write some javascript that on page load will search for any column with that property and hide it by default.