[JS]: Kendo UI: Grid, Upload

Kendo UI

1. Grid, Upload
   a) document.html:

<script type="text/javascript" src="/scripts/xxx/GLOBAL.js"></script>
    <div>Document List Demo</div>
    <br>
    <div id="doclistdiv" class="frame">
      <div id="docgrid">
      </div>
      <br>
      <div>
      <div style="float:right;width:25%">
        <input type="file" id="Upload_Btn" name="multipartFile">
      </div>
      </div>
      <input type="hidden" name="Delete_Doc_Data_Id" id="Delete_Doc_Data_Id">
    </div>

**b) document.js**

$(document).ready(function(){
        GLOBAL.Path = "<%=request.getContextPath%>" // pageContext.request.contextPath

        var documentFun = function() {
          this.init = function(){
             this.initGrid();
             this.initFileUploadControl();
             this.initEvent();
          };

          this.initEvent = function(){
              $("document").on("click","name='downloadButton'",function(){
                  var Doc_Data_ID  $(this).attr('Doc_Data_ID');
                  window.location = GLOBAL.PATH + "/Document/downloadDocument?docDataId=" + Doc_Data_ID;
              });

              $("document").on("click","name='deleteButton'",function(){
                var Doc_Data_ID = $(this).attr('Doc_Data_ID');
                $("#Delete_Doc_Data_Id").val(Doc_Data_ID);
                $.ajax(
                    // TODO xxx
                ).done(function(data){
                    // TODO
                    var docGrid = $("#docGrid").data('kendoGrid');
                    var docDataSource = docGrid.dataSource.data();
                    for(var index = docDataSource.length - 1; index >= 0; index--){
                      if(docDataSource[index].Doc_Data_ID == Doc_Data_ID || docDataSource[index].Doc_Data_ID === ""){
                          docDataSource.splice(index,1);
                      }
                    }
                    if(docDataSource.length === 0){
                      docDataSource = [{
                          'Doc_Data_ID':"",
                          'Doc_File_Name':"",
                          'Doc_User_ID':"",
                          'Doc_File_Type':""
                      }];
                    }
                    docGrid.dataSource.data(docDataSource);
                }).fail(function(){
                    // TODO
                });
              });
          };

          this.initGrid = function(){
            var columns = [{
              title : "Document Name", 
              template : function(row){
                  if(row.Doc_Data_ID === '' || row.Doc_Data_ID === null){
                      return "<div id='nodocrecords'>No records.</div>";
                  }
                  return "<a href='javascript:void(0);' name='downloadButton' Doc_Data_ID='" + kendo.htmlEncode(row.Doc_Data_ID) + "'>";
              },
              width : "70%"}, {
              title : "Upload / Delete Attachment",
              template : function(row){
                var currentUser = $("#Created_By").val, actionTemplate = "";
                if(currentUser == kendo.htmlEncode(row.Doc_Data_ID) && kendo.htmlEncode(row.Doc_File_Type != 1)){
                    actionTemplate += "<a style='color:#ff0000;' href='javascript:void(0);' id='del" + kendo.htmlEncode(row.Doc_Data_ID) + "' name='deleteButton' Doc_Data_ID='" + kendo.htmlEncode(row.Doc_Data_ID) + "'>Deleted</a>";
                }
                return actionTemplate;
              },
              width : "30%"
            }];

            var docJson = JSON.parse($("#docJson").val());
            $("#docGrid").kendoGrid({
               dataSource : docJson,
               scrollable : false,
               excel : {
                   allPages : true
               },
               pageable : {
                   refresh : true,
                   pageSizes : true,
                   pageSize : 10,
                   buttonCount : 3
               },
               columns : columns
            });

            if(docJson === "" || docJson === null || typeof(docJson) === "undefined"){
             $("#docGrid").data('kendoGrid').dataSource.add({
                 'Doc_Data_ID':"",
                 'Doc_File_Name':"",
                 'Doc_User_ID':"",
                 'Doc_File_Type':""
             });
            }           
          };

          this.initFileUploadControl = function(){
            var onComplete = functin(e){
                // TODO console.log("Upload completed.");
            };

            var onError = function(e){
                // TODO console.log(e);     
            };

            var onUpload = function(e){
                e.data = {
                    "fileName" : e.files[0].name,
                    // TODO other fields 
                };
            }

            var onSuccess = function(e){
                var rspData, docDataId, docType, docGrid = $("#docGrid").data('kendoGrid');
                if(e.operation == 'upload'){
                  rspData = e.response;

                  docDataId = rspData.Doc_Data_ID;
                  docType = rspData.Doc_File_Type;
                  docGrid.dataSource.add({
                      'Doc_Data_ID':docDataId,
                      'Doc_File_Name':e.files[0].name,
                      'Doc_User_ID':$("#Created_By").val(),
                      'Doc_File_Type':docType
                  });
                }
            }

            $("#Upload_Btn").kendoUpload({
                async : {
                    saveUrl : GLOBAL.Path + "/Document/uploadDocument",
                    autoUpload : true
                },
                localization : {
                    select : "Upload",
                    headerStatusUploading : ""
                },
                showFileList : false,
                complete : onComplete,
                error : onError,
                success : onSuccess,
                upload : onUpload
            });
          };  
        };

        try{
          GLOBAL.register("documentFun");
          GLOBAL.documentFun = new documentFun();
          GLOBAL.documentFun.init();
        }catch(exception e){
          // TODO 
        }
    });

c) **GLOBAL.js**

var GLOBAL = {};
     GLOBAL.register = function(str) {
         var arr = str.split("."), o = GLOBAL;
         for(i=(arr[0] == "GLOBAL") ? 1 : 0; i < arr.length; i++) {
             o[arr[i]] = o[arr[i]] || {};
             o = o[arr[i]];
         }
     }