Knockout Simple Paged Grid Demonstation

Dinesh K.S. Kushwaha

0/5 (0 vote)

Feb 27, 2014

CPOL

24038

Simple Paged Grid by using knockout js

Download source - 82.4 KB

Sample Image - maximum width is 600 pixels

Introduction

In this tip, I will share how to bind data-source to a page-list viewing within 5-10 minutes.
Suppose you are working on a SPA(Single Page Application) or something more responsive but you have less time to display list with paging, then you can use this article.

Background

Sometimes, we don't have much time to display a well paging grid view so in that case we can use this tip.

Using the Code

First, create a view model with name Viewmodel.js or whatever you want to and copy and paste the below JavaScript code within that file.

 var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
];
var PagedGridModel = 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", rowText: "name" },
            { headerText: "Sales Count", rowText: "sales" },
            { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
        ],
        pageSize: 4
    });
};
ko.applyBindings(new PagedGridModel(initialData));

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div data-bind='simpleGrid: gridViewModel'> </div>
    <button data-bind='click: addItem'>
        Add item
    </button>
    <button data-bind='click: sortByName'>
        Sort by name
    </button>
    <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
        Jump to first page
    </button> 

    <script src="Scripts/knockout-3.0.0.js"></script>
    <script src="Scripts/knockout.simpleGrid.1.3.js"></script>
    <script src="Scripts/PagedGrid/ViewModel.js"></script>
</body>
</html>

Points of Interest

If you want to bind dynamic data from service to this grid, then you have to fetch data from Ajax call and pass that data to viewmodel data source.

History

In the next post, I will explain how to build your own knockout template to display list and more.
I would like to get your suggestions to improve this tip.