Kendo UI Grid

Local data, mobile scrolling.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://demos.kendoui.com/sushi/kendo.mobile.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
 <input type="text" name="fname" id="fname">
<button type="button" id="save">save</button>
<style>
a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
</style>

<br>
<br>
<br>

<div id="grid"></div>

JavaScript

$(document).ready(function() {
    var grid = $("#grid").kendoGrid({
        dataSource: {
        data: [
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'}],
            schema: {
                model: {
                    fields: {
                        FileName: { type: "string" },
                        LastName: { type: "string" }                    }
                }
            },
            sort: {
                field: "FileName",
                dir: "asc"
            },
            pageSize: 10
        },
        height: 500,
        scrollable: true,
        sortable: true,
        selectable: true,
        filterable: true,
        pageable: true,
        columns: [
            {
                field: "FileName",
                title: "File Name",
                template: "<a onclick=\"window.open('#= FileName#', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')\">#= FileName.substring(FileName.lastIndexOf('/')+1) #</a>"
            },
            {
                field: "LastName",
                title: "Last Name"
            }
        ]
    }).data("kendoGrid");
    
   
   // grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({ useOnDesktop: false });
        
    $("#save").click(function(){
      grid.dataSource.add({"FileName":$("#fname").val(),"LastName":"Last Name"});
      $("#fname").val('');
    });
});