Introduction
This article explains how to create a Paged Grid in an ASP.NET Application Using Knockoutjs.
We can create a Grid View Using Knockoutjs in an ASP.NET Application. In this article I will declare the data in the ViewModel to be shown at run time, but I will add a button for the creation of new entries at run time. Also you can sort the data by clicking on the Sort Button, this will sort the data through the name of products.
Let's see the steps involved in making such a grid.
Step 1
First of all we will work on the ViewModel of our application, ViewModel can be understood as being a logical part of an application.
In the ViewModel add this code under the Script Tag.
<script>
var initialProduct = [
{ product: "Tikki Burger", sales: 400, price: 25.50 },
{ product: "Ham Burger", sales: 60, price: 30.00 },
{ product: "Cheese Burger", sales: 85, price: 25.00 },
{ product: "Double Cheese Burger", sales: 48, price: 40.00 },
{ product: "Fries", sales: 90, price: 30.00 },
{ product: "Cold Drink(Small)", sales: 450, price: 25.00 },
{ product: "Cold Drink(Medium)", sales: 420, price: 35.00 }
];
function GridView(items) {
this.items = ko.observableArray(items);
this.addProduct = function () {
this.items.push({ product: "New Product", sales: 0, price: 30.00 });
};
this.sortProduct = function () {
this.items.sort(function (a, b) {
return a.product < b.product ? -1 : 1;
});
};
this.goToStartingPage = function () {
this.gridViewModel.currentPageIndex(0);
};
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Items", rowText: "product" },
{ headerText: "Sales", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
],
pageSize: 4
});
};
ko.applyBindings(new GridView(initialProduct));
</script>
Here first I provided a list of Products that will be shown in the Grid, I had provided the Name, Cost and Sales of these food items.
After that I created a function named as "GridView", then in this function I had declared an Observable Array named "items", I made it Observable so that it can be modified at run time.
After that I created a function named "addProduct" that will allow the user to add a new Product at run time, this function will add a new Product in the Grid and will make entries in the Name, Sale and Price columns.
Then another function is created named "sortProduct," this function will help to sort the Products according to the name of the Products.
One more function is created named "goToStartingPage" this function will help the user to go to the starting page of the Grid.
After that you will see that I had used "ko.simpleGrid.viewModel" to make a Grid using Knockout, then through this "ko.simpleGrid.viewModel" I provided the Header text for each column and also provided the name of the data that is to be shown in the specific column. This "ko.simpleGrid.viewModel" can only be used if you had applied an external Knockout File named "ko.simpleGrid.js", you can either download it from the internet or download my Zip File and use the attached file. Also even if after adding this file your code is not running then you can use the script that you will find in the Script Tag of my application, but for that you need to download the Zip File provided above. I had also also provided the size of the page that will allow only the defined amount of data on each page.
At the end I had applied binding to the function "GridView."
Step 2
Now we will move toward the View part of our application.
Write this code in the View Section of your application.
<form id="form1" runat="server">
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel'> </div>
<button data-bind='click: addProduct'>
Add Product
</button>
<button data-bind='click: sortProduct'>
Sort Product
</button>
<button data-bind='click: goToStartingPage, enable: gridViewModel.currentPageIndex'>
Go to Starting page
</button>
</div>
Here I had bound the "gridViewModel" to a Div in which this Grid will be shown.
Then I took three buttons to which "addProduct", "sortProduct" and "goToStartingPage" are bound. These buttons will help to add a new Product to the Grid, sorting the Product and going to the first page of the Grid.
Now your application is ready to run and you can debug it to see the output.
Output
Now if you debug your application then you will see this in the output window:
![knockout grid1.jpg]()
If you want to add a new Item then you can click on the Add button and check the new product at the second page as it will be added at the end of all the products.
![knockout grid2.jpg]()
For sorting the data you need to click on the "Sort" Button, after clicking you will see that the data is sorted.
![knockout grid3.jpg]()