I have a web application, where I use a third party grid. The grid handles events on its cell in setCellValue, like this:
$("#productsGridContainer").dxDataGrid({
dataSource: data,
keyExpr: "Id",
allowColumnResizing: true,
showRowLines: true,
showBorders: true,
rowAlternationEnabled: true,
sorting: true,
paging: {
pageSize: 10
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [10, 20, 50, 100]
},
editing: {
mode: "row",
allowUpdating: true,
allowDeleting: true,
allowAdding: true
},
columns: [
{
dataField: "ItemDesc",
caption: "Description",
validationRules: [{ type: "required" }]
},
{
dataField: "ItemId",
caption: "SKU",
lookup: {
dataSource: skus,
displayExpr: "Value",
valueExpr: "Key"
},
setCellValue: function(newData, value, currentRowData) {
newData.ItemId = value;
$.ajax({
type: "POST",
url: rootDir + "PaaSubmission/GetSkuItemData",
data: '{ itemId: ' + value + ', custNo: ' + selectedCustomer.val() + ' }',
contentType: "application/json; charset=utf-8",
async: false, // if default/true, newData will not be defined in .done
dataType: "json"
})
.done(function(data) {
newData.ItemDesc = data.Description;
newData.ItemSize = data.Size;
newData.ItemOldPrice = data.OldPrice;
})
.fail(function(xhr, status, error) {
displayError("The ajax call to GetSkuItemData() action method failed:",
JSON.parse(xhr.responseText), "Please see the system administrator.");
})
}
As you can see, when the ajax call is done, it is too late to set newData properties. newData is still defined, but it is too late to set it, as setCellValue() is executed by then. THIS MAKES MY QUESTION DIFFERENT from other similar ones. Thus I have to call $ajax() synchronously using async: false. But I know that it is deprecated, as it freezes the browser. Could you please give me an advise on how it can be done without calling $ajax() synchronously?