Click here to Skip to main content
11,491,742 members (59,132 online)
Click here to Skip to main content

Knockout Simple Paged Grid Demonstation

, 27 Feb 2014 CPOL 7.9K 2 4
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

 
QuestionCode is a direct lift from the knockoutjs site. Pin
Member 1082762611-Sep-14 6:45
memberMember 1082762611-Sep-14 6:45 
GeneralNice simple post Pin
raju dasa11-Mar-14 1:45
memberraju dasa11-Mar-14 1:45 
SuggestionNot an article... Pin
Kornfeld Eliyahu Peter27-Feb-14 10:50
professionalKornfeld Eliyahu Peter27-Feb-14 10:50 
GeneralRe: Not an article... Pin
OriginalGriff27-Feb-14 11:34
protectorOriginalGriff27-Feb-14 11: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 | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 27 Feb 2014
Article Copyright 2014 by Dinesh K.S. Kushwaha
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid