CODEWITHSUNDEEP
htmlknockout.js
Stephen York
Stephen York

Reputation: 1429

Editable Tables with KnockoutJS with Footable

A decision has been made with the department I work out to use Footable to provide Responsive grid layouts within an existing web framework. One added idea was to make the grids editable and I've managed to get this going using KnockoutJS. I'm finding an interesting affect though when trying to bind input fields in the hidden row of fields.

If I show a readonly view of my rowdata using elements then the knockout binding works fine and all rows show the data when I press the + symbol expanding the row, although if I replace the label with an then the text boxes are empty. Also the dirty flag doesn't respond to changes.

Any of the fields which are set to display in the main row show the value fine and triggers the dirty flag on edit although if I narrow the browser window they go blank.

Given plain label elements bind without an issue in this second row of the footable can anyone suggest why the binding fails when it's an input? I can't work out if it's a Knockout or Footable thing.

Thanks,

Steve

Upvotes: 1

Views: 956

Answers (1)

Habeeb Hassan Syed
Habeeb Hassan Syed

Reputation: 54

[Footable now supports it starting from 2.0.3]

Footable as such does not support form input elements properly. In our project we had multiple pages which required editing and I have made changes to the footable code to enable editing. You can try with the following it also includes the documentation:

https://github.com/bradvin/FooTable/pull/285

The idea is to create a data variable for every td with unique id and bind it to the row and its details and detach the contents from row to detail and vice versa based on the visibility.

Row

<tr class="footable-detail-show" style="display: table-row;">
    ....
    <td style="display: none;" data-bind-name="bind-1413864326707-4"></td>
    ....
</tr>

Details

<tr class="footable-row-detail">
    ....
        <div class="footable-row-detail-value" data-bind-value="bind-1413864326707-4">
            <input id="abc" type="text" value="200">
        </div>
    .....
</tr>

For it to work it expects footable is initialized after the table contains all the data (Not required when data-editable="true") and any changes made are strictly on the input elements based on say id or the elements selector and not based on the td selector. Say for example changes to #abc are preserved but if you make changes to <td style="display: none;" data-bind-name="bind-1413864326707-4"> they are lost.

Check the demo at http://jsfiddle.net/habeebhassan/f8L8jt6p/

Upvotes: 1

Related Questions