How to make fancytree table render jQuery-mobile control

Question

In fancytree table, a checkbox rendered with data-role as 'flipswitch' is displayed only as a normal checkbox. Same control when used outside the fancytree table displays as desired.

As this is my first post, I am unable to insert a pictures that would have explained the issue in a clear manner. Please refer to the link here. Outside fancytree (on top), the flip switch is displayed correctly and inside fancytree, against item DO|On/Off it is displayed as a normal checkbox. A slider has also been added and note differences in how the control is rendered outside and inside fancytree table.

Javascript code used to render the fancytree column is also given below.

renderColumns: function(event, data) {
  var node = data.node;
  $tdList = $(node.tr).find(">td");
  $tdList.eq(1).html(
       "<input type='checkbox' data-role='flipswitch' name='switch' id='switch'>" );
}

What should I do to make fancy tree display the switch correctly? Your help is appreciated.

I tried to answer your question below, but as a side note: you seem to assign identical `id='switch'` for every row, which is not allowed in html. — mar10, Sep 28 '15 at 20:47
Thanks. I will change the id such that it represents data for the current row in fancy tree and probably use the key element of the node — Ravindran Ramamurthy, Sep 30 '15 at 04:43

score 1 · Accepted Answer · edited May 23 '17 at 12:06

(I haven't used jQuery Mobile so far, so I am just guessing here, mostly based on jQuery Mobile: Markup Enhancement of dynamically added content.)

The Flipswitch widget and other plugins are created around existing html markup. This is termed enhancement and automatically done by the jQuery Mobile library on page load.

Since the Fancytree nodes (and thus your <input> markup) are created dynamically after that, you need to trigger that enhancement explicitly.
Some methods are explained here, and enhanceWithin() might be another option.

A good place to do this, could be the Fancytree renderColumns event.

Note: the following code is not tested; please let me know if it works for you.

renderColumns: function(event, data) {
    var node = data.node;
    $tdList = $(node.tr).find(">td");
    $tdList.eq(1)
        .html("<input type='checkbox' data-role='flipswitch' name='switch'>")
        .enhanceWithin();
},

Wow. Perfect answer. Worked like a charm. Thanks a lot. – Ravindran Ramamurthy Sep 30 '15 at 04:08 — Ravindran Ramamurthy, Sep 30 '15 at 04:08

How to make fancytree table render jQuery-mobile control

1 Answers1