Triggering Redraw causes columns to be hidden

Question

I have a plnk that demonstrates my issue: http://plnkr.co/edit/bXINbDBIMb0LbLitHGbl.

There is a list of Tasks, each Task can contain a list of Tasks. Tasks can only be a top level or have a single parent and a Task can not contain itself.

When I use the foreach binding the tasks are "saved" to the correct task and works as expected. (Other than the footable features) (Saved is in quotes because Tasks are not really saved other than being pushed to the observable array.)

According to this answer: https://stackoverflow.com/a/20811414/2033294 I created a custom Footable binding. The binding was working exactly as I wanted until I tried it with nested Tasks.

To see the behavior I want, push 'Add Task', push 'Ok', click on the Task that was just created and add another Task or subtask. Push 'Ok', click on the Task again and see that the subtask is saved as expected.

To see the problem, change

<tbody data-bind="foreach: items, delegatedHandler: 'click'"> 

to

<tbody data-bind="footable: items, delegatedHandler: 'click'"> 

repeat the steps above. You'll see that the subtasks are not "saved" as you'd expect. If you push 'Apply' and then add a subtask, it will appear to work until you push 'Ok' back to the main list and then view the Task again. You'll see that the subtask was not really pushed to the correct array.

Edit: I have narrowed the problem down to where the footable_redraw is triggered. When I disable that, the data appears as expected. The footable doesn't redraw, but at least know I know that the problem is not the underlying data or viewmodel.

Edit: I have tracked the problem down to this code in footable.js: (Line 615)

if (data.hide[breakpointName] === false) $column.show();
                else $column.hide();

So, for some reason the columns are being set to be hidden, I'm just not sure how to set them so they are not hidden.

Edit: I have found that if I do: (in footableBinding.js)

footable.reset();
footable.init();

indtead of:

footable.redraw();

This gives the behavior that I expect, but that doesn't seem like the proper way to resolve the problem.

Answer 1

Same problem for me but just on a simple table.

If I've got no <ht> with an attribute "data-hide" to "tablet" or "phone", my table is hidden.

Just have to put one <ht> with a data-hide and my table is visible.

It's look like a bug.