knockout dynamic grid, add column and rows

Question

I am trying to add rows and columns to a knockout grid on the client side after .NET MVC has displayed the html grid

I could find a way to dynamically add rows but am not able to get the grid to add columns and rows. Does anyone know how to add both rows and columns dynamically with knockout and then have the data in the grid (including the new row and column headers) to be available for saving to the server?

<form action='/controller/save'>
<p>There are <span data-bind='text: series().length'>&nbsp;</span> series set</p>
<table data-bind='visible: series().length > 0'>
    <thead>
        <tr>
            <th>---</th>
            <!-- ko foreach: cols -->
            <th data-bind='text:title'></th>
            <!-- /ko -->
            <th><button> Add New Column</button></th>
        </tr>
    </thead>
    <tbody data-bind='foreach: series'>
        <tr>
            <td data-bind='text:name'></td>
            <!-- ko foreach: cols -->
            <td><input class='required'  /></td>
            <!-- /ko -->
            <td><a href='#' data-bind='click: $root.removeSeries'>Delete</a></td>
        </tr>
    </tbody>
</table>

<button data-bind='click: addNewSeries'>Add New Series</button>
<button data-bind='enable: series().length > 0' type='submit'>Save</button>

and the js

var ItemModel = function (series) {
    var self = this;
    self.series = ko.observableArray(series);        

    self.addNewSeries = function () {
        self.series.push({
            name: "",
            value: ""
        });
    };

    self.removeSeries = function (series) {
        self.series.remove(series);
    };

    self.save = function (form) {
         ko.utils.postJson($("form")[0], self.items);
    };
};

var viewModel = new ItemModel([
    { name: "2012/13", value: "122345" },
    { name: "2013/14", value: "564543" }
]);
ko.applyBindings(viewModel);


var ColumnModel = function (cols) {
    var self = this;
    self.cols = ko.observableArray(cols);

    var Col = function (title) {
        var self = this;
        self.title = ko.observable(title);

        self.addNewCol = function () {
            self.cols.push(new Col('new'));
        };

    };
};
var columnModel = new ColumnModel([
    { title: "col1" },
    { title: "col2" }
]);
ko.applyBindings(columnModel);

I have created a fiddle to show

Answer 1

you made a lot of mistakes there. you need to use the chrome\explorer\firefox tools to debug your stuff. i got it yo work though

     <form action='/controller/save'>
    <p>There are <span data-bind='text: series().length'>&nbsp;</span> series set</p>
    <div  data-bind='visible: series().length > 0'>
    <table>
        <thead>
            <tr data-bind="foreach: cols">

                <th data-bind='text:$data.title'></th>
            </tr>
            <button data-bind="click:addNewCol"> Add New Column</button>
        </thead>
        <tbody data-bind='foreach: series'>
            <tr>
                <td data-bind='text:name'></td>
    <!-- ko foreach :$root.cols -->
                <!-- ko if: $index() != 0 -->
                <td><input class='required'  /></td>
                <!-- /ko -->
                <!--/ko-->
                <td><a href='#' data-bind='click: $root.removeSeries'>Delete</a></td>
            </tr>
        </tbody>
        </table>
    </div>
    <button data-bind='click: addNewSeries'>Add New Series</button>
    <input type="text" data-bind="value: title"/>
    <button data-bind='enable: series().length > 0' type='submit'>Save</button>
</form>

   $(document).ready(function(){
    var ItemModel = function (series) {
        var self = this;
        self.series = ko.observableArray(series);        

        self.addNewSeries = function () {
            self.series.push({
                name: self.title(),
                value: ""
            });
        };
        self.title=ko.observable();
        self.removeSeries = function () {
          //do something with series
            self.series.remove(this);
        };

        self.save = function (form) {
             ko.utils.postJson($("form")[0], self.items);
        };
        self.cols = ko.observableArray([{ title: "col1" },
        { title: "col2" }]);

        function Col (title) {
            this.title = ko.observable(title);
        };
            self.addNewCol = function () {
                self.cols.push(new Col('new'));
            };


        };


    var viewModel = new ItemModel([
        { name: "2012/13", value: "122345" },
        { name: "2013/14", value: "564543" }
    ]);
    ko.applyBindings(viewModel);


   /* var ColumnModel = function (cols) {

    };
    var columnModel = new ColumnModel([
        { title: "col1" },
        { title: "col2" }
    ]);
    ko.applyBindings(columnModel);
*/

    // Activate jQuery Validation
             //                $("form").validate({ submitHandler: viewModel.save });
});

http://jsfiddle.net/dCfYP/23/