Dynamically creating checkboxes based on the columns in a table

Question

I am looking to dynamically create check boxes that when checked will show/hide columns in a table. I know that you can hard code in each check box, but is there a way to build them dynamically if there are a large amount of columns? I am just using sample data below. Here is what I have so far:

Check boxes:

<div id="ProfColList">
    <ul style="float:right;text-align:right; list-style-type:none;">
        <li>Label  <input type="checkbox" name="C1" id="C1" value="true" /></li>
        <li>2014  <input type="checkbox" name="C2" id="C2" value="true" /></li>
        <li>2013  <input type="checkbox" name="C3" id="C3" value="true" /></li>
        <li>2012  <input type="checkbox" name="C4" id="C4" value="true" /></li>
        <li>2011  <input type="checkbox" name="C5" id="C5" value="true" /></li>
    </ul>
</div>

Jquery to show/hide columns:

$('#C1').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C1");
        }
        else {
            grid.hideColumn("C1");
        }
    });
    $('#C2').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C2");
        }
        else {
            grid.hideColumn("C2");
        }
    });
    $('#C3').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C3");
        }
        else {
            grid.hideColumn("C3");
        }
    });
    $('#C4').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C4");
        }
        else {
            grid.hideColumn("C4");
        }
    });
    $('#C5').change(function () {
        var grid = $("#ProfGrid").data("kendoGrid");
        if (this.checked) {
            grid.showColumn("C5");
        }
        else {
            grid.hideColumn("C5");
        }
    });

Here is code to build the table. I am using Kendo UI, so if it has something that does this process please let me know:

    var gridColumns = [
        { "field": "C1", "title": "Label", "width": "15%" },
        { "field": "C2", "title": "2014", "width": "15%" },
        { "field": "C3", "title": "2013", "width": "15%" },
        { "field": "C4", "title": "2012", "width": "15%" },
        { "field": "C5", "title": "2011", "width": "15%" }
    ];


    $("#ProfGrid").kendoGrid({
        dataSource: {
            data: GridData.Data,
            pageSize: 20
        },
        height: ProfGridHeight,
        scrollable: { virtual: true },
        groupable: true,
        sortable: true,
        reorderable: true,
        resizable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: gridColumns

    });

Thank you. Basically, if there would happen to be 20 columns in a table, is there a way to generate a checkbox for each column without having to hard code it?

Answer 1

Assuming checkbox name will match column name, you can try:

$("#ProfColList input[type=checkbox]").change(function() {
    var grid = $("#ProfGrid").data("kendoGrid");
    var columnName = this.name;

    if (this.checked) {
        grid.showColumn(columnName);
    }
    else {
        grid.hideColumn(columnName);
    }
});

To generate columns use this after gridColumns array initialization. (note that for checkbox you don't use "value" attribute):

for (var i = 0; i < gridColumns.length; i++) {
    $("#ProfColList ul").append("<li>" + gridColumns[i].title + " <input type='checkbox' name='" + gridColumns[i].field + "' checked /></li>");
}