Having trouble adding rows with form inputs

d_gizmo

Please see this JSFiddle: https://jsfiddle.net/LvLLc36y/4/

I'm having two problems.

I'm using KnockoutJS to draw a table in the DOM. There is a column that has text inputs.

I call DataTable() on it to get a DataTable.

Problem #1: The column of text inputs does not have value as it should.

I add a new row to the DOM table using Knockout.

I add the new row to the DataTable with row.add(newRowObject).draw()

Problem #2: The newly added row is not a text input but just the data for that column.

If you comment out the DataTable calls on line 13 and line 25 you'll see how the table ought to look

I'm just starting out using DataTables so I may be missing something obvious. My goal is to have Knockout draw and keep track of changes to my table. I'm using DataTables just for the niceties of sorting, paging, filtering, etc.

Thanks for reading this. I appreciate any help or direction. Let me know if any clarification needed.

bindrid

you need to use a datatable binding handler if you are going to use a view model. Otherwise you will not be able to tie the data to the table.

https://github.com/JohnBergman/knockout.datatables is a binding handler but I have not tried it. Mine is designed to work in a more complicated environment so would not do.

Here is a thread talking about the one linked above.

https://datatables.net//forums/discussion/comment/109990/#Comment_109990

d_gizmo

Ah ok thanks. I knew I was missing something. I will take a look at that link.