How to not display "undefined" in bound templates before any selection is made

Webix JS
#1

If I bind a template to a datatable and use some values, they’ll show up as “undefined” before the user makes a selection in the master. How can we not render the template at all before a selection is made?

http://webix.com/snippet/e2febf94

I tried onBindRequest, but there’s no showOverlay() for template:

on: {
    onBindRequest: function () {
        if (Object.keys(this.data).length === 0 || this.count && !this.count())
            // this.showOverlay("Sorry, there is no data"); - no showOverlay method
            // this.hide(); - doesn't work because onBindRequest never fires again if we hide the view
    }
}

At http://webix.com/snippet/25908e70 I tried this.setHTML, which works, but how do we tell the component to repaint itself after that whenre there is data?

#2

There are two techniques

a) you can define defaultData that will be used by template when item is not selected

http://webix.com/snippet/87c0dba6

b) you can use conditional template

http://webix.com/snippet/43a01bc9

c) you can hide and show the template on selection

http://webix.com/snippet/6ee969fa

#3

Thank you very much, methods b) and c) work best.

#4

Actually, method c), hide/show onAfterSelect, doesn’t work. The id from that snippet is always defined, so the code could be just onAfterSelect: function () { $$('slave').show() }.

But there’s no way to catch the unselect event: onAfterUnselect never fires. In that snippet, try filtering for anything, not just a string that would exclude the selected row.

So two bugs:

  1. onAfterUnselect apparently never fires. Its documentation should say in what situations it fires.
  2. Filtering a datatable loses the selection, even if the selected item(s) match(es) the filter.

There’s a workaround with onAfterFilter, but I believe the bugs above should be corrected.