1

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.

Community
  • 1
  • 1
Paul Meems
  • 3,002
  • 4
  • 35
  • 66
  • 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 May 04 '16 at 13:42
  • 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 May 04 '16 at 15:36
  • 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 http://stackoverflow.com/help/mcve – brianlmerritt May 05 '16 at 04:56

1 Answers1

0

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

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • I'm not using pagination so that is no problem. And setting the initial value of the checkbox and input box is no problem. But I need to save the changes and currently we use observables for that. And also changing the value in the input box changes the value of another cell, which is also an observable. If I can't use KO bindings I don't see how to keep the functionality we currently have. I'm getting a KO error about the binding so I assume KO is executed before the datatable is finalized. – Paul Meems May 04 '16 at 15:24
  • can you wait on the table chart's `'ready'` event before binding? – WhiteHat May 04 '16 at 15:48