CODEWITHSUNDEEP
kendo-uikendo-gridkendo-mvvm
Matt
Matt

Reputation: 27001

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?

Upvotes: 5

Views: 3421

Answers (2)

Lars Höppner
Lars Höppner

Reputation: 18402

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

Upvotes: 8

Atanas Korchev
Atanas Korchev

Reputation: 30671

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.

Upvotes: 4

Related Questions