Kendo grid with MVVM, binding column visibility

Question

I have a kendo grid using MVVM. My problem is I can't seem to set column visibility using the hidden attribute and an expression:

data-columns=
             "[{'template':'# if (User!=null) { # #=User.Name# # } #',
             'title':'User', 'hidden': User==null}

The template works, but the 'hidden' attribute doesn't seem to.

Is there any way to get this to work?

Answer 1

As an alternative, you could bind to the dataBinding or dataBound event to hide the column conditionally:

data-bind="events:{ dataBinding: onDataBinding }"

View model:

var viewModel = kendo.observable({
    User: null,
    showHideUserColumn: function (e) {
        var grid = e.sender;

        if (this.User) {
            grid.showColumn("User");
        } else {
            grid.hideColumn("User");
        }
    },
    onDataBinding: function (e) {
        this.showHideUserColumn(e);

        // if you want to track changes, (re)bind change tracking
        this.unbind("change", this.showHideUserColumn);
        this.bind("change", this.showHideUserColumn);
    }
});