Monday 9 September 2013

KnockOut KoGrid in Asp.net MVC4



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.



No comments:

Post a Comment