Click here to Skip to main content
15,900,461 members
Articles / Web Development / ASP.NET
Tip/Trick

Knockout Simple Paged Grid Demonstation

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
27 Feb 2014CPOL 23.4K   4   4
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.

C#
 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));
HTML
<!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)


Written By
Team Leader Kochar Infotech Pvt. Ltd.
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionCode is a direct lift from the knockoutjs site. Pin
Member 1082762611-Sep-14 5:45
Member 1082762611-Sep-14 5:45 
GeneralNice simple post Pin
raju dasa11-Mar-14 0:45
raju dasa11-Mar-14 0:45 
Nice post using KO simple sample.
I too did a KO sample grid but with Browser's Indexedb.
http://rajudasa.blogspot.in/2012/11/petstore-web-app-using-knockout-and.html[^]
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
mveOriginalGriff27-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.