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);
    }
});

Answer 2

Only the properties specified via the data-bind attribute participate in MVVM change tracking. The other data attributes are mapped to widget configuration properties and are not evaluated against the view model.

Currently there is no binding which will allow you to hide and show grid columns.