Knockout.Extensions DataBinding Sample 2

by Shrikrishna Gupta

HTML

<link rel="stylesheet" href="https://raw.github.com/DataTables/DataTables/master/media/css/demo_table_jui.css">
<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Javascript/src/cog.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Javascript/src/cog.utils.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Demo/Knockout.Extensions.Demo.Web/Scripts/DataTables-1.8.2/media/js/jquery.dataTables.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/CogShift/Knockout.Extensions/master/Javascript/src/knockout.bindings.dataTables.js"></script>
<!-- Sample 2: Editable Data Table with Row Template -->
<!-- https://bitbucket.org/grid13/knockout.extensions/src/23ea009b7217445d611d96a565caab3e371346b7/Javascript/src/knockout.bindings.dataTables.js?at=master&fileviewer=file-view-default-->
<div Id="sample2" class="sample">
    <h1> Sample 2: Editable Data Table with Row Template</h1>
    <p class="description">
        This demonstration is the same as Sample 1, except for the following:
        <ul>
            <li>A jQuery template is used by the table to print each row.</li>
            <li>You are able to edit the values of each cell which demonstrates how each cell is bound back to an item property in the array data source.</li>
            <li>You can remove a specific row in the table demonstrating the link between the table's rows and the items in the array data source.</li>
        </ul>
    </p>
    <div class="table">
        <a data-bind="click: addItem">Add</a>
        <a data-bind="click: toggleEdit">Toggle Edit</a>
        <br /><br />
        <table data-bind="dataTable: { 
            dataSource: data, 
            rowTemplate: 'sample2RowTemplate', 
            columns:...

CSS

.sample
{
    border:1px solid gray;
    padding:15px;
    margin-top:10px;
    margin-bottom:10px;
}

.sample h1
{
    margin-top: 0px;
    margin-bottom: 20px;
    font-size:1.5em;
}

.sample h2
{
    margin-top: 0px;
    margin-bottom: 5px;
    font-size:1.1em;
}
.sample .table, .sample table
{
    width:600px;
    
}
    
.sample td {
    padding: 2px;
}

.sample p 
{
     margin-top:20px;   
     margin-bottom:20px;
}

.sample a
{
     color:blue;
     text-decoration:underline;
     cursor:pointer;   
}

JavaScript

function Record(Id, Column1, Column2, Column3) {
        this.Id = Id;
        this.Column1 = ko.observable(Column1);
        this.Column2 = ko.observable(Column2);
        this.Column3 = ko.observable(Column3);
        this.IsSelected = ko.observable(false);
    }

    function ViewModel() {

        var cellCounter = 0;
        var idCounter = 0;
        var vm = this;

        this.selectAll = ko.observable(false);

        this.editable = ko.observable(true);

        this.toggleEdit = function () {
            vm.editable(!vm.editable());
        }

        this.data = ko.observableArray([
                    CreateRecord(),
                    CreateRecord(),
                    CreateRecord(),
                    CreateRecord()
                ]);

        this.getData = function (options, callback) {
            $.ajax({
                url: '/Demo/DataTables',
                data: ko.toJSON(options),
                type: "POST",
                contentType: "application/json charset=utf-8",
                dataType: "json",
                success: function (responseData, textStatus, jqXHR) {
                    callback(responseData);
                }
            });
        }

        this.json = ko.dependentObservable(function () {
            return ko.toJSON(this.data);
        }, this);

        this.selectAll.subscribe(function (isSelected) {
            $.each(vm.data(), function (i, item) {
                item.IsSelected(isSelected);
            });
        });

        this.addItem = function () {
            this.data.push(CreateRecord());
        }

        this.removeLastItem = function () {
            this.data.pop();
        }

        this.removeItem = function (item) {
            // Issue: DataTables is copying the dataSource of the data table internally, so an attempt to remove by instance here wont work.
            // Unfortunately we have to match by key here currently...
            //            this.data.remove(item);
      ...