[SOLVED] append a column as checkbox for wijmogrid

append a column as checkbox for wijmogrid

I have data which i am binding to wijmogrid. However i would like to have an additional column for the wijmogrid as checkboxes for each row. My data will not have any value for this. My data has only 3 columns which is getting bound to the grid.I want to have a 4th column for each row with a checkbox.

I tried using like flex.columns.addnew but there is no property to append the columns

My code:

Angular JS

   function getData() {
    return [
        { Col1: 'QA', Col2: 1, Col3: true },
        { Col1: 'Dev', Col2: 0, Col3: true },
        { Col1: 'UAT', Col2: 2, Col3: false },
        { Col1: 'Prod', Col2: 3, Col3: false }
    ];
        }
    $scope.data = getData();

    // formatter to add checkboxes to boolean columns
     $scope.itemFormatter = function (panel, r, c, cell) {
    //$scope.itemFormatter = function (args) {
    if (panel.cellType == wijmo.grid.CellType.ColumnHeader) {
        var flex = panel.grid;
        var col = flex.columns[c];

        // check that this is a boolean column
        if (col.dataType == wijmo.DataType.Boolean) 
        {

            // prevent sorting on click
            col.allowSorting = false;

            // count true values to initialize checkbox
            var cnt = 0;
            for (var i = 0; i < flex.rows.length; i++) {
                if (flex.getCellData(i, c) == true) cnt++;
            }

            // create and initialize checkbox
            cell.innerHTML = '<input type="checkbox"> ' + cell.innerHTML;

            var cb = cell.firstChild;
            cb.checked = cnt > 0;
            cb.indeterminate = cnt > 0 && cnt < flex.rows.length;

            // apply checkbox value to cells
            cb.addEventListener('click', function (e) {
                flex.beginUpdate();
                for (var i = 0; i < flex.rows.length; i++) {
                    flex.setCellData(i, c, cb.checked);
                }
                flex.endUpdate();
            });

        }
    }
}

HTML

wj-flex-grid items-source="data" item-formatter="itemFormatter">
        <wj-flex-grid-column header="Col1" binding="Col1"></wj-flex-grid-column>
        <wj-flex-grid-column header="Col2" binding="Col2"></wj-flex-grid-column>
        <wj-flex-grid-column header="Col3" binding="Col3"></wj-flex-grid-column>
        <wj-flex-grid-column header="Select" dataType="Boolean"></wj-flex-grid-column>
    </wj-flex-grid>

Solution