将google.visualization.datatable与checkbox和KnockOut数据绑定相结合

Question

I'm in the process of converting my 'normal' HTML tables into Google's DataTable. Mostly because it will give me fixed headers and sorting. Thanks to Creating advanced KnockOut binding handler for google.visualization.datatable I managed to create a KnockOut binding handler for the DataTable. This works great for read-only data.

Now I want to convert a table which has aa checkbox and a input textbox in every row. Creating these form elements isn't the problem but I use KnockOut data-bind on them. How to add these data-binding to my datatable? I tried this:

data.setCell(
    0, 0, "<input type='checkbox' data-bind=checked: ' " + order.inOrder + "'/>"
);

and

data.setCell(
    0, 0, "<input type='checkbox' data-bind=checked: order.inOrder />"
);

But both don't work. Of course I tried using Google to find an answer but so far no luck.

Edit: Some more background info: We have a rather complicated page which gets some data from the server using AJAX and populating the table. We also use RequireJS, although the Google.Visualization part is outside RequireJS, because I'm having trouble getting it integrated ;)

The page is part of a wizard for an order system and the checkbox is the 'don't order' and the input box is to fill in the stock. The table is:

checkbox|Product name|amount|input box for stock|amount minus stock|price

The Next button needs to save the whole table, including the (updated) values for the checkbox and stock.

Answer 1

don't think data binding is going to work with Google charts

even if it would, don't see much benefit, since you need to load the DataTable manually anyway

as such, just supply the value needed while loading the DataTable,
something like...
data.setCell(0, 0, "<input type='checkbox' " + ((order.inOrder === true) ? "checked" : "") + "/>");

other thoughts...

if the table chart uses paging buttons, only the rows for the current page are rendered, so binding would have to somehow occur on each 'page' event

using a checkbox input within the table chart will cause the 'select' event to fire on the table row when it is clicked