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?

Yammer

User==null will be executed in the global context - is a User var accessible there? – Brightman

Yeah, I could make one available. Is there no way to get the expression to evaluate a bind time? – Yammer

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

Stinker

The assumption here is that the column is a field-based column. Do you know how to get this to work if the column is a command column and doesn't have a field name? ( – Kindrakindred

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.

Judgemade