Blog

  • Knockout js Datagrid

    Posted by Rajan Rawat | Last Updated: 06-Apr-17

    Knockout js DATAGRID

    First let's talk about our example in the knockout to see knockout grid. This is a simple grid to accept the data that the data is displayed in tabular form. This is the perfect place to have a request for interacting with an external DOM without a grid. But there will be some requirements, such as the grid showing the student list, the requirement is that the brand needs to see each student click on any of the items in each column.

    Therefore, by using a custom template, you can link to the template grid column to click on events that interact with external DOM elements.

     

    Knockout datagrid provides the following configuration options

    1. data- you have show in the table or The collection of entity.

    2. columns - columns are the header text for you table

    3. pageSize - pagesize will be the how many rows will each page contain

     

    Now lets take an example of simple grid using knockout js

     

    HTML CODE

    <div class='Example'> 
        
        <div data-bind='simple: gridViewModel'> </div>
         
        <button data-bind='click: add new Item'>
            Add item
        </button>
         
        <button data-bind='click: sort by name'>
            Sort by name
        </button>
         
        <button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
           go to the first page
        </button>
        
    </div>

    JS CODE

    var initialData = [
        { name: "john conner", sales: 89, price: 190.00 },
        { name: "alan bizare", sales: 152, price: 25.00 },
        { name: "tom hanks", sales: 1, price: 99.95 },
        { name: "brwon Dragon", sales: 0, price: 6350 },
        { name: "lee packor", sales: 39450, price: 0.35 }
    ];
     
    var GridModel = function(items) {
        this.items = ko.observableArray(items);
     
        this.addItem = function() {
            this.items.push({ name: "New item", sales: 0, price: 100 });
        };
     
        this.sortByName = function() {
            this.items.sort(function(a, b) {
                return a.name < b.name ? -1 : 1;
            });
        };
     
        this.jumpToFirstPage = function() {
            this.gridViewModel.currentPageIndex(0);
        };
     
        this.gridViewModel = new ko.simpleGrid.viewModel({
            data: this.items,
            columns: [
                { headerText: "Item Name", rowname: "name" },
                { headerText: "Sales Count", rowname: "sales" },
                { headerText: "Price", rowname: function (item) { return "$" + item.price.toFixed(2) } }
            ],
            pageSize: 4
        });
    };
     
    ko.applyBindings(new GridModel(initialData));

    CSS CODE

    body { font-family: arial; font-size: 14px; }
    .Example { padding: 1em; background-color: #9e9e9e; border: 1px solid #CCC; max-width: 660px; }
    .Example input { font-family: Arial; }
    .Example b { font-weight: bold; }
    .Example p { margin-top: 0.9em; margin-bottom: 0.9em; }
    .Example select[multiple] { width: 100%; height: 8em; }
    .Example h2 { margin-top: 0.6em; }

    .ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
    .ko-grid th { text-align:left; background-color:#607d8b ; color:White; }
    .ko-grid td, th { padding: 0.6em; }
    .ko-grid tr:nth-child(odd) { background-color: #DDD; }
    .ko-grid-pageLinks { margin-bottom: 1em; }
    .ko-grid-pageLinks a { padding: 0.5em; }
    .ko-grid-pageLinks a.selected { background-color: Black; color: White; }
    .Example { height:20em; overflow:auto } 

    li { list-style-type: disc; margin-left: 20px; }

    OUTPUT

     

    Item Name Sales Count Price
    Well-Travelled Kitten 352 $75.95
    Speedy Coyote 89 $190.00
    Furious Lizard 152 $25.00
    Indifferent Monkey 1 $99.95

      

Tags: Knockoutjs