Kendo UI
- 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]];
}
}