/****************/
/** DATASOURCE **/
/****************/
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "./getPropertyMasterData.php",
type: "POST",
data: function() {
return {
method: "getPropertyMasterData",
}
}
},
update: {
url: "./getPropertyMasterData.php",
type: "POST",
data: function () {
console.log("I'm calling update!!");
return {
method: "editPropertyMasterData",
}
},
complete: function (e) {
$('#grid').data('kendoGrid').dataSource.read();
}
},
destroy: {
url: "./getPropertyMasterData.php",
type: "POST",
data: function () {
return {
method: "deletePropertyMasterData",
}
},
complete: function (e) {
$('#grid').data('kendoGrid').dataSource.read();
}
},
},
schema: {
model: {
id: "propertyID",
fields: {
propertyID: { editable: false, nullable: true }
active: { editable: false, nullable: false, defaultValue: 'y'},
propertyName: { editable: true,type: "string",validation: {required: {message: "Required"}} },
propertyLogo: { editable: true, type: "string",validation: {required: {message: "Required"}} },
propertyColor: { defaultValue: "#000", editable: true, validation: { required: {message: "Required"}} },
businessRegistrationNo: { editable: true,type: "string",validation: {required: {message: "Required"}} },
noOfRooms: { defaultValue: 1, editable: true,type: "number",validation: {min: 1, required: {message: "Required"}} }
}
}
},
pageSize: 25
}); // End of Kendo DataSource
/****************/
/** KENDO GRID **/
/****************/
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
editable: { mode: "inline" },
columns: [
{ field: "active", title:" ", filterable: false,
template: "# if (active=='y'){# <span class='k-icon ehors-status-active-icon'></span> #} else {# <span class='k-icon ehors-status-inactive-icon'></span> # }#"},
{ field: "propertyName", title:"Property Name", width: "80" },
{ field: "businessRegistrationNo", title:"Business Reg. No.", width: "80" },
{ field: "propertyLogo", title:"Logo", width: "80", editor: fileUploadEditor
,template: "<div class='propertyLogo'><a></a>#=propertyLogo#</div>" },
{ field: "propertyColor", title:"Color", width: "80px", editor : getColor, template: function(dataItem) {
return "<div style='background-color: " + dataItem.propertyColor + ";'> </div>";
}},
{ field: "noOfRooms", title:"No of Rooms", width: "80px", format: "", template: "<div class='unit'>#= noOfRooms#</div>" },
//Button Name
{ command: [{ name: "edit", text: {
edit: "Edit",
update: "Update",
cancel: "Cancel"} }
], title: "" }
],
save: onSave, // <-- checking duplicate error.
noRecords: {template: "No Records" }
}).data("kendoGrid"); //end of kendo grid
function fileUploadEditor(container, options) {
$('<input type="file" id="fileUpload" name="fileUpload" /> ')
.appendTo(container)
.kendoUpload({
multiple:false,
async: {
saveUrl: "./image.php",
autoUpload: true,
},
validation: {
allowedExtensions: [".jpg", ".png", ".jpeg"]
},
success: onSuccess, // just a console log to view progress
upload: onUpload, // just a console log to view progress
progress: onProgress // just a console log to view progress
});
}