Click here to Skip to main content
Click here to Skip to main content

Knockout Simple Paged Grid Demonstation

, 27 Feb 2014
Rate this:
Please Sign up or sign in to vote.
Simple Paged Grid by using knockout js
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dinesh K.S. Kushwaha
Team Leader Kochar Infotech Pvt. Ltd.
India India
No Biography provided
Follow on   Google+   LinkedIn

Comments and Discussions

 
GeneralNice simple post Pinmemberraju dasa11-Mar-14 0:45 
SuggestionNot an article... PinprofessionalKornfeld Eliyahu Peter27-Feb-14 9:50 
GeneralRe: Not an article... PinprotectorOriginalGriff27-Feb-14 10:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 27 Feb 2014
Article Copyright 2014 by Dinesh K.S. Kushwaha
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid