Bind checkbox in grid without value

Question

I am using knockout observable array to bind the html table like this

<div>
<button data-bind='click: update'>Get Data</button>
</div>
<div id="divLanguage" style="overflow: hidden;">
<table style="width: 760px;">
    <tr>
        <td style="padding: 0px;width: 100px;font-weight: bold">name</td>
        <td style="padding: 0px;width: 70px;font-weight: bold">select</td>
    </tr>
</table>
<div id="language" style="overflow: auto;height: 540px;">
    <table id="Table1" class="gridHover" style="width: 760px;">
        <tbody data-bind="foreach: queryResult">
            <tr>
                <td style="padding: 0px;text-align: left;width: 100px" data-bind="text: name"></td>
                <td style="padding: 0px;text-align: left;width: 70px">
                    <input type="checkbox" />
                </td>

            </tr>
        </tbody>
    </table>
</div>

The view model is

var initialData = [{
id: 1,
name: "Well-Travelled Kitten",
sales: 352,
price: 75.95,
whatever: 10
  }, {
id: 2,
name: "Speedy Coyote",
sales: 89,
price: 190.00,
whatever: 100
 }, ];

 function viewModel() {
var self = this;
self.queryResult = ko.observableArray();
this.update = function (data) {
    //this is an ajax call and return dateset back
    $.each(initialData, function (index, item) {
        self.queryResult.push(item);
    });

};

}

 ko.applyBindings(new viewModel());

You can see that checkbox is not binded to any field. I know that we can use checked binding to bind data to checkbox. Problem is that i cant bind checkbox to any column because i will getting information on fly. In observable array i have property called id and i will get information if that id has value true or false. Depending upon that i want to bind the checkbox.

I really dont know how to proceed with this. Does anyone have idea about binding checkbox without any column. Also once we bind, how can we get value from checkbox when we check or uncheck it?

Here is the Fiddle

So you only want to bind a checkbox, and be able to read it, if id is true or false? — Th4t Guy
jsfiddle.net/FB6LA/69 you can check or uncheck based on any expression that returns true or false, it does not have to be a column. You can also use computed.observable if you need to write back aswell. — user1415567

Nathan Fisher Nathan Fisher · Accepted Answer · 2014-08-19T03:59:57

I would start by creating a client side model and map the incomming data to it. This way you can have properties that are only relevant to the client side.

Javascript

var MyModel = function (data) {
    var self = this;
    self.id = ko.observable(data.id || '');
    self.name = ko.observable(data.name || '');
    self.price = ko.observable(data.price || 0.0);
    self.sales = ko.observable(data.sales || 0);
    self.whatever = ko.observable(data.whatever || '');
    self.selected = ko.observable(false);
    return self;
};

function viewModel() {
    var self = this;
    self.queryResult = ko.observableArray();
    self.update = function (data) {
        //this is an ajax call and return dateset back
        $.each(initialData, function (index, item) {
            self.queryResult.push(new MyModel(item));
        });
    };

    self.selectedItems = ko.computed({
        read: function () {
            return ko.utils.arrayFilter(self.queryResult(), function (item) {
                return item.selected() === true;
            });
        },
        deferEvaluation: false
    });
}

HTML

<div>
    <button data-bind='click: update'>Get Data</button>
</div>
<div id="divLanguage" style="overflow: hidden;">
    <table style="width: 760px;">
        <tr>
            <td style="padding: 0px;width: 100px;font-weight: bold">name</td>
            <td style="padding: 0px;width: 70px;font-weight: bold">select</td>
        </tr>
    </table>
    <div id="language" style="overflow: auto;height: 540px;">
        <table id="Table1" class="gridHover" style="width: 760px;">
            <tbody data-bind="foreach: queryResult">
                <tr>
                    <td style="padding: 0px;text-align: left;width: 100px" data-bind="text: name"></td>
                    <td style="padding: 0px;text-align: left;width: 70px">
                        <input type="checkbox" data-bind="checked: selected" />
                    </td>
                </tr>
            </tbody>
        </table>
        <fieldset>
            <legend>Selected Items</legend>
            <ul data-bind="foreach: selectedItems">
                <li data-bind="text: name"></li>
            </ul>
        </fieldset>
    </div>
</div>

so you end up with something like this JSFiddle Demo

Bind checkbox in grid without value

1 Answers