Knockout js Datagrid

Knockout js DATAGRID

First let's talk about our example in the knockout to see knockout grid. This is a simple grid to accept the data that the data is displayed in tabular form. This is the perfect place to have a request for interacting with an external DOM without a grid. But there will be some requirements, such as the grid showing the student list, the requirement is that the brand needs to see each student click on any of the items in each column.

Therefore, by using a custom template, you can link to the template grid column to click on events that interact with external DOM elements.

Knockout datagrid provides the following configuration options

1. data- you have show in the table or The collection of entity.

2. columns - columns are the header text for you table

3. pageSize - pagesize will be the how many rows will each page contain

Now lets take an example of simple grid using knockout js

HTML CODE

<div class='Example'> 
    
    <div data-bind='simple: gridViewModel'> </div>
     
    <button data-bind='click: add new Item'>
        Add item
    </button>
     
    <button data-bind='click: sort by name'>
        Sort by name
    </button>
     
    <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
       go to the first page
    </button>
    
</div>

JS CODE

var initialData = [
    { name: "john conner", sales: 89, price: 190.00 },
    { name: "alan bizare", sales: 152, price: 25.00 },
    { name: "tom hanks", sales: 1, price: 99.95 },
    { name: "brwon Dragon", sales: 0, price: 6350 },
    { name: "lee packor", sales: 39450, price: 0.35 }
];
 
var GridModel = function(items) {
    this.items = ko.observableArray(items);
 
    this.addItem = function() {
        this.items.push({ name: "New item", sales: 0, price: 100 });
    };
 
    this.sortByName = function() {
        this.items.sort(function(a, b) {
            return a.name < b.name ? -1 : 1;
        });
    };
 
    this.jumpToFirstPage = function() {
        this.gridViewModel.currentPageIndex(0);
    };
 
    this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "Item Name", rowname: "name" },
            { headerText: "Sales Count", rowname: "sales" },
            { headerText: "Price", rowname: function (item) { return "$" + item.price.toFixed(2) } }
        ],
        pageSize: 4
    });
};
 
ko.applyBindings(new GridModel(initialData));

CSS CODE

body { font-family: arial; font-size: 14px; }
.Example { padding: 1em; background-color: #9e9e9e; border: 1px solid #CCC; max-width: 660px; }
.Example input { font-family: Arial; }
.Example b { font-weight: bold; }
.Example p { margin-top: 0.9em; margin-bottom: 0.9em; }
.Example select[multiple] { width: 100%; height: 8em; }
.Example h2 { margin-top: 0.6em; }

.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
.ko-grid th { text-align:left; background-color:#607d8b ; color:White; }
.ko-grid td, th { padding: 0.6em; }
.ko-grid tr:nth-child(odd) { background-color: #DDD; }
.ko-grid-pageLinks { margin-bottom: 1em; }
.ko-grid-pageLinks a { padding: 0.5em; }
.ko-grid-pageLinks a.selected { background-color: Black; color: White; }
.Example { height:20em; overflow:auto } 

li { list-style-type: disc; margin-left: 20px; }

OUTPUT

Add item Sort by name Jump to first page