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>


<br>
<br>
<br>

<div id="grid"></div>
<div class="pai-del-menu">Delete</div>


<script id="delete-confirmation" type="text/x-kendo-template">
    <div class="sports">
<div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
<div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
<div class="kendoContent">Are you sure you want to upload file</div>
</div><div class="clearFloat"></div>

<div class="row kendoPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id ="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button>
<button class="clearBtn" type="button" id ="playerDocumentCancel" (click)="cancel()">Cancel</button>
</div><div class="clearFloat"></div>
</div>
</div>
</script>

CSS

.pai-del-row{
        cursor: pointer;
    }

    .pai-del-menu{
        padding: 4px;
        color: #000;
        border-radius: 5px;
        background-color: #eee;
        width: 80px;
        text-align: center;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
        position: fixed;
        z-index: 999;
        cursor: pointer;
    }
    
    a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

#runningDocumentsPopup .sports {
position: relative;
}
.sports .kPopupConfirmationBox {
display: block;
z-index: 3;
left: calc(50% - 175px);
width: 350px;
position: absolute;
}

.sports {
display: block;
}

JavaScript

$(document).ready(function() {
    $('.pai-del-menu').hide();
    var grid = $("#grid").kendoGrid({
        dataSource: {
        data: [
            { FileName: '1 need to get the value from the text box', ThreeDots: 'ThreeDots1'},
            { FileName: '2 need to get the value from the text box', ThreeDots: 'ThreeDots2'},
            { FileName: '3 need to get the value from the text box', ThreeDots: 'ThreeDots3'},
            { FileName: '4 need to get the value from the text box', ThreeDots: 'ThreeDots4'},
            { FileName: '5 need to get the value from the text box', ThreeDots: 'ThreeDots4'}],
            schema: {
                model: {
                    fields: {
                        FileName: { type: "string" },
                        ThreeDots: { 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: "ThreeDots",
                title: "Last Name",
                template: "<span class='deleteRow'>ThreeDots</span>"
            }
        ]
    }).data("kendoGrid");
    
   
   // grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({ useOnDesktop: false });
        
    $("#save").click(function(){
      grid.dataSource.add({"FileName":$("#fname").val(),"ThreeDots":"Last Name"});
      $("#fname").val('');
    });
 
   
});

 $(document).on("click",".deleteRow",function(e){ 
        var pai_x = e.pageX;
 ...