Issues 1:
Hey I was working with autocomplete, so here in the Item Number table when I Select one item so the column for Description and Unitofmeasure get data mapped on the basis on ItemNo but when I try to copy multiple excel rows and paste them in the grid only the first row data is mapped for Description and unit of measure and other remains blank could u plz help me out here.
Please also go through attachment for proper understanding
Image1: Selection of item number using auto-complete method.
Image2: Dap-mapped in Description and Unit of Measure column on selecting the Item number.
Image3: When the multiple rows are pasted from excel to grid Description and unit of Measure column data is not mapped.
Note: custom Implementation for LocalStorage
code:
$(function () {
var interval;
var count = 0;
var ItemNoDetails = null;
var ItemDescription;
var autoCompleteEditor = function (ui) {
var $inp = ui.$cell.find("input");
$inp.autocomplete({
appendTo: ui.$cell,
source: (ui.dataIndx == "list", "/RFQEntry/GetItemNO"),
selectItem: { on: true },
highlightText: { on: true },
minLength: 0
}).focus(function () {
$(this).autocomplete("search", "");
});
}
function saveChanges() {
if (!$.active && !grid.getEditCell().$cell && grid.isDirty() && grid.isValidChange({ allowInvalid: true }).valid && count == 0) {
count++;
var gridChanges = grid.getChanges({ format: 'byVal' });
return gridChanges;
}
}
var obj = {
dragColumns: { enabled: false },
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 = {}; //empty row
var rowIndx = grid.addRow({ rowData: rowData });
grid.goToPage({ rowIndx: rowIndx });
grid.editFirstCellInRow({ rowIndx: rowIndx });
$("#grid_editing").focus();
count = 0;
}
},
{ type: 'separator' },
{
type: "<span class='saving'>Saving...</span>"
}
]
},
scrollModel: { autoFit: true },
editor: { select: true },
colModel: [
{
title: "ITEM", dataIndx: "ItemNo", width: 120, editor: { type: "textbox", init: autoCompleteEditor, },
validations: [
{ type: 'minLen', value: 1, msg: "Required" },
{
type: function (ui) {
var value = ui.value,
_found = false;
$.ajax({
url: "/RFQEntry/CheckItem",
data: { 'ItemNo': value },
async: false,
success: function (response) {
if (response == "true") {
_found = true;
ItemNoDetails = value;
}
}
});
if (!_found) {
ui.msg = value + " not found in list";
return false;
}
}
}
]
},
{
title: "QUANTITY", width: 100, dataType: "integer", dataIndx: "Quanitity",
validations: [
{ type: 'nonEmpty', msg: "Required" },
]
},
{
title: "UNIT OF MEASURE", width: 100, dataType: "string", dataIndx: "UnitOfMeasure",
validations: [
{ type: 'nonEmpty', msg: "Required" },
]
},
{
title: "TARGET PRICE", width: 100, dataType: "float", dataIndx: "TargetPrice",
validations: [{ type: 'gte', value: 0, msg: "Required" }]
},
{
title: "DESCRIPTION", width: 100, dataType: "string", align: "center", dataIndx: "Description",
validations: [{ type: 'gte', value: 0, msg: "Required" }]
},
{
title: "NOTES", width: 100, dataType: "string", dataIndx: "Notes",
render: function (ui) {
return "<button type='button' class='Note_btn'>Add Note</button>";
},
render: function (ui) {
return "<button type='button' class='Note_btn'>Add Note</button>";
},
postRender: function (ui) {
var grid = this,
$cell = grid.getCell(ui);
$cell.find(".Note_btn")
.button()
.bind("click", function (evt) {
$("#popup-dialog-crud").dialog({
});
$("#popup-dialog-crud").dialog("open");
$("#a").click(function () {
console.log("data added")
});
$("#c").click(function () {
$("#popup-dialog-crud").dialog("close");
});
});
}
},
{ title: "PACKING INSTRUCTIONS", width: 100, dataType: "string", dataIndx: "PackingInstructions" },
{
title: "Attachments", width: 100, dataType: "string", dataIndx: "Attachments",
render: function (ui) {
return "<button type='button' class='Attach_btn'>Add Attachment</button>";
},
postRender: function (ui) {
var grid = this,
$cell = grid.getCell(ui);
$cell.find(".Attach_btn")
.button()
.bind("click", function (evt) {
$("#Attachments").dialog({
});
$("#Attachments").dialog("open");
$("#aa").click(function () {
console.log("attachments added")
});
$("#ac").click(function () {
$("#Attachments").dialog("close");
});
});
}
},
{
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 });
});
}
}
],
formulas: [
["UnitOfMeasure", function () {
var id = ItemNoDetails;
var Unitresult = "";
localStorage.removeItem("Unitresult");
localStorage.removeItem("ItemDescription");
if (id != null) {
$.ajax({
url: "/RFQEntry/GetItemDescription",
data: { 'ItemNo': id },
async: false,
success: function (response) {
var ConvertJsonResponse = JSON.parse(response);
Unitresult = ConvertJsonResponse.UnitOfMeasure;
ItemDescription = ConvertJsonResponse.Description;
localStorage.setItem("ItemDescription", ItemDescription);
localStorage.setItem("Unitresult", Unitresult);
}
});
}
ItemNoDetails = null;
return localStorage.getItem("Unitresult");
}
],
["Description", function () {
return localStorage.getItem("ItemDescription");
}],
],
postRenderInterval: -1, //synchronous post render.
pageModel: { type: "local", rPP: 20 },
};
var grid = pq.grid("#grid_editing", obj);
});
==============================================================================================
Issue2
AutoSave Functionality
As we are going to the use session to store the temporary data of grid row one by one using auto-save functionality and at the end clicking on submit button all the data should be saved to the database from the session so here which would be the best approach.
