Click here to Skip to main content
12,997,914 members (57,900 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 27 Feb 2014

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


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.


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 < ? -1 : 1;
    this.jumpToFirstPage = function () {
    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="">
    <div data-bind='simpleGrid: gridViewModel'> </div>
    <button data-bind='click: addItem'>
        Add item
    <button data-bind='click: sortByName'>
        Sort by name
    <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
        Jump to first page

    <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>

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.


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.


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


About the Author

Dinesh K.S. Kushwaha
Team Leader Kochar Infotech Pvt. Ltd.
India India
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionCode is a direct lift from the knockoutjs site. Pin
Member 1082762611-Sep-14 5:45
memberMember 1082762611-Sep-14 5:45 
GeneralNice simple post Pin
raju dasa11-Mar-14 0:45
memberraju dasa11-Mar-14 0:45 
SuggestionNot an article... Pin
Kornfeld Eliyahu Peter27-Feb-14 9:50
professionalKornfeld Eliyahu Peter27-Feb-14 9:50 
GeneralRe: Not an article... Pin
OriginalGriff27-Feb-14 10:34
protectorOriginalGriff27-Feb-14 10:34 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170622.1 | Last Updated 27 Feb 2014
Article Copyright 2014 by Dinesh K.S. Kushwaha
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid