Saturday, January 23, 2016

Ready to use KoGrid Knockout Component

Dear All,

Knowledge Sharing:

There is a Ready to use KoGrid Knockout Component With following features (Basic binding, Column Filter, Grouping, Drag columns, Paging, Master/Details)




HTML:

<html> 
    <head lang="en">
        <meta charset="utf-8">
        <title>Getting Started With KoGrid Example</title> 
        <link rel="stylesheet" type="text/css" href="KoGrid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="jquery-1.8.2.js"></script>
        <script type="text/javascript" src="knockout.js"></script>
        <script type="text/javascript" src="koGrid.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <div class="gridStyle" data-bind="koGrid: gridOptions"></div>
    </body>
</html>



CSS:

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
}



JS:

function mainVm(){
    var self = this;
    this.myData = ko.observableArray([{name: "Moroni", age: 50},
                                      {name: "Tiancum", age: 43},
                                      {name: "Jacob", age: 27},
                                      {name: "Nephi", age: 29},
                                      {name: "Enos", age: 34}]);
    this.gridOptions = { data: self.myData };
};

ko.applyBindings(new mainVm());

No comments:

Post a Comment