Click here to Skip to main content
Click here to Skip to main content
Go to top

How to Setup KnockOut KoGrid in ASP.NET MVC4

, 10 Sep 2013
Rate this:
Please Sign up or sign in to vote.
This tip will give you a better idea of how to setup a KoGrid in Knockout.js.

Introduction

This is a high performance knockout datagrid. The main benefit we get out of KoGrid is the ability to define custom row and cell templates.

Using the Code

It works in all mainstream browsers. Here I am going to show a basic example of the KoGrid. Through NuGet, we can install Knockout and KoGrid in our application.

After I created a JavaScript file for the View Model:

MyGrid.js
function viewModel() {

    var self = this;
    self.items = ko.observableArray([{ firstName: "Eric", lastName: "Sam", 
      mail: "Eric@gmail.com",phno:"1212121" },
    { firstName: "Manuel", lastName: "Dan", 
      mail: "Manuel@gmail.com", phno: "234232" },
    { firstName: "Allen", lastName: "Ken", 
      mail: "Allen@gmail.com", phno: "564523" },
    { firstName: "Joe", lastName: "George", 
      mail: "Joe@gmail.com", phno: "46545435" },
    { firstName: "aki", lastName: "Ken", 
      mail: "aki@gmail.com", phno: "32267565"}]);
}

$(document).ready(function () {
    ko.applyBindings(new viewModel(), document.getElementById('disp'));
});

After that, I create a bundle for KoGrid.js, Knockout.js, and MyGrid.js:

bundles.Add(new ScriptBundle("~/bundles/myBundle").Include(
                     "~/Scripts/jquery-{version}.js",
                     "~/Scripts/json2.js",
                     "~/Scripts/knockout-2.3.0.js",
                     "~/Scripts/koGrid-2.1.1.js",
                     "~/MyJs/KOGrid.js",
                    "~/Scripts/jquery-ui-{version}.js"));

After that, add KoGrid.css into Style Bundle for a good look and feel for the grid.

bundles.Add(new StyleBundle("~/Content/css").Include(
         "~/Content/site.css","~/Content/KoGrid.css"));

Here, I am adding a static array for the grid display. Here is the CSHTML code:

GridDisplay.cshtml
<div id="disp" >
<div id="grid" style="height: 200px; width:600px"  
   data-bind="koGrid: { data: items,afterSelectionChange: function () { return true; },
          columnDefs: [{ field: 'firstName', displayName: 'First Name',width:'150'},
                       { field: 'lastName', displayName: 'Last Name',width:'100' },
                       { field: 'phno',displayName: 'PhNo',width:'100' },
                       { field: 'mail',displayName: 'MailID',width:'205'}],
                       autogenerateColumns: false,  
                       isMultiSelect: true,
                       showFilter: true,
                       showColumnMenu: false
                       }">
</div>
</div>

KoGrid is very configurable. Here, we will get more configuration information.

History

  • 10th September, 2013: Initial post

This tip is based on this blog.

License

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

Share

About the Author

josh-jw

India India
No Biography provided

Comments and Discussions

 
QuestionNeed source code in downloadable format PinmemberTridip Bhattacharjee10-Sep-13 8:23 
AnswerRe: Need source code in downloadable format Pinmemberjosh-jw10-Sep-13 20:10 
GeneralRe: Need source code in downloadable format PinmemberTridip Bhattacharjee10-Sep-13 20:59 

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
Web04 | 2.8.140916.1 | Last Updated 11 Sep 2013
Article Copyright 2013 by josh-jw
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid