Hi,
I need multiple rows edit using single button click and save all entries into database, i have tried to find out regarding custom editing in documentation but i didn't get proper solution regarding this.
So i need to add this functionality on my below script :
function saveChanges() {
if (!$.active && !grid.getEditCell().$cell && grid.isDirty() ) {
var gridChanges = grid.getChanges({ format: 'byVal' });
$.ajax({
url: 'products.php?pq_batch=1',
data: {
list: JSON.stringify( gridChanges )
},
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
grid.option("strLoading", "Saving..");
grid.showLoading();
},
success: function (changes) {
//commit the changes.
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();
grid.option("strLoading", $.paramquery.pqGrid.defaults.strLoading);
}
});
}
}
//save changes from a timer.
interval = setInterval(saveChanges, 1000);
var obj = {
hwrap: false,
resizable: true,
rowBorders: false,
autoRow: false,
rowHt: 32,
trackModel: { on: true }, //to turn on the track changes.
toolbar: {
items: [{
type: 'button',
icon: 'ui-icon-plus',
label: 'New Product',
listener: function () {
//append empty row at the end.
var rowData = { Status: 'Published', Page:''}; //empty row
var rowIndx = grid.addRow({ rowData: rowData });
grid.goToPage({ rowIndx: rowIndx });
grid.editFirstCellInRow({ rowIndx: rowIndx });
}
},
{
type: 'button',
label: "Export to CSV",
icon: 'ui-icon-document',
listener: function () {
this.exportCsv({
url: "export.php",
render: true,
filename: 'my-file'
});
}
},
{ type: 'button', label: 'Copy', listener: function () {
this.copy();
}},
{ type: 'button', label: 'Paste', listener: function () {
this.paste();
}},
{ type: 'separator' },
{
type: 'button',
icon: 'ui-icon-arrowreturn-1-s',
label: 'Undo',
options: { disabled: true },
listener: function () {
grid.history({ method: 'undo' });
}
},
{
type: 'button',
icon: 'ui-icon-arrowrefresh-1-s',
label: 'Redo',
options: { disabled: true },
listener: function () {
grid.history({ method: 'redo' });
}
}]
},
scrollModel: { autoFit: false },
editor: { select: true },
title: "<b>Auto save</b>",
change: function (evt, ui) {
console.log(ui);
},
destroy: function () {
//clear the interval upon destroy.
clearInterval(interval);
},
history: function (evt, ui) {
var $tb = this.toolbar(),
$undo = $tb.find("button:contains('Undo')"),
$redo = $tb.find("button:contains('Redo')");
if (ui.canUndo != null) {
$undo.button("option", { disabled: !ui.canUndo });
}
if (ui.canRedo != null) {
$redo.button("option", "disabled", !ui.canRedo);
}
$undo.button("option", { label: 'Undo (' + ui.num_undo + ')' });
$redo.button("option", { label: 'Redo (' + ui.num_redo + ')' });
},
colModel: [
{ title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 150 },
{ title: "Status", width: 165, dataIndx: "Status",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Page", width: 200, dataType: "string", dataIndx:"Page",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Layout", width: 200, dataType: "string", dataIndx:"Layout"},
{ title: "Part Number", width: 300, dataType: "string", dataIndx:"Part Number",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Type", width: 200, dataType: "string", dataIndx:"Type",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Material Type", width: 300, dataType: "string", dataIndx:"Material Type",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Finish", width: 200, dataType: "string", dataIndx:"Finish",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Inch/ Metric", width: 300, dataType: "string", dataIndx:"Inch/ Metric",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Shoulder Diameter", width: 300, dataType: "string", dataIndx:"Shoulder Diameter",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Shoulder Length", width: 300, dataType: "string", dataIndx:"Shoulder Length",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Shoulder Diameter Tolerance", width: 300, dataType: "string", dataIndx:"Shoulder Diameter Tolerance",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Shoulder Length Tolerance", width: 350, dataType: "string", dataIndx:"Shoulder Length Tolerance",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Thread Size", width: 300, dataType: "string", dataIndx:"Thread Size",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Thread Length", width: 300, dataType: "string", dataIndx:"Thread Length",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Thread Fit", width: 250, dataType: "string", dataIndx:"Thread Fit",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Drive System", width: 300, dataType: "string", dataIndx:"Drive System",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Drive Size", width: 250, dataType: "string", dataIndx:"Drive Size",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Head Diameter", width: 250, dataType: "string", dataIndx:"Head Diameter",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Head Height", width: 250, dataType: "string", dataIndx:"Head Height",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Dimensional Specification", width: 200, dataType: "string", dataIndx:"Dimensional Specification",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Applications", width: 200, dataType: "string", dataIndx:"Applications",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "USA / Import", width: 300, dataType: "string", dataIndx:"USA / Import",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Metal / Plastic", width: 300, dataType: "string", dataIndx:"Metal / Plastic",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Material", width: 250, dataType: "string", dataIndx:"Material",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Grade", width: 200, dataType: "string", dataIndx:"Grade",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Full / Partial Thread", width: 200, dataType: "string", dataIndx:"Full / Partial Thread",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Thread Direction", width: 200, dataType: "string", dataIndx:"Full / Partial Thread",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "name (misc)", width: 200, dataType: "string", dataIndx:"name (misc)",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Style", width: 200, dataType: "string", dataIndx:"Style",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Tolerance Type", width: 200, dataType: "string", dataIndx:"Tolerance Type",
filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
},
{ title: "Shoulder Diameter Decimal SORT Equivalent", width: 200, dataType: "string", dataIndx:"Shoulder Diameter Decimal SORT Equivalent"},
{ title: "Shoulder Length Decimal SORT Equivalent", width: 200, dataType: "string", dataIndx:"Shoulder Length Decimal SORT Equivalent"},
{ title: "Shoulder Size", width: 200, dataType: "string", dataIndx:"Shoulder Size"},
{ title: "Head Style", width: 200, dataType: "string", dataIndx:"Head Style"},
{ title: "Head Appearance", width: 200, dataType: "string", dataIndx:"Head Appearance"},
{ title: "Color (non-metallic)", width: 200, dataType: "string", dataIndx:"Color (non-metallic)"},
{ title: "Country of Origin", width: 200, dataType: "string", dataIndx:"Country of Origin"},
{ title: "Minimum Rockwell Hardness", width: 200, dataType: "string", dataIndx:"Minimum Rockwell Hardness"},
{ title: "Miaximum Rockwell Hardness", width: 200, dataType: "string", dataIndx:"Miaximum Rockwell Hardness"},
{ title: "Minimum Tensile Strength", width: 200, dataType: "string", dataIndx:"Minimum Tensile Strength"},
{ title: "DFARS", width: 200, dataType: "string", dataIndx:"DFARS"},
{ title: "RoHS", width: 200, dataType: "string", dataIndx:"RoHS"},
{ title: "Unit", width: 200, dataType: "string", dataIndx:"Unit"},
{ title: "Pack Size", width: 200, dataType: "string", dataIndx:"Pack Size"},
{ title: "Pack Type", width: 200, dataType: "string", dataIndx:"Pack Type"},
{ title: "Old List Price", width: 200, dataType: "string", dataIndx:"Old List Price"},
{ title: "Edge List 051915", width: 200, dataType: "string", dataIndx:"Edge List 051915"},
{ title: "Alternate Part", width: 200, dataType: "string", dataIndx:"Alternate Part"},
{ title: "Edge Class", width: 200, dataType: "string", dataIndx:"Edge Class"},
{ title: "Edge Description", width: 200, dataType: "string", dataIndx:"Edge Description"},
{ title: "Notes", width: 200, dataType: "string", dataIndx:"Notes"},
{ title: "", editable: false, minWidth: 85, sortable: false,
render: function (ui) {
return "<button type='button' class='delete_btn'>Delete</button>";
},
postRender: function (ui) {
var grid = this,
$cell = grid.getCell(ui);
$cell.find(".delete_btn")
.button({ icons: { primary: 'ui-icon-scissors'} })
.bind("click", function (evt) {
grid.deleteRow({ rowIndx: ui.rowIndx });
});
}
}
],
postRenderInterval: -1, //synchronous post render.
pageModel: { type: "local", rPP: 20 },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "ProductID",
url: "products.php", //for PHP
getData: function (response) {
return { data: response.data };
}
},
editable: true,
selectionModel: { type: 'cell' },
filterModel: { on: true, mode: "AND", header: true },
resizable: true,
flex:{one: true},
virtualX: true,
load: function (evt, ui) {
var grid = this,
data = grid.option('dataModel').data;
grid.widget().pqTooltip();
//validate the whole data.
// grid.isValid({ data: data });
}
};
var grid = pq.grid("#grid_editing", obj);
So please provide solution step by step so i can make this possible.
Thanks
