JSFiddle - React, Tailwind, and code Playground

by Vanit Sharma

HTML

<script src="https://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
 
<button id="add-bottom">Add Data</button>
<div id="grid"></div>

CSS

/** 
 * Kendo UI v2016.2.504 (http://www.telerik.com/kendo-ui)                                                                                                                                               
 * Copyright 2016 Telerik AD. All rights reserved.                                                                                                                                                      
 *                                                                                                                                                                                                      
 * Kendo UI commercial licenses may be obtained at                                                                                                                                                      
 * http://www.telerik.com/purchase/license-agreement/kendo-ui-complete                                                                                                                                  
 * If you do not own a commercial license, this file shall be governed by the trial license terms.                                                                                                      
                                                                                                                                                                                                       
                                                                                                                                                                                                       
                                                                                                                                                                                                       
                                                                                                                                                                                          ...

JavaScript

var data = [];
        var grid = $('#grid').kendoGrid({
            height: 400,
            dataSource: {
                data: data,
                pageSize: 10,
                schema: {
                    model: {
                        id: "check",
                        ip: "ip"
                    }
                }               
            },
            columns: [
                        { field: "Index" },
                        {
                            field: "Value", template: function (dataItem) {
                                return "Audiance(000)<br> Resps<br> %Col<br> %Row<br> Index";
                            }
                        }
            ],
          //  editable: true,
            scrollable: {
                virtual: true
            }
        }).data('kendoGrid');

        var scroller = $("#grid .k-scrollbar-vertical");
        $('#add-bottom').click(function () {            
            data.push({ Index: data.length, ip: 'Audiance(000)<br> Resps<br> %Col<br> %Row<br> Index' });            
             grid.dataSource.data(data);
             scroller.scrollTop(scroller.prop("scrollHeight"));             
        });