Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo grid with MVVM, binding column visibility

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?

like image 285
Matt Avatar asked Mar 18 '14 06:03

Matt


2 Answers

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);
    }
});
like image 65
Lars Höppner Avatar answered Oct 19 '22 12:10

Lars Höppner


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.

like image 22
Atanas Korchev Avatar answered Oct 19 '22 13:10

Atanas Korchev