kogrid not updating column when data changed

Question

i have simple data like this :

var dataFromAjax = [
     {Id : 1, Name : "Yoza", Status : 1},
     {Id : 2, Name : "Dhika", Status : 1}
];

and next data from ajax will have different schema. like this :

var nextData = [
    {Id : 1, Name : 'Yoza', Job : 'Programmer', Phone : '08788'},
    {Id : 1, Name : 'Dhika', Job : 'Designer', Phone : '99987922'}
]

in my piece of code :

self.Data = ko.observableArray();
self.Data(nextData);
self.Data.valueHasMutated();

the problem is column not updated. column still same like first schema, that are id, name and status. Job and Phone not rendered. how to render different schema?

Answer 1

You need to pass an observableArray columnDefs to your koGrid binding for it to change. See their docs here.

Like:

HTML binding:

<div data-bind="koGrid: {data: Data, columnDefs: columns}"></div>

Viewmodel (part only):

self.columns = ko.computed(function(){
    var cols = Object.keys(self.Data()[0]);
    return cols.map(function(col){
        return {
            field: col
        };
    });
});

You can define how you create your columns as long as it returns an array of objects with a field object. (See docs above for more info)

I created a minified fiddle here to provide some example basing on your data. The data will change after 1 second (this is just for testing).