It is
the highlt performanced knockout datagrid.The main benefits we get out of
KoGrid is the ability to define custom row and cell templates.
It's
working in all main stream browsers.Here i am going to show a basic example of
KoGrid. Through NuGet , we can install Knockout and KoGrid in our application.
After I
created a javascript file for 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 , Knockout and MyGrid
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/MyGrid.js",
"~/Scripts/jquery-ui-{version}.js"));
After that added KoGrid css into Style Bundle.
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css","~/Content/KoGrid.css"));
GridDisplay.cshtml
<div id="disp" >
<div id="grid" style="height: 200px;" data-bind="koGrid: { data: items,afterSelectionChange: function
() { return true; },
columnDefs: [{ field:
'firstName', displayName: 'First Name',width:'300'},
{ field:
'lastName', displayName: 'Last Name',width:'300' },
{ field:
'phno',displayName: 'PhNo' ,width:'300'},
{ field: 'mail',displayName:
'MailID',width:'401'}],
autogenerateColumns: false,
isMultiSelect: true,
showFilter: true,
showColumnMenu:
false
}">
</div>
</div>
KoGrid
is very configurable. Here We will get More configuration Information.
Here I used
a sample array. We can use json array for data in KoGrid.KoGrid have inbuilt functionality
like sorting ,paging and search.