9
« on: August 01, 2019, 03:05:58 pm »
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.
Show Posts