KO Grid Binding

Data-binding options:

data
disabled

Example:

In this example, the ViewModel is defined specifically for use with the grid. It has a data property that is bound in the View. If this value changes, then the widgets automatically respond to them. The widgets also update the ViewModel values as they are modified.

Create a ViewModel:

ViewModel Script	Copy Code
function Person(data) { this.ID = ko.observable(data.ID); this.Company = ko.observable(data.Company); this.Name = ko.observable(data.Name); }; var viewModel = { data: ko.observableArray([ new Person({ ID: "ANATR", Company: "Ana Trujillo Emparedados y helados", Name: "Ana Trujillo" }), new Person({ ID: "ANTON", Company: "Antonio Moreno Taqueria", Name: "Antonio Moreno" }), new Person({ ID: "AROUT", Company: "Around the Horn", Name: "Thomas Hardy" }), new Person({ ID: "BERGS", Company: "Berglunds snabbkop", Name: "Christina Berglund" }) ]) };

ViewModel Script

Copy Code

   function Person(data) {
      this.ID = ko.observable(data.ID);  
      this.Company = ko.observable(data.Company);  
      this.Name = ko.observable(data.Name);
   };  
   var viewModel = {          
      data: ko.observableArray([                  
         new Person({  
            ID: "ANATR",  
            Company: "Ana Trujillo Emparedados y helados",  
            Name: "Ana Trujillo"
            }),                
         new Person({  
            ID: "ANTON",  
            Company: "Antonio Moreno Taqueria",    
            Name: "Antonio Moreno"
            }),                  
         new Person({  
            ID: "AROUT",  
            Company: "Around the Horn",  
            Name: "Thomas Hardy"
            }),                  
         new Person({  
            ID: "BERGS",    
            Company: "Berglunds snabbkop",    
            Name: "Christina Berglund"
            })        
         ])  
    };

Create View with Bound Controls:

View Markup	Copy Code
<table id="dataGrid" data-bind="wijgrid: { data: data, allowEditing: true }">

Concepts

Widgets

Reference