Hi Admin,
I have not worked on file upload. Please help me to complete my code.
var arrayData="";
$(function () {
//called when accept changes button is clicked.
function acceptChanges() {
//attempt to save editing cell.
//debugger;
if (grid.saveEditCell() === false) {
return false;
}
var isDirty = grid.isDirty();
if (isDirty) {
//validate the new added rows.
var addList = grid.getChanges().addList;
for (var i = 0; i < addList.length; i++) {
var rowData = addList[i];
var isValid = grid.isValid({ "rowData": rowData }).valid;
if (!isValid) {
return;
}
}
var changes = grid.getChanges({ format: "byVal" });
alert(JSON.stringify(changes))
//post changes to server
$.ajax({
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid.showLoading();
},
url: "/ExpenseManagement/saveExpense", //for ASP.NET, java
data: { list: JSON.stringify(changes) },
processData : false,
contentType : false,
success: function (changes) {
//debugger;
grid.commit({ type: 'add', rows: changes.addList });
grid.commit({ type: 'update', rows: changes.updateList });
grid.commit({ type: 'delete', rows: changes.deleteList });
},
complete: function () {
grid.hideLoading();
}
});
}
}
var obj = {
width: 700,
height: 400,
wrap: false,
hwrap: false,
resizable: true,
rowBorders: false,
numberCell: { show: false },
track: true, //to turn on the track changes.
flexHeight: true,
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'New Product', listeners: [
{ "click": function (evt, ui) {
//append empty row at the end.
var rowData = { UnitPrice: 0, Discontinued: false }; //empty row
var rowIndx = $grid.pqGrid("addRow", { rowData: rowData });
$grid.pqGrid("goToPage", { rowIndx: rowIndx });
$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
]
},
{ type: 'button', icon: 'ui-icon-disk', label: 'Accept Changes', style: 'margin:0px 5px;', listeners: [
{ "click": function (evt, ui) {
acceptChanges();
}
}
]
},
{ type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', listeners: [
{ "click": function (evt, ui) {
$grid.pqGrid("rollback");
}
}
]
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-cart', label: 'Get Changes', style: 'margin:0px 5px;', listeners: [
{ "click": function (evt, ui) {
var changes = $grid.pqGrid("getChanges");
try {
console.log(changes);
}
catch (ex) { }
alert("Please see the log of changes in your browser console.");
}
}
]
}
]
},
scrollModel: {
autoFit: true
},
selectionModel: {
type: ''
},
cellSave : function (evt, ui) {
},
render: function (evt, ui) {
},
hoverMode: 'cell',
editModel: {
saveKey: $.ui.keyCode.ENTER
},
title: "<b>Expense Details</b>",
colModel: [
{ title: "Expense ID", dataType: "integer", dataIndx: "expenseId", editable: false },
{ title: "Date", width: "100", dataIndx: "date",
editor: {
type: 'textbox',
init: dateEditor
},
render: function (ui) {
var cellData = ui.cellData;
if (cellData) {
return $.datepicker.formatDate('yy-mm-dd', new Date(cellData));
}
else {
return "";
}
},
validations: [
{ type: 'regexp', value: '^[0-9]{2}/[0-9]{2}/[0-9]{4}$', msg: 'Not in mm/dd/yyyy format' }
]
},
{ title: "Location From", width: 140, dataType: "string", align: "right", dataIndx: "fromLocation"},
{ title: "Location To", width: 100, dataType: "String", align: "right", dataIndx: "toLocation"},
{ title: "Description", width: 100, dataType: "String", align: "right", dataIndx: "description"},
{ title: "Amount", width: 100, dataType: "float", align: "right", dataIndx: "amount",
validations: [{ type: 'gt', value: 0.5, msg: "should be > 0.5"}],
render: function (ui) {
var cellData = ui.cellData;
if (cellData != null) {
return "₹" + parseFloat(ui.cellData).toFixed(2);
}
else {
return "";
}
}
},
{ title: "Receipt/Document", editable: false, dataIndx: "receipt", minWidth: 200, sortable: false,
render: function (ui) {
if(ui.cellData != -1){
return "<input type='file' name='receipt'/>";
}
else return "";
}
},
{ title: "", editable: false, minWidth: 83, dataIndx: "delButton", sortable: false, render: function (ui) {
if(ui.cellData != -1)
return "<button type='button' class='delete_btn'>Delete</button>";
else return "";
}
}
],
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ProductID",
url: "/pro/products/get", //for ASP.NET
//url: "/pro/products.php", //for PHP
getData: function (response) {
return { data: response.data };
}
},
//save the cell when cell loses focus.
quitEditMode: function (evt, ui) {
if (evt.keyCode != $.ui.keyCode.ESCAPE) {
$grid.pqGrid("saveEditCell");
}
},
refresh: function () {
$("#grid_editing").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors'} })
.unbind("click")
.bind("click", function (evt) {
var $tr = $(this).closest("tr");
var obj = $grid.pqGrid("getRowIndx", { $tr: $tr });
var rowIndx = obj.rowIndx;
$grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
if (ans) {
$grid.pqGrid("deleteRow", { rowIndx: rowIndx, effect: true, complete: function () {
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
}
});
}
else {
$grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
}
});
},
cellBeforeSave: function (evt, ui) {
var isValid = grid.isValid(ui);
if (!isValid.valid) {
evt.preventDefault();
return false;
}
}
};
var $grid = $("#grid_editing").pqGrid(obj);
//get instance of the grid.
var grid = $grid.data("paramqueryPqGrid");
});
In this example, i have added <input type="file">.
when I click on Accept changes, list shows all updated, deleted and new data.
how file will be send to server side?
My spring controller:
@RequestMapping(value="/saveExpense",method=RequestMethod.POST,consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE,
produces = {MediaType.APPLICATION_ATOM_XML_VALUE, MediaType.APPLICATION_JSON_VALUE})
public String saveExpense(@RequestParam String list, @RequestPart("file") MultipartFile file) throws JsonGenerationException, JsonMappingException, IOException{
System.out.println(list);
return "hi";
}
Please can you suggest on my code?
