Combining google.visualization.datatable with checkbox and KnockOut data-bind

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 a a 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.

When are you executing the binding in KO? it will have to be after everything is in place. And if Google change any data (pagination etc) you will probably have problems. If that doesn't help, please share the html code generated, plus a sample of the viewModel — brianlmerritt
I've updated my question and added some more background info. Do I understand you correctly and should it be possible what I want? — Paul Meems
It may be possible, but you need to confirm order of execution, e.g.when do you create the html, when do you create the view model, when do you bind it etc. Have a look at this about creating a minimum complete and verifiable example stackoverflow.com/help/mcve — brianlmerritt

WhiteHat WhiteHat · Accepted Answer · 2016-05-04T13:35:09

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

Combining google.visualization.datatable with checkbox and KnockOut data-bind

1 Answers